/* ==============================
   MANIAR THEME MODE
============================== */

html.theme-dark,
body.theme-dark,
.theme-dark body {
    background: var(--dark-bg, #020812) !important;
    color: var(--dark-text, #ffffff) !important;
}

html.theme-light,
body.theme-light,
.theme-light body {
    background: var(--light-bg, #f4f7fb) !important;
    color: var(--light-text, #07111f) !important;
}

body.theme-light,
html.theme-light body {
    background:
        radial-gradient(circle at top right, rgba(0,157,255,0.10), transparent 36%),
        var(--light-bg, #f4f7fb) !important;
    color: var(--light-text, #07111f) !important;
}

body.theme-dark,
html.theme-dark body {
    background:
        radial-gradient(circle at top right, rgba(0,157,255,0.13), transparent 36%),
        var(--dark-bg, #020812) !important;
    color: var(--dark-text, #ffffff) !important;
}

/* Light mode global cards */
body.theme-light header,
body.theme-light .site-header,
body.theme-light .z12-header,
body.theme-light .p14-footer,
body.theme-light .product-card,
body.theme-light .p24-public-hero,
body.theme-light .p24-public-content,
body.theme-light .auth-card,
body.theme-light .account-card,
body.theme-light .account-hero,
body.theme-light .cart-card,
body.theme-light .checkout-card,
body.theme-light .shop-card,
body.theme-light .hero,
body.theme-light .section-card,
body.theme-light [class*="card"] {
    background: var(--light-card, #ffffff) !important;
    color: var(--light-text, #07111f) !important;
    border-color: rgba(7,17,31,0.10) !important;
    box-shadow: 0 16px 45px rgba(7,17,31,0.08) !important;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light strong,
body.theme-light b,
body.theme-light label,
body.theme-light .nav-link,
body.theme-light a {
    color: var(--light-text, #07111f);
}

body.theme-light p,
body.theme-light small,
body.theme-light span,
body.theme-light .muted,
body.theme-light .subtitle {
    color: var(--light-muted, rgba(7,17,31,0.62));
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: #ffffff !important;
    color: var(--light-text, #07111f) !important;
    border-color: rgba(7,17,31,0.14) !important;
}

body.theme-light select option {
    color: #111 !important;
}

body.theme-light .p14-bottom-nav {
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(7,17,31,0.10) !important;
    box-shadow: 0 -12px 35px rgba(7,17,31,0.10) !important;
}

body.theme-light .p14-bottom-nav a,
body.theme-light .p14-bottom-nav b {
    color: var(--light-text, #07111f) !important;
}

/* Dark mode global cards */
body.theme-dark header,
body.theme-dark .site-header,
body.theme-dark .z12-header,
body.theme-dark .p14-footer,
body.theme-dark .product-card,
body.theme-dark .auth-card,
body.theme-dark .account-card,
body.theme-dark .account-hero,
body.theme-dark .cart-card,
body.theme-dark .checkout-card,
body.theme-dark .shop-card,
body.theme-dark .hero,
body.theme-dark .section-card,
body.theme-dark [class*="card"] {
    background:
        radial-gradient(circle at top right, rgba(0,157,255,0.10), transparent 40%),
        var(--dark-card, #06101f) !important;
    color: var(--dark-text, #ffffff) !important;
    border-color: rgba(0,157,255,0.18) !important;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark strong,
body.theme-dark b,
body.theme-dark label {
    color: var(--dark-text, #ffffff);
}

body.theme-dark p,
body.theme-dark small,
body.theme-dark span,
body.theme-dark .muted,
body.theme-dark .subtitle {
    color: var(--dark-muted, rgba(255,255,255,0.62));
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background: rgba(255,255,255,0.055) !important;
    color: var(--dark-text, #ffffff) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Buttons */
body.theme-dark button,
body.theme-light button,
body.theme-dark .btn,
body.theme-light .btn,
body.theme-dark .admin-save-btn,
body.theme-light .admin-save-btn {
    border-radius: 16px;
}

body.theme-dark .primary-btn,
body.theme-light .primary-btn,
body.theme-dark button[type="submit"],
body.theme-light button[type="submit"] {
    background: linear-gradient(135deg, var(--orange, #ff7a00), #ffb000) !important;
    color: #fff !important;
}

/* Theme toggle button */
.theme-toggle-btn {
    position: fixed;
    right: 18px;
    bottom: 92px;
    z-index: 9999;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--orange, #ff7a00), #ffb000);
    box-shadow: 0 16px 36px rgba(255,122,0,0.28);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.theme-toggle-btn .theme-sun {
    display: none;
}

body.theme-light .theme-toggle-btn .theme-sun {
    display: inline;
}

body.theme-light .theme-toggle-btn .theme-moon {
    display: none;
}

body.theme-dark .theme-toggle-btn .theme-sun {
    display: none;
}

body.theme-dark .theme-toggle-btn .theme-moon {
    display: inline;
}

/* ==============================
   ADMIN THEME PAGE
============================== */

.theme-admin-layout {
    display: grid;
    gap: 20px;
}

.theme-admin-card {
    padding: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(0,157,255,0.12), transparent 40%),
        linear-gradient(180deg, rgba(6,16,31,0.98), rgba(2,8,18,0.98));
    border: 1px solid rgba(0,157,255,0.20);
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}

.theme-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.theme-card-head > span {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255,122,0,0.13);
    border: 1px solid rgba(255,122,0,0.24);
    display: grid;
    place-items: center;
    font-size: 27px;
}

.theme-card-head h2 {
    color: #fff;
    margin-bottom: 5px;
}

.theme-card-head p {
    color: rgba(255,255,255,0.58);
}

.theme-mode-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.theme-mode-options label {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    cursor: pointer;
    display: grid;
    gap: 8px;
}

.theme-mode-options label.active {
    border-color: rgba(255,122,0,0.45);
    background: rgba(255,122,0,0.12);
}

.theme-mode-options input {
    display: none;
}

.theme-mode-options strong {
    color: #fff;
    font-size: 18px;
}

.theme-mode-options small {
    color: rgba(255,255,255,0.60);
    line-height: 1.5;
}

.theme-check {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255,255,255,0.78);
    font-weight: 900;
}

.theme-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.theme-fields-grid label {
    display: grid;
    gap: 8px;
    color: rgba(255,255,255,0.72);
    font-weight: 900;
}

.theme-fields-grid input {
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
    color: #fff;
    padding: 0 12px;
}

.theme-fields-grid input[type="color"] {
    padding: 6px;
}

.theme-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.theme-preview > div {
    min-height: 180px;
    border-radius: 22px;
    padding: 22px;
    display: grid;
    align-content: center;
    gap: 10px;
}

.theme-preview strong {
    font-size: 26px;
}

.theme-preview p {
    line-height: 1.6;
}

.theme-preview button {
    width: max-content;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--orange, #ff7a00), #ffb000);
}

.theme-preview-dark {
    background: var(--dark-bg, #020812);
    border: 1px solid rgba(0,157,255,0.22);
}

.theme-preview-dark strong {
    color: var(--dark-text, #fff);
}

.theme-preview-dark p {
    color: var(--dark-muted, rgba(255,255,255,0.62));
}

.theme-preview-light {
    background: var(--light-bg, #f4f7fb);
    border: 1px solid rgba(7,17,31,0.10);
}

.theme-preview-light strong {
    color: var(--light-text, #07111f);
}

.theme-preview-light p {
    color: var(--light-muted, rgba(7,17,31,0.62));
}

.theme-save-btn {
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    color: #fff;
    font-weight: 950;
    font-size: 16px;
    background: linear-gradient(135deg, var(--orange, #ff7a00), #ffb000);
    box-shadow: 0 16px 34px rgba(255,122,0,0.22);
}

@media (max-width: 900px) {
    .theme-mode-options,
    .theme-fields-grid,
    .theme-preview {
        grid-template-columns: 1fr;
    }

    .theme-toggle-btn {
        right: 14px;
        bottom: 88px;
        width: 50px;
        height: 50px;
    }
}