:root {
    color-scheme: light dark;
    --grp-bg: #f5f7fa;
    --grp-surface: #ffffff;
    --grp-surface-alt: #f0f2f5;
    --grp-surface-hover: #e8ebef;
    --grp-text: #1f252e;
    --grp-muted: #5d6774;
    --grp-border: #d8dde6;
    --grp-accent: #8bc53e;
    --grp-accent-strong: #6aa12a;
    --grp-radius: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grp-bg: #10161d;
        --grp-surface: #17202a;
        --grp-surface-alt: #1e2a36;
        --grp-surface-hover: #243040;
        --grp-text: #e8eef5;
        --grp-muted: #b8c4d1;
        --grp-border: #2f3a47;
        --grp-accent: #9fd44e;
        --grp-accent-strong: #b0df68;
    }

    /* ── Form Controls ── */
    .text-input,
    .text-input2,
    .text-input3,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input:not([type]),
    textarea {
        background-color: var(--grp-surface-alt) !important;
        color: var(--grp-text) !important;
        border-color: var(--grp-border) !important;
    }

    select {
        background-color: var(--grp-surface-alt) !important;
        color: var(--grp-text) !important;
        border-color: var(--grp-border) !important;
    }

    ::placeholder {
        color: var(--grp-muted) !important;
        opacity: 1;
    }

    /* ── Content Panels ── */
    #main-new .content-panel,
    #main-new .content-panel-static,
    .content-panel {
        background: var(--grp-surface) !important;
        border-color: var(--grp-border) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    .content-panel-header {
        background: var(--grp-surface) !important;
        color: var(--grp-text) !important;
        border-color: var(--grp-border) !important;
    }

    .content-panel-header h1 {
        color: var(--grp-accent) !important;
    }

    .content-panel-content {
        color: var(--grp-text) !important;
    }

    /* ── Headings ── */
    h2, h3, h4 {
        color: var(--grp-accent) !important;
    }

    h5,
    .content h1,
    .content h2 {
        color: var(--grp-text) !important;
    }

    /* ── Labels ── */
    .input-label,
    .input-label2,
    .input-label label,
    .input-label2 label,
    .content-panel-content label,
    .register-name label,
    .register-cellphone label {
        color: var(--grp-text) !important;
    }

    /* ── Sidebar ── */
    .sidebar-div {
        background: var(--grp-surface) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    .side-deal-seperator-container {
        background-color: var(--grp-surface) !important;
    }

    .side-deal-seperator {
        border-color: var(--grp-border) !important;
    }

    /* ── Notifications & Alerts ── */
    .content-panel-message,
    .content-panel-notification {
        background-color: #2a2510 !important;
        border-color: #5a4a20 !important;
        color: var(--grp-text) !important;
    }

    .content-panel-highlight {
        background-color: #2a1520 !important;
        border-color: #5a3040 !important;
        color: var(--grp-text) !important;
    }

    .content-panel-highlight-success,
    .content-panel-highlight3 {
        background-color: #1a2a15 !important;
        border-color: #3a5a2a !important;
        color: var(--grp-text) !important;
    }

    .content-panel-error {
        background-color: #3a0a10 !important;
        color: #ffa0a0 !important;
    }

    /* ── User Menu & Navigation ── */
    #user-menu-container {
        color: var(--grp-text) !important;
    }

    #user-menu-container ul li a:link,
    #user-menu-container ul li a:visited,
    #user-menu-container ul li a:active {
        color: var(--grp-text) !important;
    }

    /* ── Breadcrumbs ── */
    .breadCrumbs ul li a {
        color: var(--grp-muted) !important;
    }

    .breadCrumbs ul li a:hover {
        color: var(--grp-text) !important;
    }

    .breadCrumbs ul li span {
        color: var(--grp-muted) !important;
    }

    /* ── Checkbox & Radio Lists ── */
    .dmcbl {
        background-color: var(--grp-surface-alt) !important;
        border-color: var(--grp-border) !important;
        color: var(--grp-text) !important;
    }

    /* ── Copy Button (referral code) ── */
    .manage-copy-btn {
        background-color: var(--grp-surface-alt) !important;
        border-color: var(--grp-border) !important;
        color: var(--grp-text) !important;
    }

    .manage-copy-btn:hover {
        background-color: var(--grp-surface-hover) !important;
        border-color: var(--grp-muted) !important;
    }

    .manage-copy-feedback {
        background-color: #1a2a15 !important;
        border-color: #3a5a2a !important;
        color: var(--grp-accent) !important;
    }

    /* ── Credit Card & Balance ── */
    .saved-cc:hover {
        background-color: var(--grp-surface-hover) !important;
    }

    .selected-cc,
    .selected-cc:hover {
        background-color: var(--grp-surface-alt) !important;
    }

    .gruparaHidden-div {
        border-color: var(--grp-border) !important;
    }

    .user-grupara-container td {
        background-color: var(--grp-surface-alt) !important;
    }

    /* ── Login & Checkout ── */
    .login-container {
        background-color: var(--grp-surface-alt) !important;
        border-color: var(--grp-border) !important;
    }

    .credit-card-container,
    .credit-card-container2 {
        background-color: var(--grp-surface-alt) !important;
        border-color: var(--grp-border) !important;
    }

    .checkout-page #header {
        background: var(--grp-surface) !important;
        border-color: var(--grp-border) !important;
    }

    .formtooltip {
        background-color: #0a4020 !important;
        color: #e8eef5 !important;
    }

    /* ── Deal Display ── */
    li.deal-list1 {
        background: var(--grp-surface) !important;
    }

    .deal-list ul li h2 {
        color: var(--grp-text) !important;
    }

    .deal-list ul li a {
        color: var(--grp-accent-strong) !important;
    }

    .deal-related-tags ul li {
        background: var(--grp-surface-alt) !important;
        color: var(--grp-accent) !important;
        border-color: var(--grp-border) !important;
    }

    .side-deal-text3 {
        color: var(--grp-muted) !important;
    }

    /* ── Mini Footer ── */
    .mini-footer {
        background: var(--grp-surface) !important;
    }

    .mini-footer .left a {
        color: var(--grp-accent) !important;
    }

    /* ── Tables ── */
    table td,
    table th {
        border-color: var(--grp-border) !important;
    }

    /* ── Page Container ── */
    #container-for-sticky-footer {
        background: var(--grp-bg) !important;
    }

    /* ── Dropline Tabs (category menus) ── */
    .droplinetabs a {
        color: var(--grp-text) !important;
        background: var(--grp-surface-alt) !important;
    }

    .droplinetabs .selectedMain {
        background: var(--grp-surface-hover) !important;
    }

    /* ── Search ── */
    .new-search input {
        background: var(--grp-surface-alt) !important;
        color: var(--grp-text) !important;
    }

    /* ── Body text override (grupanya.css sets body color:#000) ── */
    body {
        background: var(--grp-bg) !important;
        color: var(--grp-text) !important;
    }

    /* ── Horizontal Rule ── */
    hr {
        color: var(--grp-border) !important;
        background-color: var(--grp-border) !important;
    }
}

html[data-theme="light"] {
    --grp-bg: #f5f7fa;
    --grp-surface: #ffffff;
    --grp-surface-alt: #f0f2f5;
    --grp-surface-hover: #e8ebef;
    --grp-text: #1f252e;
    --grp-muted: #5d6774;
    --grp-border: #d8dde6;
    --grp-accent: #8bc53e;
    --grp-accent-strong: #6aa12a;
}

html[data-theme="dark"] {
    --grp-bg: #10161d;
    --grp-surface: #17202a;
    --grp-surface-alt: #1e2a36;
    --grp-surface-hover: #243040;
    --grp-text: #e8eef5;
    --grp-muted: #b8c4d1;
    --grp-border: #2f3a47;
    --grp-accent: #9fd44e;
    --grp-accent-strong: #b0df68;
}

body {
    background: var(--grp-bg);
    color: var(--grp-text);
}

a {
    color: var(--grp-accent-strong);
}

img,
video {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    font: inherit;
}

.subscription-modal,
.subscription-modal-body,
.cookie-window,
.grp-cookie {
    color: var(--grp-text);
}

.subscription-modal,
.subscription-result,
.rb-subscription {
    background: var(--grp-surface);
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
}

@media screen and (max-width: 1024px) {
    #container-for-sticky-footer,
    #content,
    #fb-main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ── Checkout Deal Info ── */
.checkout-head {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    height: auto !important;
    padding: 12px !important;
    background: var(--grp-surface) !important;
    border: 1px solid var(--grp-border);
    border-radius: var(--grp-radius);
    box-shadow: none !important;
}

.checkout-deal-image {
    flex-shrink: 0;
    width: 220px !important;
    height: auto !important;
    float: none !important;
    background: none !important;
}

.checkout-deal-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.checkout-details {
    flex: 1;
    float: none !important;
    width: auto !important;
    padding: 4px 0 0 0 !important;
}

.checkout-details h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--grp-text);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.dealInfoPriceArea {
    font-size: 13px;
    color: var(--grp-accent-strong) !important;
}

@media screen and (max-width: 768px) {
    #header,
    .top-center,
    .top-right,
    .new-search-mainPage {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .top-right ul,
    #user-menu-container ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}