/*
 * Dark theme overrides for the Celebrity Shop plugin.
 *
 * This file redefines the CSS custom properties (CSS variables) and a few
 * specific rules to switch the shop to a dark interface with vibrant
 * accent colours.  It should be enqueued after the main plugin styles to
 * ensure its declarations take precedence.
 */

:root {
  /*
   * Extend the core palette with a primary colour.  Some elements
   * (e.g., the “Read more” links) reference the CSS custom property
   * `--primary` with a fallback to a dark neutral (#111827).  Because
   * `--primary` was never defined in the base plugin, those fallbacks
   * remain dark on a dark background, resulting in near‑invisible text.
   * By defining `--primary` here and pointing it to the accent colour
   * (`--brand`), all references will resolve to a bright, vibrant hue.
   */
  --primary: var(--brand);
}
:root {
  --bg: #0e0e15;
  --card: #1b1b27;
  --text: #f5f5f5;
  --muted: #8a8fa3;
  --brand: #ff2b8a;
  --ring: rgba(255, 43, 138, 0.3);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Slider navigation buttons */
.cshop-slider__btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--card);
  color: var(--text);
}

/* Eliminate remaining light backgrounds.  The base styles specify white
   backgrounds for the play button overlay, step numbers and card media
   containers.  These stand out starkly against our dark palette, so
   override them here to blend into the interface. */
.cshop-card__media {
  background: var(--card);
}

.cshop-card__play {
  background: var(--brand);
  color: var(--card);
}

.cshop-card__play::before {
  /* Inherit colour for the play/pause icon from the button itself */
  color: inherit;
}

.cshop-step__num {
  background: var(--brand);
  color: var(--card);
  border: none;
}

/*
 * Limit How‑It‑Works card descriptions to exactly three lines.  Without
 * clamping the text can vary in length across categories, causing
 * inconsistent card heights and a broken layout.  By using
 * -webkit-line-clamp and related properties we constrain the
 * description to three lines and hide any overflow.  This ensures
 * all cards align neatly on both shop and category pages.  The
 * properties are supported by modern browsers; fallback behaviour is
 * simply to show the full text.
 */
.cshop-how__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/*
 * Keep How‑It‑Works cards the same height even when descriptions are
 * shorter.  A minimum height prevents smaller cards from collapsing
 * relative to their neighbours.  Adjust the pixel value based on the
 * approximate height of three lines of text plus headings and padding.
 */
/* Reduce the minimum height of How‑It‑Works cards to keep them more compact.
   A 160px height is sufficient for the step number, heading and three
   lines of description without leaving excessive empty space. */
.cshop-how__card {
  min-height: 160px;
}

/*
 * Limit product titles to two lines and reserve space even when the
 * title is shorter.  Without a minimum height the CTA button moves up
 * and down depending on the length of the product name.  The line
 * clamp hides overflow while the min-height ensures consistent spacing.
 */
.cshop-card__title,
.cshop-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
}

/*
 * Reorganise the How‑It‑Works cards so that the step number sits
 * inline with the heading instead of above it.  Using CSS grid allows
 * us to place the number and heading on the same row while the
 * description spans the full width below.  This saves vertical space
 * and keeps the design compact on both shop and category pages.  The
 * display override supersedes the default flex layout in the base
 * stylesheet.
 */
.cshop-how__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 0.75rem;
}

.cshop-how__step {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: 0;
}

/* Append a dot after the step number so the heading reads “1. Pick a Creator” */
.cshop-how__step::after {
  content: ".";
  margin-left: 0.25rem;
  font-weight: 700;
  color: inherit;
}

.cshop-how__heading {
  grid-row: 1;
  grid-column: 2;
  margin-top: 0;
}

.cshop-how__text {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* Darken card backgrounds and adjust borders */
.cshop-shop-desc-card,
.cshop-cat-card__inner,
.cshop-how__card,
.cshop-review {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Ensure text within review and badge components remains readable */
.cshop-review__author,
.cshop-review__product a,
.cshop-review__by,
.cshop-review-link,
.cshop-review__stars .star,
.cshop-badge,
.cshop-catpill {
  color: var(--text);
}

.cshop-badge {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Apply dark backgrounds to various sections */
.cshop-hero,
.cshop-section,
.cshop-how,
.cshop-cat-header {
  background: var(--bg);
  color: var(--text);
}

/* Review card layout adjustments */
/* Make review cards use a column layout and fill available height */
.cshop-review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.cshop-review__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cshop-review__content {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Limit review text to three lines instead of two.  This ensures
     enough context is visible while still preventing cards from
     growing taller than their neighbours. */
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.25rem;
}
/* Slightly smaller review text on mobile for better readability */
@media (max-width: 580px) {
  .cshop-review__content {
    font-size: 0.85rem;
  }
}

/* Optional: tweak headings to stand out against the dark backdrop */
.cshop-hero__title,
.cshop-hero__subtitle,
.cshop-section__title,
.cshop-how__title,
.cshop-cat-title {
  color: var(--text);
}

/*
 * Instant slider highlight bubble: adapt colours for dark mode.
 *
 * The base stylesheet gives the “Instant Delivery” slider heading a
 * light pink background with dark red text.  On a dark page this looks
 * out of place.  Here we invert the palette: the text uses our brand
 * colour while the pill background is a subtle semi‑transparent tint of
 * the brand.  A solid border reinforces the shape without being
 * overpowering.  Font sizing and padding follow the defaults.
 */
.cshop-highlight-title {
  color: var(--brand);
  background-color: rgba(255, 43, 138, 0.12);
  border-color: var(--brand);
}

/* Ensure “Book Now” buttons remain readable on dark cards */
.cshop-btn {
  /* Force white text to guarantee contrast regardless of inherited
     variables.  Use !important to override theme specificity. */
  color: #ffffff !important;
}

/* Product card titles should use the primary text colour */
.cshop-card__title,
.cshop-card__title a {
  color: var(--text);
}

/* Ensure read‑more links and banner text remain visible on dark backgrounds */
.cshop-readmore,
.cshop-cat-card .cshop-readmore {
  /* The base CSS references --primary with a dark fallback.  Use our
     primary/brand colour so that the links stand out against dark cards. */
  color: var(--primary);
}

/* Override banner text colours when displaying textual banners (i.e.
   when no banner image is present).  Without these overrides the
   banner headings default to dark colours, becoming invisible on the
   dark background. */
.cshop-banner-heading,
.cshop-banner-tagline {
  color: var(--text);
}

/*
 * Global dark mode for WooCommerce archive pages.
 *
 * To provide a consistent dark appearance across the shop and category
 * archives, we override the body background and default text colour
 * whenever WooCommerce adds its class to the `<body>` element.  The
 * additional selectors ensure that links and prices inherit suitable
 * colours on these pages.  The `!important` flag is used sparingly to
 * override any theme styles that might otherwise force a light
 * background.
 */
body.woocommerce {
  background: var(--bg) !important;
  color: var(--text);
}

body.woocommerce a {
  color: var(--brand);
}

body.woocommerce .price {
  color: var(--text);
}

/*
 * Apply the dark theme site‑wide for improved user experience and
 * accessibility.  The following rules set the default page
 * background, text colour, link styles and button appearance.  These
 * global styles ensure a consistent dark interface beyond the shop and
 * category pages.  Use softer dark tones rather than pure black to
 * minimise eye strain, as recommended by accessibility experts【528028079572784†L148-L156】.
 */
body {
  background: var(--bg) !important;
  color: var(--text);
  line-height: 1.55;
}

a {
  color: var(--brand);
}

a:hover, a:focus {
  color: #ffffff;
}

button,
input[type="submit"],
input[type="button"],
.button {
  background: var(--brand);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.button:focus {
  background: rgba(255, 43, 138, 0.8);
  color: #ffffff;
}

/*
 * Extend dark theme styles to WooCommerce single product pages and
 * WordPress blog posts/archives.  These rules target common
 * structural elements used by the default WordPress themes and
 * WooCommerce templates.  They ensure that backgrounds, text and
 * interactive elements align with the dark palette, providing
 * consistent user experience across the site.
 */
/* WooCommerce product pages */
.single-product,
.woocommerce-page .product,
.woocommerce div.product {
  background: var(--bg);
  color: var(--text);
}

.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .product_meta,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.woocommerce div.product .product_title,
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce div.product .price,
.woocommerce div.product .woocommerce-tabs .tabs li a {
  color: var(--text);
}

.woocommerce div.product .woocommerce-tabs .tabs li.active a,
.woocommerce div.product .woocommerce-tabs .tabs li a:hover {
  color: var(--brand);
}

/* Blog posts and archives */
.blog .post,
.archive .post,
.single-post .post,
.single-post .type-post,
.single-post .entry,
.home .post {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.blog .post h1,
.blog .post h2,
.blog .post h3,
.archive .post h1,
.archive .post h2,
.archive .post h3,
.single-post .entry-title,
.home .post h2 {
  color: var(--text);
}

.post-meta,
.entry-meta {
  color: var(--muted);
}

.entry-content p,
.entry-content li {
  color: var(--text);
}

.entry-content a {
  color: var(--brand);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 0.5rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

/*
 * Custom Product Booking (single product page) dark overrides.
 * The right panel uses light boxes for delivery time, guarantee and
 * review summary; override these to our card colour with clear
 * boundaries and accessible text.
 */
.cpb-right-panel-wrapper {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  color: var(--text);
}

.cpb-delivery-time-box,
.cpb-guarantee-box,
.cpb-review-summary,
.cpb-last-delivery {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 0.75rem;
  color: var(--text);
  box-shadow: var(--shadow);
}

.cpb-guarantee-box strong {
  color: var(--brand);
}

.cpb-review-summary .cpb-review-meta,
.cpb-last-delivery {
  color: var(--muted);
}

/* Blog Product Layout dark overrides */
.bpl-archive-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.bpl-archive-card .bpl-card-thumb {
  background: var(--card);
}

.bpl-archive-card h2,
.bpl-archive-card h2 a {
  color: var(--text);
}

.bpl-archive-card p {
  color: var(--text);
}

.bpl-archive-card .bpl-readmore {
  background: var(--brand);
  color: #ffffff;
  border-radius: var(--radius);
}

.bpl-archive-card .bpl-readmore:hover {
  background: rgba(255, 43, 138, 0.8);
  color: #ffffff;
}


/*
 * Transform the bottom category links into card‑style buttons.  The
 * .cshop-extras__cats container becomes a responsive grid, and each
 * .cshop-catpill link adopts card styling similar to the rest of the
 * plugin: dark background, subtle border, padding and radius.  On
 * hover the background switches to the brand colour to indicate
 * interactivity.
 */
.cshop-extras__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap);
  margin-top: 0.75rem;
}
.cshop-catpill {
  display: block;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: background 0.2s ease, color 0.2s ease;
}
.cshop-catpill:hover,
.cshop-catpill:focus {
  background: var(--brand);
  color: #ffffff;
}

/*
 * Redesigned category cards on product category pages.  Instead of
 * pill‑shaped links, display up to six categories as small cards with
 * the name and a truncated description.  Use a responsive grid to
 * distribute the cards evenly.  Each card adopts our dark card colour
 * with a subtle border and shadow.  The name and description are
 * clamped to two lines to maintain consistent height.
 */
.cshop-extras__cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap);
  margin-top: 1rem;
  /* Clear any floats from preceding review cards so that the grid starts on a new row */
  clear: both;
}

/* On narrow screens convert the category grid into a horizontal slider.
 * Users can scroll sideways to view all categories.  Each card takes up
 * most of the viewport width to remain legible on mobile.  The
 * horizontal scrolling uses native browser behaviour for smoothness.
 */
@media (max-width: 600px) {
  .cshop-extras__cats {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: var(--gap);
  }
  .cshop-catcard {
    flex: 0 0 70%;
    min-width: 200px;
    margin-right: var(--gap);
  }
  /* Hide the last card’s right margin */
  .cshop-catcard:last-child {
    margin-right: 0;
  }
}

.cshop-catcard {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cshop-catcard a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cshop-catcard:hover {
  background: rgba(255, 43, 138, 0.12);
}

.cshop-catcard-name {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}

.cshop-catcard-desc {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.25rem;
}

/*
 * -------------------------------------------------------------------------
 * Additional dark overrides
 *
 * Several third‑party modules (Custom Product Booking and Blog Product
 * Layout) enqueue their own stylesheets after this dark theme, setting
 * light backgrounds and borders on various panels and cards.  To ensure
 * a cohesive dark interface across single product pages, blog posts and
 * archives, we add stronger selectors with the !important flag.  These
 * rules guarantee that our dark palette takes precedence regardless of
 * stylesheet load order.
 */

/* Custom Product Booking (single product page) */
.cpb-right-panel-wrapper,
.cpb-delivery-time-box,
.cpb-guarantee-box,
.cpb-review-summary,
.cpb-last-delivery {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

/* Booking box and call‑to‑action button */
.cpb-booking-box {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem !important;
}

.cpb-book-now-button {
  background: var(--brand) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0.6rem 1rem !important;
  width: 100% !important;
  cursor: pointer;
}

/* Rating stars and meta within the CPB review summary */
.cpb-review-summary .cpb-stars {
  color: var(--brand) !important;
}
.cpb-review-summary .cpb-review-meta {
  color: var(--muted) !important;
}

/* Blog Product Layout (archive cards and related slider) */
.bpl-archive-card,
.bpl-archive-card .bpl-card-thumb {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
}
.bpl-archive-card h2,
.bpl-archive-card h2 a,
.bpl-archive-card p {
  color: var(--text) !important;
}
.bpl-archive-card .bpl-readmore {
  background: var(--brand) !important;
  color: #ffffff !important;
}
.bpl-archive-card .bpl-readmore:hover {
  background: rgba(255, 43, 138, 0.8) !important;
  color: #ffffff !important;
}

/* Related posts slider adjustments */
.bpl-related-slider-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.bpl-related-slider-title {
  color: var(--text) !important;
}

/*
 * Custom Product Booking description & reviews sections
 *
 * The description and reviews on single product pages are wrapped in
 * .cpb-description-reviews-wrapper and subdivided into .cpb-description-section
 * and .cpb-reviews-section.  The default plugin styles use the theme’s
 * backgrounds, leaving these panels white in dark mode.  Apply dark
 * backgrounds, borders and padding to blend them with the rest of the
 * interface.  Also override toggle and pagination buttons for a consistent
 * accent colour.
 */
.cpb-description-reviews-wrapper,
.cpb-description-section,
.cpb-reviews-section,
.cpb-review-content {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  padding: 1rem !important;
  color: var(--text) !important;
}

.cpb-section-title {
  color: var(--text) !important;
}

.cpb-review-rating {
  color: var(--brand) !important;
}

.cpb-description-toggle,
.cpb-read-more-description,
.cpb-read-more-review,
.cpb-reviews-pagination a {
  background: var(--brand) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0.4rem 0.8rem !important;
  cursor: pointer;
}

.cpb-reviews-pagination a:hover {
  background: rgba(255, 43, 138, 0.8) !important;
  color: #ffffff !important;
}

/* Popup modal dark mode */
.cpb-modal-container,
.cpb-modal-header,
.cpb-modal-footer,
.cpb-base-price-box,
.cpb-modal-body {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cpb-modal-header h3,
.cpb-total-price-box {
  color: var(--text) !important;
}

.cpb-modal-header,
.cpb-modal-footer {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.cpb-modal-close {
  color: var(--text) !important;
}
.cpb-modal-close:hover {
  color: var(--brand) !important;
}

/* Modal checkout button */
.cpb-checkout-button {
  background: var(--brand) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius) !important;
}
.cpb-checkout-button:hover {
  background: rgba(255, 43, 138, 0.8) !important;
  color: #ffffff !important;
}

/* Inputs inside modal */
.cpb-input-file,
.cpb-input-text,
.cpb-form-group textarea {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius) !important;
}
.cpb-input-file::placeholder,
.cpb-input-text::placeholder,
.cpb-form-group textarea::placeholder {
  color: var(--muted) !important;
}

/*
 * Custom Product Booking wrapper and row.
 *
 * The CPB main layout wraps the player and booking panels inside
 * `.cpb-wrapper` and `.cpb-row` elements.  The default CSS applies a
 * white background (#fff) and light border to `.cpb-row`, resulting in a
 * large white panel around the video and description.  Override these
 * containers to use our dark palette and subtle borders, ensuring the
 * product page fully blends with the site’s dark mode.
 */
.cpb-wrapper {
  background: transparent !important;
}
.cpb-row {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/*
 * Buyer Dashboard dark variables and overrides
 *
 * The buyer dashboard module defines its own CSS custom properties
 * (prefixed with --wtv-) and uses light colours for backgrounds, text and
 * borders.  Override these variables to point to our dark palette so
 * the dashboard automatically adapts.  Also provide explicit styles for
 * header buttons, tabs and content containers to ensure sufficient
 * contrast and consistency throughout the dashboard.
 */
:root {
  --wtv-bg-main: var(--bg);
  --wtv-bg-card: var(--card);
  --wtv-border-color: rgba(255, 255, 255, 0.1);
  --wtv-text-primary: var(--text);
  --wtv-text-secondary: var(--muted);
  --wtv-primary-color: var(--brand);
  --wtv-primary-hover: rgba(255, 43, 138, 0.8);
  --wtv-shadow: var(--shadow);
  --wtv-radius: var(--radius);
}

.wtv-dashboard-wrap,
.wtv-dashboard-content {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow) !important;
}

.wtv-header-btn,
.wtv-tab-item {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wtv-header-btn:hover,
.wtv-tab-item:hover {
  background: rgba(255, 43, 138, 0.12) !important;
  color: var(--brand) !important;
}

.wtv-tab-item.active {
  background: var(--card) !important;
  color: var(--brand) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/*
 * Ensure the WooCommerce single product container inherits the dark background.
 *
 * Many WordPress themes wrap single product content inside additional
 * structural divs (e.g. `.container`, `.content-area`, `#primary`, `.site-main`)
 * and apply a white background.  These wrappers can override our dark
 * body styles, leaving a large white rectangle behind the product.  The
 * selectors below target common container classes and set their
 * background to transparent so the body’s dark colour shows through.
 */
.single-product #primary,
.single-product .site-main,
.single-product .content-area,
.single-product .container,
.single-product .wc-container,
.woocommerce #primary,
.woocommerce .site-main,
.woocommerce .content-area,
.woocommerce .container,
.woocommerce .wc-container {
  background: transparent !important;
  color: inherit;
}

/*
 * Booking modal add-on items
 *
 * The add-on list inside the booking modal uses light backgrounds and borders.
 * These overrides darken each list item, set the checkbox accent colour to
 * match our brand, and adjust label colours and hover states.  A small
 * margin and padding ensure consistent spacing.
 */
.cpb-addons-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.cpb-addon-item {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 0.5rem !important;
  padding: 0.5rem !important;
  transition: background-color 0.2s ease;
}

.cpb-addon-item:hover {
  background: rgba(255, 43, 138, 0.12) !important;
}

.cpb-addon-item input[type="checkbox"] {
  accent-color: var(--brand) !important;
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
}

.cpb-addon-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text) !important;
}

/* Character counter for requirements field */
#cpb-requirements-counter {
  color: var(--muted) !important;
}

/*
 * Buyer dashboard order card styling
 *
 * The buyer dashboard displays each order as a card with a white background
 * and light footer.  Override these cards to use dark backgrounds, subtle
 * borders and appropriate text colours.  Action buttons inherit the
 * brand colour so they stand out on a dark surface.
 */
.wtv-order-card {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
.wtv-order-card:hover {
  box-shadow: var(--shadow) !important;
}
.wtv-card-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.wtv-card-footer {
  background: var(--card) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
}
.wtv-order-id,
.wtv-order-detail strong {
  color: var(--muted) !important;
}
.wtv-order-detail span {
  color: var(--text) !important;
}
.wtv-action-btn {
  background-color: var(--brand) !important;
  color: #ffffff !important;
  border: none !important;
}
.wtv-action-btn:hover {
  background-color: rgba(255, 43, 138, 0.8) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
 * Login Popup Dark Mode
 *
 * The login plugin defines a light coloured modal window and form fields.
 * To match the dark theme of the rest of the site we override key
 * backgrounds, borders and text colours with our palette variables.  Use
 * !important sparingly to outrank the inline styles in the login
 * component.  Links and buttons use the brand colour as an accent.
 */
.wtv-login-popup-container {
  background: var(--card) !important;
  color: var(--text);
  box-shadow: var(--shadow);
}
.wtv-login-popup-container h2 {
  color: var(--text);
}
.wtv-login-popup-input {
  background: var(--bg);
  border: 1px solid var(--muted);
  color: var(--text);
}
.wtv-login-popup-btn,
.wtv-google-login-btn {
  background-color: var(--brand);
  color: var(--card);
}
.wtv-login-popup-btn:hover,
.wtv-google-login-btn:hover {
  background-color: #e02679;
  color: var(--card);
}
.wtv-popup-divider {
  border-color: var(--muted);
}
.wtv-popup-divider span {
  background: var(--card);
  color: var(--muted);
}
.wtv-remember-me {
  color: var(--muted);
}
.wtv-toggle-flow span {
  color: var(--brand);
}

/* ---------------------------------------------------------------------
 * Chat Plugin Dark Mode
 *
 * The chat plugin injects inline CSS with light colours for chat buttons
 * and windows.  We override those styles here using our dark palette.
 */
#wtv-chat-button-detailed,
#wtv-chat-button {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--muted) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}
#wtv-chat-button-detailed:hover,
#wtv-chat-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
}
#wtv-chat-button .chat-icon,
#wtv-chat-button-detailed .chat-icon {
  stroke: var(--brand) !important;
}
#wtv-chat-button-detailed .wtv-chat-button-text .main-text,
#wtv-chat-button-detailed .wtv-chat-button-text .sub-text {
  color: var(--text);
}
#wtv-chat-window {
  background: var(--card) !important;
  border: 1px solid var(--muted) !important;
  box-shadow: var(--shadow);
}
#wtv-chat-window .chat-header {
  background: var(--brand) !important;
  color: var(--card) !important;
}
#wtv-chat-window .chat-body {
  background: var(--card) !important;
  color: var(--text);
}
#wtv-chat-messages .message-entry.sent .chat-message {
  background: var(--brand) !important;
  color: var(--card) !important;
}
#wtv-chat-messages .message-entry.received .chat-message {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--muted);
}
#wtv-chat-messages .chat-timestamp {
  color: var(--muted);
}
#wtv-chat-window .chat-footer {
  background: var(--card) !important;
  border-top: 1px solid var(--muted) !important;
}
#wtv-chat-window .chat-footer textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--muted);
}
#wtv-chat-window .chat-footer button {
  background: var(--brand);
  color: var(--card);
}
#wtv-chat-window .chat-footer button:hover {
  background: #e02679;
}
#wtv-chat-window .chat-header #wtv-close-chat {
  color: var(--card);
}