/* ===================================================================
   Rup Shringar — ecommerce rebrand theme
   Loaded after bootstrap.min.css and style.css, so these rules win.
   NOTE: floating action buttons (.whatsapp-float, .back-to-top)
   live in style.css / Spinner.txt — do not duplicate them here.
   =================================================================== */

:root {
    --bs-primary: #C1485C;
    --bs-primary-rgb: 193, 72, 92;

    --brand-ink: #2E1420;      /* deep plum-black — body text */
    --brand-base: #FAF3EC;     /* warm ivory — light section backgrounds */
    --brand-accent: #C1485C;   /* raspberry-rose — buttons, links, CTAs */
    --brand-gold: #D9A441;     /* marigold gold — stars, prices, small accents */
    --brand-surface: #3B1D2E;  /* deep plum — dark sections (promo strip) */
    --brand-muted: #E7CFC9;    /* soft mauve — card borders */
}

body {
    color: var(--brand-ink);
}


.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C1485C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* Brand accent line (was the Dancing Script salon greeting) */
.font-brand-script {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
}

.text-primary {
    color: var(--brand-accent) !important;
}

.bg-primary {
    background-color: var(--brand-accent) !important;
}

.btn-primary {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-surface) !important;
}

.hero-header,
.bg-light {
    background-color: var(--brand-base) !important;
}

.service-item,
.team-item {
    border-color: var(--brand-muted) !important;
}

/* Bestseller price/category line above the product name */
.team-overlay p.text-primary {
    font-weight: 600;
}

/* Star ratings on bestseller cards */
.rating i {
    color: var(--brand-gold);
    font-size: 0.85rem;
}

/* Promo strip ("10% off first order") */
.promo-strip {
    background-color: var(--brand-surface);
}

.promo-strip input.form-control {
    border: none;
    padding: 0.65rem 1rem;
}

.promo-strip .btn-primary {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-ink) !important;
}

.promo-strip .btn-primary:hover {
    background-color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* Product card hover lift — shop.html and bestsellers only, since these are the shoppable items */
.team-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(46, 20, 32, 0.12);
}

/* -------------------------------------------------------------------
   Contact page — give the form and the store-info column separate
   visual identities instead of both floating on plain white.
   ------------------------------------------------------------------- */

/* Left: contact form — clean white card, lifted off the page */
.contact-form-panel {
    background-color: #fff;
    border: 1px solid var(--brand-muted);
    border-radius: 14px;
    padding: 2.25rem;
    box-shadow: 0 6px 24px rgba(46, 20, 32, 0.06);
}

/* Right: store info + map — warm tinted panel with an accent edge */
.contact-info-panel {
    background-color: var(--brand-base);
    border-radius: 14px;
    border-left: 4px solid var(--brand-accent);
    padding: 2.25rem;
}

.contact-info-panel h4 {
    color: var(--brand-ink);
}

.contact-info-panel .ratio {
    border: 1px solid var(--brand-muted);
}

/* -------------------------------------------------------------------
   FAQ accordion — brand-styled replacement for the Tailwind version.
   Single-open accordion with animated height + rotating icon.
   ------------------------------------------------------------------- */

.faq-item {
    background-color: var(--brand-base);
    border: 1px solid var(--brand-muted);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
    background-color: #fff;
    border-color: var(--brand-accent);
}

.faq-item .faq-question {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brand-ink);
}

.faq-item .faq-icon {
    color: var(--brand-muted);
    background-color: transparent;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

.faq-item.active .faq-icon {
    background-color: var(--brand-accent);
    color: #fff;
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    font-size: 0.9rem;
    color: var(--brand-ink);
    opacity: 0.75;
    line-height: 1.6;
    margin-top: 1rem;
    margin-bottom: 0;
}