/*
 * UAE Flower Online — Minimal theme layer
 * Loads AFTER demo2.min.css. Purely additive: overrides color/typography/
 * surface treatment of the existing Porto/Electro theme without touching
 * markup, JS behaviour, or the vendor stylesheet itself.
 * Replaces the earlier "Liquid Glass" direction (rejected: too busy, low
 * contrast). Style: Minimalism & Swiss (ui-ux-pro-max) - solid surfaces, no
 * blur, no translucency, one accent color. The flowers are the color, not
 * the UI chrome.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --color-ink: #1C1917;
    --color-text: #0C0A09;
    --color-text-muted: #6B6560;
    --color-bg: #FAFAF9;
    --color-surface: #FFFFFF;
    --color-border: #E7E5E4;
    --color-accent: #CA8A04;
    --color-accent-dark: #A16207;
    --color-footer-bg: #1C1917;
    --color-footer-text: #D6D3D1;

    --radius: 10px;
    --transition: 200ms ease;
}

/* Respect reduced-motion before anything else declares an animation */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* ---------- Typography: serif headings, clean sans everywhere else ---------- */
h1, h2, h3,
.banner-title,
.section-title,
.category-name,
.widget-title,
.menu-title,
.widget-about-title {
    font-weight: 600;
    color: var(--color-text);
}

/* ---------- Links, focus & interaction baseline ---------- */
a, button, .btn, .cart-toggle, .mobile-menu-toggle, .scroll-top,
.main-nav > ul > li > a, input[type="submit"] {
    cursor: pointer;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---------- Header: solid surface, no blur ---------- */
.header-top {
    background: var(--color-ink);
    color: #fff;
}

.header-top a,
.header-top .welcome-msg {
    color: #fff !important;
}

.heder-second {
    background: var(--color-accent);
    color: #fff;
}

.heder-second .last-marqe p,
.heder-second marquee {
    color: #fff;
}

.header-middle,
.header-bottom {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.header-bottom.sticky-header.fixed {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.header-search.input-wrapper {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.header-search .form-control {
    background: transparent;
    border: none;
}

.header-search .btn-search {
    background: var(--color-ink);
    color: #fff;
    border-radius: 0 999px 999px 0;
}

.cart-toggle .cart-count {
    background: var(--color-accent);
    color: #fff;
}

/* Megamenu: solid dropdown, no layout-shifting hover transforms */
.main-nav > ul > li > a {
    color: var(--color-text);
    transition: color var(--transition);
}

.main-nav > ul > li:hover > a,
.main-nav > ul > li.active > a {
    color: var(--color-accent-dark);
}

.megamenu,
.dropdown-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.megamenu a:hover {
    color: var(--color-accent-dark);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transition: background var(--transition), box-shadow var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

.btn-white.btn-rounded {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* ---------- Cards, banners & category tiles: solid surface, subtle lift ---------- */
.card,
.category-media,
.icon-box-wrapper .swiper-slide {
    border-radius: var(--radius);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.category-classic-section .swiper-slide,
.icon-box.icon-box-side {
    transition: transform var(--transition), box-shadow var(--transition);
}

@media (prefers-reduced-motion: no-preference) {
    .category-classic-section .swiper-slide:hover,
    .icon-box.icon-box-side:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }
}

.banner-content {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.sale-banner.banner {
    background: var(--color-ink);
}

/* ---------- Swiper pagination / nav accents ---------- */
.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-accent);
}

/* ---------- Scroll-to-top ---------- */
#scroll-top {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

#scroll-top #progress-indicator {
    stroke: var(--color-accent) !important;
}

/* ---------- Footer: solid dark, no translucency ---------- */
.footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
}

.footer .widget-title,
.footer h3.widget-title,
.footer h4.widget-title {
    color: #fff;
    font-family: 'Cormorant', Georgia, serif;
}

.footer a,
.footer .widget-about-desc,
.footer .copyright,
.footer .payment-label {
    color: var(--color-footer-text);
}

.footer a:hover {
    color: #fff;
}

.footer .social-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.footer .social-icon:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* ---------- Product card: equal-height grid, CTA pinned to the bottom ---------- */
/* Markup (demo2 theme, unchanged):
   .product-wrap > .product > figure.product-media > img.pdt-img
                            > .product-details > h4.product-name, .product-price
                            > a.btn.landing-cart (Order Now / Added in Cart)
   The card and its "Order Now" button misalign across a row because product
   names wrap to a different number of lines per card. Fixed with flex: the
   wrapper stretches to the row's tallest card, the details block absorbs the
   leftover space, and the button always lands flush at the bottom. */
.product-wrapper {
    align-items: stretch;
}

.product-wrap {
    display: flex;
    height: 100%;
}

.product-wrap .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: box-shadow var(--transition), border-color var(--transition);
}

@media (prefers-reduced-motion: no-preference) {
    .product-wrap .product:hover {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        border-color: #D6D3D1;
    }
}

.product-wrap .product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    margin: 0;
}

.product-wrap .product-media .pdt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

@media (prefers-reduced-motion: no-preference) {
    .product-wrap .product:hover .product-media .pdt-img {
        transform: scale(1.04);
    }
}

.product-wrap .product-label-group {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.product-wrap .product-label.label-new {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 4px;
}

.product-wrap .product-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 4px;
    text-align: center;
}

.product-wrap .product-name {
    flex: 1 0 auto;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    line-height: 1.45;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
}

.product-wrap .product-name a {
    color: inherit;
}

.product-wrap .product-price {
    margin-bottom: 4px;
    font-size: 1.4rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.product-wrap .product-price .currency {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.product-wrap .product-price .old-price {
    color: var(--color-text-muted);
    opacity: 0.8;
    font-size: 1.2rem;
}

.product-wrap .product-price .new-price {
    color: var(--color-text);
    font-weight: 700;
}

/* The CTA is a sibling of .product-details, not nested inside it - because
   .product-details flex-grows to fill the column, this always lands flush at
   the card's bottom edge, at the same height across every card in the row.
   Deliberately NOT overriding font-size, padding, border-radius or color here:
   the theme's own .btn / .btn-primary / .btn-success already define those
   consistently for every other button on the site - this card should match
   them, not introduce a one-off style. The theme also sets
   .landing-cart{width:100%}, which this card's own left/right margin would
   overflow against, so that's the one thing reset. */
.product-wrap .landing-cart {
    width: auto;
    margin: 10px 14px 14px;
}

.product-wrap .btn-success.landing-cart {
    margin-right: 14px;
}

/* ---------- Campaign landing-page hero (vday-landing-page.blade.php, landing-page.blade.php) ---------- */
/* These classes (.shop-default-banner-landing, .banner-top-section, .info-strip,
   .info-pill, .valentine-points, .btn-vday-top, .landing-h1/h2) had NO styling
   anywhere in the codebase - not in demo2.min.css, not in landing.css, nowhere.
   The old fixed `height: 40vh` inline style on the hero (still in some blade
   files) combined with completely unstyled content is why text was clipped/
   unreadable. Built from scratch here: min-height instead of a fixed height
   so the section always fits its content, a scrim over the photo so text
   stays readable regardless of what's behind it, and solid (not glass) cards
   for the trust row, consistent with the rest of the minimal theme. A
   deliberate, scoped exception to the sitewide neutral palette: these are
   seasonal/romantic campaign pages, so the pink accent stays here. */
.shop-default-banner-landing,
.shop-default-banner {
    min-height: 420px;
    height: auto !important;
    padding: 48px 24px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* .shop-default-banner (Valentine's page): busy photo throughout, no solid
   negative space, so it still needs a light scrim for dark text to read. */
.shop-default-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.25) 100%);
}

/* .shop-default-banner-landing (generic city/country pages, e.g. Sharjah):
   the photo (flower-delivery-banner.webp) already has a solid dark-charcoal
   panel built into its left side, so text sits directly on the photo in
   white - no scrim needed to fake contrast. Just a faint edge gradient as a
   safety net for in-between crops. */
.shop-default-banner-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 25, 23, 0.45) 0%, rgba(28, 25, 23, 0.15) 55%, transparent 80%);
}

.shop-default-banner-landing .banner-top-section,
.shop-default-banner .banner-top-section {
    position: relative;
    z-index: 1;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.shop-default-banner-landing .landing-h2,
.shop-default-banner-landing .banner-top-section .text-muted,
.shop-default-banner-landing .valentine-points li {
    color: #fff;
}

.shop-default-banner-landing .valentine-points li::before {
    background: var(--color-accent);
}

.landing-h1,
.landing-h2 {
    font-family: 'Cormorant', Georgia, serif;
    line-height: 1.15;
    margin: 0 0 8px;
}

.landing-h1 {
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 700;
}

.landing-h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 600;
}

.text-pink,
.text-deep-pink {
    color: var(--color-accent-dark);
}

.banner-top-section .text-muted {
    color: var(--color-text-muted);
    font-size: 1.5rem;
}

.info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.info-strip .badge,
.info-strip .info-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
}

.info-strip .badge.bg-success {
    background: #15803D;
    color: #fff;
}

.info-strip .info-pill.highlight {
    background: var(--color-accent);
    color: #fff;
}

.valentine-points {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.valentine-points li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 6px;
    color: var(--color-text);
    font-size: 1.4rem;
}

.valentine-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent-dark);
}

.hero-content .btn-vday-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent-dark);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content .btn-vday-top:hover {
        background: #7A1030;
    }
}

@media (max-width: 767px) {
    /* Narrow crops can lose the photo's dark left panel entirely, so fall
       back to a solid dark overlay on mobile rather than risk white text on
       a bright patch of the photo. */
    .shop-default-banner-landing::before {
        background: rgba(28, 25, 23, 0.55);
    }

    .shop-default-banner::before {
        background: rgba(255, 255, 255, 0.88);
    }

    .shop-default-banner-landing .banner-top-section,
    .shop-default-banner .banner-top-section {
        max-width: 100%;
    }
}

/* ---------- Customer review cards (includes/frontend/customer-review.blade.php) ---------- */
/* .testimonial / .testimonial-shadow / blockquote / cite had no real styling
   anywhere either - same gap as the campaign hero above. */
.testimonial-wrap {
    height: auto;
    padding: 6px;
}

.testimonial {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
}

.testimonial-shadow {
    box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
    .testimonial-shadow {
        transition: box-shadow var(--transition), border-color var(--transition);
    }

    .testimonial-shadow:hover {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        border-color: #D6D3D1;
    }
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.testimonial-author-thumbnail.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 600;
}

.testimonial .ratings,
.testimonial .ratings-full {
    color: var(--color-accent);
}

.testimonial blockquote {
    flex: 1 0 auto;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-text);
    font-style: italic;
    margin: 0 0 16px;
    quotes: none;
}

.testimonial cite {
    font-style: normal;
    font-weight: 600;
    color: var(--color-text);
    font-size: 1.3rem;
    display: block;
}

.testimonial cite span {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* ---------- SEO landing-page dedicated content (includes/frontend/seo-pages/*) ---------- */
.seo-page-section {
    max-width: 860px;
    margin: 0 auto 36px;
    text-align: left;
}

.seo-page-section h2 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.seo-page-section h3 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.seo-page-section p {
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 12px;
}

.seo-page-section a {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.seo-check-list,
.seo-step-list {
    margin: 0 0 12px;
    padding-left: 0;
    list-style: none;
}

.seo-step-list {
    counter-reset: seo-step;
}

.seo-check-list li,
.seo-step-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.seo-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent-dark);
    font-weight: 700;
}

.seo-step-list li {
    counter-increment: seo-step;
}

.seo-step-list li::before {
    content: counter(seo-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-ink);
    color: #fff;
    font-size: 1.1rem;
    line-height: 20px;
    text-align: center;
}

.seo-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.seo-table {
    width: 100%;
    border-collapse: collapse;
}

.seo-table th,
.seo-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.3rem;
}

.seo-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text);
}

.seo-faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
}

.seo-faq-item:last-child {
    border-bottom: none;
}

.seo-faq-item h3 {
    margin-bottom: 6px;
}

.seo-final-cta {
    text-align: center;
}

.seo-final-cta .btn {
    display: inline-block;
    margin: 8px 0 12px;
}

.seo-final-cta-secondary {
    color: var(--color-text-muted);
    font-size: 1.3rem;
}

/* ---------- Layout safety: no horizontal scroll from the new effects ---------- */
html, body {
    overflow-x: hidden;
}