/* =========================================================
   LAYA STYLE | RAED THEME
   Luxury Abaya Store - Salla
   Color System: Off-White / Beige / Brown / Soft Gold
   Responsive: Desktop + Tablet + Mobile
   CSS ONLY - No External Libraries
   ========================================================= */


/* =========================================================
   01. COLOR VARIABLES
   ========================================================= */

:root {

    /* Main Backgrounds */
    --laya-bg: #F7F4EE;
    --laya-bg-soft: #F2EDE3;
    --laya-bg-card: #FBF9F5;

    /* Main Text */
    --laya-text: #3A2D26;
    --laya-text-dark: #211D1A;
    --laya-text-secondary: #604D40;
    --laya-text-muted: #77685D;

    /* Beige */
    --laya-beige: #D8C9B0;
    --laya-beige-light: #E8DFD1;

    /* Gold */
    --laya-gold: #C9B58C;
    --laya-gold-light: #DED1B9;
    --laya-gold-dark: #A98D5F;

    /* Borders */
    --laya-border: #E3DACB;
    --laya-border-light: #ECE5DA;

    /* Shadows */
    --laya-shadow:
        0 6px 25px rgba(58, 45, 38, 0.06);

    --laya-shadow-hover:
        0 12px 35px rgba(58, 45, 38, 0.10);

    /* Radius */
    --laya-radius: 12px;
    --laya-radius-small: 8px;
}


/* =========================================================
   02. GLOBAL PAGE
   ========================================================= */

html {
    background: var(--laya-bg) !important;
}

body {
    background: var(--laya-bg) !important;
    color: var(--laya-text) !important;
}


/* Prevent white sections */
body,
.main-content,
.page-content,
.app-inner,
.store-content,
.container {
    background-color: var(--laya-bg) !important;
}


/* =========================================================
   03. GLOBAL TYPOGRAPHY
   ========================================================= */

body,
button,
input,
textarea,
select {
    color: var(--laya-text) !important;
}


/* Main headings */
h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.section-title {
    color: var(--laya-text-dark) !important;
    font-weight: 600;
}


/* Normal text */
p {
    color: var(--laya-text-secondary) !important;
}


/* Links */
a {
    color: var(--laya-text) !important;
    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

a:hover {
    color: var(--laya-gold-dark) !important;
}


/* Small text */
small,
.text-sm,
.text-muted {
    color: var(--laya-text-muted) !important;
}


/* =========================================================
   04. HEADER
   ========================================================= */

header,
.store-header,
.navbar,
.header {
    background: var(--laya-bg) !important;
    color: var(--laya-text) !important;
    border-bottom: 1px solid var(--laya-border-light) !important;
}


/* Header links */
header a,
.store-header a,
.navbar a {
    color: var(--laya-text-dark) !important;
}


/* Header links hover */
header a:hover,
.store-header a:hover,
.navbar a:hover {
    color: var(--laya-gold-dark) !important;
}


/* =========================================================
   05. HEADER ICONS
   ========================================================= */

header svg,
.store-header svg,
.navbar svg {
    color: var(--laya-gold-dark) !important;
    stroke: currentColor !important;
}


/* Soft icon containers */
header button,
.store-header button,
.navbar button {
    border-radius: 50% !important;
    transition: all 0.25s ease;
}


/* =========================================================
   06. MAIN NAVIGATION
   ========================================================= */

.main-nav,
.nav-menu,
.navigation {
    background: var(--laya-bg) !important;
}


.main-nav a,
.nav-menu a,
.navigation a {
    color: var(--laya-text) !important;
    font-weight: 500;
}


.main-nav a:hover,
.nav-menu a:hover,
.navigation a:hover {
    color: var(--laya-gold-dark) !important;
}


/* =========================================================
   07. SECTIONS
   ========================================================= */

section,
.section,
.home-section,
.product-section,
.categories-section {
    background-color: transparent !important;
}


/* Alternate soft sections */
.bg-light,
.bg-white,
.section-light {
    background-color: var(--laya-bg-soft) !important;
}


/* =========================================================
   08. PRODUCT CARDS
   ========================================================= */

.product-card,
.product-item,
.s-product-card,
.card {
    background: var(--laya-bg-card) !important;
    border: 1px solid var(--laya-border-light) !important;
    border-radius: var(--laya-radius) !important;
    box-shadow: var(--laya-shadow);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Product hover */
.product-card:hover,
.product-item:hover,
.s-product-card:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--laya-shadow-hover);
    border-color: var(--laya-beige) !important;
}


/* Product title */
.product-card .product-title,
.product-item .product-title,
.s-product-card .product-title {
    color: var(--laya-text-dark) !important;
    font-weight: 600;
}


/* Product description */
.product-card p,
.product-item p,
.s-product-card p {
    color: var(--laya-text-secondary) !important;
}


/* Product price */
.price,
.product-price,
.current-price,
.s-product-card-price {
    color: var(--laya-text-dark) !important;
    font-weight: 700;
}


/* Old price */
.old-price,
.price-before {
    color: var(--laya-text-muted) !important;
}


/* =========================================================
   09. PRODUCT BADGES
   ========================================================= */

.product-card .badge,
.product-item .badge,
.s-product-card .badge {
    background: linear-gradient(
        135deg,
        var(--laya-gold-light),
        var(--laya-gold)
    ) !important;

    color: var(--laya-text-dark) !important;
    border: none !important;
    border-radius: 20px !important;
    font-weight: 600;
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

button,
.btn,
.button,
.s-button,
.add-to-cart {
    border-radius: var(--laya-radius-small) !important;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}


/* Primary buttons */
.btn-primary,
.s-button-primary,
button[type="submit"],
.add-to-cart {
    background: linear-gradient(
        135deg,
        var(--laya-gold),
        var(--laya-gold-dark)
    ) !important;

    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600;
}


/* Primary hover */
.btn-primary:hover,
.s-button-primary:hover,
button[type="submit"]:hover,
.add-to-cart:hover {
    background: linear-gradient(
        135deg,
        var(--laya-gold-dark),
        var(--laya-gold)
    ) !important;

    color: #FFFFFF !important;
    transform: translateY(-1px);
}


/* Secondary buttons */
.btn-secondary,
.s-button-secondary {
    background: transparent !important;
    color: var(--laya-text-dark) !important;
    border: 1px solid var(--laya-beige) !important;
}


.btn-secondary:hover,
.s-button-secondary:hover {
    background: var(--laya-bg-soft) !important;
    color: var(--laya-text-dark) !important;
}


/* =========================================================
   11. ICONS
   ========================================================= */

/*
   Soft icons:
   No dark aggressive gradients.
*/

svg,
.icon,
[class*="icon"] {
    color: var(--laya-gold-dark);
}


/* Circular icon backgrounds */
.icon-wrapper,
.icon-box,
.feature-icon {
    background: linear-gradient(
        145deg,
        #F4EFE7,
        #E9DFCF
    ) !important;

    color: var(--laya-gold-dark) !important;
    border: 1px solid var(--laya-border-light) !important;
    border-radius: 50% !important;
}


/* Icon SVG */
.icon-wrapper svg,
.icon-box svg,
.feature-icon svg {
    color: var(--laya-gold-dark) !important;
    stroke: currentColor !important;
}


/* =========================================================
   12. INPUTS / SEARCH
   ========================================================= */

input,
textarea,
select,
.form-control {
    background: var(--laya-bg-card) !important;
    color: var(--laya-text-dark) !important;
    border: 1px solid var(--laya-border) !important;
    border-radius: var(--laya-radius-small) !important;
}


/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: var(--laya-text-muted) !important;
    opacity: 1;
}


/* Focus */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--laya-gold) !important;
    box-shadow:
        0 0 0 3px rgba(201, 181, 140, 0.15) !important;
    outline: none !important;
}


/* =========================================================
   13. CART
   ========================================================= */

/* Cart page */
.cart-page,
.cart-content,
.cart-container {
    background: var(--laya-bg) !important;
}


/* Empty cart */
.empty-cart,
.s-empty-cart {
    background: var(--laya-bg) !important;
    color: var(--laya-text) !important;
}


/* Empty cart icon */
.empty-cart svg,
.s-empty-cart svg {
    color: var(--laya-text) !important;
}


/* Empty cart title */
.empty-cart h1,
.empty-cart h2,
.empty-cart h3,
.s-empty-cart h1,
.s-empty-cart h2,
.s-empty-cart h3 {
    color: var(--laya-text-dark) !important;
}


/* Empty cart text */
.empty-cart p,
.s-empty-cart p {
    color: var(--laya-text-secondary) !important;
}


/* Cart button */
.empty-cart a,
.s-empty-cart a {
    background: transparent !important;
    color: var(--laya-text-dark) !important;
    border: 1px solid var(--laya-beige) !important;
    border-radius: var(--laya-radius-small) !important;
}


/* =========================================================
   14. CART DRAWER
   ========================================================= */

.cart-drawer,
.s-cart-drawer,
.drawer {
    background: var(--laya-bg) !important;
    color: var(--laya-text) !important;
}


/* Cart drawer title */
.cart-drawer h1,
.cart-drawer h2,
.cart-drawer h3,
.s-cart-drawer h1,
.s-cart-drawer h2,
.s-cart-drawer h3 {
    color: var(--laya-text-dark) !important;
}


/* =========================================================
   15. CHECKOUT
   ========================================================= */

.checkout,
.checkout-page,
.checkout-content {
    background: var(--laya-bg) !important;
}


.checkout h1,
.checkout h2,
.checkout h3,
.checkout h4 {
    color: var(--laya-text-dark) !important;
}


.checkout p,
.checkout span,
.checkout label {
    color: var(--laya-text-secondary) !important;
}


/* =========================================================
   16. FOOTER
   ========================================================= */

/*
   Footer is intentionally very close
   to the main store background.
*/

footer,
.store-footer,
.footer {
    background: var(--laya-bg) !important;
    color: var(--laya-text) !important;
    border-top: 1px solid var(--laya-border-light) !important;
}


/* Footer columns */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
    color: var(--laya-text-dark) !important;
    font-weight: 600;
}


/* Footer text */
footer p,
footer span,
.store-footer p,
.store-footer span {
    color: var(--laya-text-secondary) !important;
}


/* Footer links */
footer a,
.store-footer a {
    color: var(--laya-text-secondary) !important;
}


footer a:hover,
.store-footer a:hover {
    color: var(--laya-gold-dark) !important;
}


/* Footer icons */
footer svg,
.store-footer svg {
    color: var(--laya-gold-dark) !important;
}


/* =========================================================
   17. FOOTER SOCIAL ICONS
   ========================================================= */

footer .social,
.store-footer .social {
    display: flex;
    gap: 8px;
}


footer .social a,
.store-footer .social a {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        145deg,
        #F5F0E8,
        #E9DFCF
    ) !important;

    border: 1px solid var(--laya-border-light) !important;
    border-radius: 50% !important;
}


footer .social a:hover,
.store-footer .social a:hover {
    background: var(--laya-beige-light) !important;
}


/* =========================================================
   18. FOOTER BOTTOM / COPYRIGHT
   ========================================================= */

footer .footer-bottom,
.store-footer .footer-bottom,
footer .copyright {
    background: var(--laya-bg) !important;
    color: var(--laya-text-secondary) !important;
    border-top: 1px solid var(--laya-border-light) !important;
}


/* Salla copyright area */
footer .salla-footer,
.store-footer .salla-footer {
    background: var(--laya-bg) !important;
    color: var(--laya-text-secondary) !important;
}


/* =========================================================
   19. FEATURE / TRUST SECTION
   ========================================================= */

.features,
.features-section,
.store-features {
    background: var(--laya-bg-soft) !important;
}


/* Feature title */
.features h3,
.features h4,
.store-features h3,
.store-features h4 {
    color: var(--laya-text-dark) !important;
}


/* Feature text */
.features p,
.store-features p {
    color: var(--laya-text-secondary) !important;
}


/* =========================================================
   20. REVIEWS
   ========================================================= */

.reviews,
.testimonials,
.customer-reviews {
    background: var(--laya-bg-soft) !important;
}


.review-card,
.testimonial-card {
    background: var(--laya-bg-card) !important;
    border: 1px solid var(--laya-border-light) !important;
    border-radius: var(--laya-radius) !important;
    box-shadow: var(--laya-shadow);
}


.review-card h3,
.review-card h4,
.testimonial-card h3,
.testimonial-card h4 {
    color: var(--laya-text-dark) !important;
}


.review-card p,
.testimonial-card p {
    color: var(--laya-text-secondary) !important;
}


/* Stars */
.stars,
.rating,
.rating-stars {
    color: var(--laya-gold-dark) !important;
}


/* =========================================================
   21. BREADCRUMBS
   ========================================================= */

.breadcrumb,
.breadcrumbs {
    background: transparent !important;
}


.breadcrumb a,
.breadcrumbs a {
    color: var(--laya-text-secondary) !important;
}


.breadcrumb span,
.breadcrumbs span {
    color: var(--laya-text-muted) !important;
}


/* =========================================================
   22. DROPDOWN / MEGA MENU
   ========================================================= */

.dropdown-menu,
.mega-menu,
.menu-dropdown {
    background: var(--laya-bg-card) !important;
    border: 1px solid var(--laya-border-light) !important;
    box-shadow: var(--laya-shadow-hover) !important;
    border-radius: var(--laya-radius-small) !important;
}


.dropdown-menu a,
.mega-menu a,
.menu-dropdown a {
    color: var(--laya-text) !important;
}


.dropdown-menu a:hover,
.mega-menu a:hover,
.menu-dropdown a:hover {
    background: var(--laya-bg-soft) !important;
    color: var(--laya-gold-dark) !important;
}


/* =========================================================
   23. MODALS
   ========================================================= */

.modal-content,
.modal-dialog,
.s-modal {
    background: var(--laya-bg-card) !important;
    color: var(--laya-text) !important;
    border: 1px solid var(--laya-border-light) !important;
    border-radius: var(--laya-radius) !important;
}


.modal h1,
.modal h2,
.modal h3,
.modal h4 {
    color: var(--laya-text-dark) !important;
}


.modal p,
.modal span {
    color: var(--laya-text-secondary) !important;
}


/* =========================================================
   24. PAGINATION
   ========================================================= */

.pagination a,
.pagination button {
    background: var(--laya-bg-card) !important;
    color: var(--laya-text) !important;
    border: 1px solid var(--laya-border-light) !important;
    border-radius: 8px !important;
}


.pagination .active,
.pagination a:hover,
.pagination button:hover {
    background: var(--laya-gold-light) !important;
    color: var(--laya-text-dark) !important;
}


/* =========================================================
   25. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
}


::-webkit-scrollbar-track {
    background: var(--laya-bg);
}


::-webkit-scrollbar-thumb {
    background: var(--laya-beige);
    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--laya-gold);
}


/* =========================================================
   26. SELECTION
   ========================================================= */

::selection {
    background: var(--laya-beige);
    color: var(--laya-text-dark);
}


/* =========================================================
   27. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body {
        background: var(--laya-bg) !important;
    }

    header,
    .store-header,
    .navbar {
        background: var(--laya-bg) !important;
    }

    .product-card,
    .product-item,
    .s-product-card {
        border-radius: 10px !important;
        box-shadow: 0 4px 18px rgba(58, 45, 38, 0.05);
    }

    .product-card:hover,
    .product-item:hover,
    .s-product-card:hover {
        transform: none;
    }

    .btn,
    .button,
    .s-button,
    .add-to-cart {
        min-height: 44px;
    }

    footer,
    .store-footer {
        background: var(--laya-bg) !important;
    }

    footer .social a,
    .store-footer .social a {
        width: 36px;
        height: 36px;
    }
}


/* =========================================================
   28. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .product-card,
    .product-item,
    .s-product-card {
        border-radius: 11px !important;
    }

    footer,
    .store-footer {
        background: var(--laya-bg) !important;
    }
}


/* =========================================================
   29. DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .product-card:hover,
    .product-item:hover,
    .s-product-card:hover {
        transform: translateY(-3px);
    }
}


/* =========================================================
   30. REMOVE HARSH WHITE BACKGROUNDS
   ========================================================= */

.bg-white,
.background-white,
.is-white,
.bg-gray-50 {
    background-color: var(--laya-bg) !important;
}


/* =========================================================
   31. ACCESSIBILITY / TEXT CLARITY
   ========================================================= */

/*
   Keep text dark against the Off-White background.
   Avoid low-contrast gold text.
*/

.text-primary {
    color: var(--laya-text-dark) !important;
}


.text-secondary {
    color: var(--laya-text-secondary) !important;
}


.text-muted {
    color: var(--laya-text-muted) !important;
}


/* =========================================================
   32. FINAL GLOBAL OVERRIDES
   ========================================================= */

/* Main readable text */
body,
p,
span,
label,
li,
td,
th {
    text-rendering: optimizeLegibility;
}


/* Do not allow pure white backgrounds */
body,
main,
section,
footer,
header {
    background-color: var(--laya-bg) !important;
}


/* Strong headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--laya-text-dark) !important;
}


/* Readable paragraphs */
p {
    color: var(--laya-text-secondary) !important;
}


/* Gold should be accent only */
.price,
.badge,
.rating,
.icon,
svg {
    /* intentionally subtle */
}