/*
 * LetsCo main content placeholder styling.
 * Scoped to #main-content-scroll so header, sidebar, and footer are not affected.
 *
 * Current behavior:
 * - The main content background switches between white and black.
 * - Product placeholder cards stay visually consistent: white center + double grey border.
 * - Expedia iframe/product-card experiments have been removed from the theme.
 */

#main-content-scroll {
    background-color: #ffffff;
    transition: background-color 300ms ease, color 300ms ease;
}

#main-content-scroll.dark {
    background-color: #0a0a0a;
}

/* Let the main content scroll area control the page background instead of the
   page shell wrappers. This avoids the placeholder cards being used as the
   dark/light visual switch. */
#main-content-scroll > div {
    background-color: transparent !important;
}

#main-content-scroll .letsco-product-placeholder > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card {
    background-color: #ffffff !important;
    border: 4px double #d1d5db !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#main-content-scroll .letsco-placeholder-center,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card > .letsco-placeholder-center {
    background-color: #ffffff !important;
}

#main-content-scroll .letsco-product-placeholder:hover > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"]:hover > .letsco-placeholder-card {
    border-color: #9ca3af !important;
}