/* ==========================================================================
   layout_1_lux.css  —  QrexOrder / baseetgulf
   ADDITIVE luxury + full RTL layer for theme_1 (frontend/theme_1/home.php).
   Loads AFTER layout_1.css and inc/custom_color.php.

   RULES OF ENGAGEMENT
   - Brand color is ALWAYS var(--dcolor) / var(--primaryColor) (admin site_color,
     currently #E04A2F). Depth/gold come from color-mix() — NEVER a hardcoded brand.
   - Overrides match the base selector's specificity so source-order wins.
   - Works in both .theme-light and .theme-dark (hero/why/footer bands carry
     white text in both themes, matching the base design).
   - Job 1 = refinement pass. Job 2 = the [dir="rtl"] block at the bottom.
   - No markup change was required; every hook already existed in T1_home.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand-derived design tokens (theme-independent; namespaced --lux-*)
   -------------------------------------------------------------------------- */
:root {
    --lux-gold: color-mix(in srgb, var(--dcolor) 42%, #f6c983);
    --lux-deep: color-mix(in srgb, var(--dcolor) 82%, #1c0d07);
    --lux-brand-grad: linear-gradient(135deg, var(--dcolor) 0%, var(--lux-deep) 100%);
    --lux-gold-grad: linear-gradient(120deg, var(--lux-gold) 0%, var(--dcolor) 58%, var(--lux-deep) 100%);
    --lux-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --lux-ink-onDark: rgba(255, 255, 255, 0.82);
}

/* Refined Arabic type is linked from header.php (Tajawal + Cairo). */

/* --------------------------------------------------------------------------
   1. HERO — appetizing dark warm brand band + orbs + refined type/buttons
   -------------------------------------------------------------------------- */
.landing-page .hero-wrap {
    background:
        radial-gradient(115% 130% at 82% 6%, color-mix(in srgb, var(--dcolor) 52%, transparent) 0%, transparent 52%),
        radial-gradient(95% 105% at 6% 100%, color-mix(in srgb, var(--lux-gold) 24%, transparent) 0%, transparent 55%),
        linear-gradient(160deg, #1b0f0a 0%, color-mix(in srgb, var(--dcolor) 26%, #180f0b) 48%, color-mix(in srgb, var(--dcolor) 55%, #0d0806) 100%);
    /* Shrink the tall empty top third: let the band size to content with a modest
       floor instead of a full 100dvh, keeping the content vertically centered. */
    height: auto !important;
    min-height: 82vh;
    padding-top: 5.5rem;
    padding-bottom: 1.5rem;
}
.landing-page .hero-inner {
    padding-bottom: 4rem;
}

/* Floating decorative orbs (pure CSS, no markup) */
.landing-page .hero-wrap::before,
.landing-page .hero-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.landing-page .hero-wrap::before {
    width: 460px;
    height: 460px;
    top: -140px;
    inset-inline-end: -90px;
    background: color-mix(in srgb, var(--dcolor) 55%, transparent);
    opacity: 0.55;
    animation: luxOrb 13s ease-in-out infinite;
}
.landing-page .hero-wrap::after {
    width: 320px;
    height: 320px;
    bottom: -80px;
    inset-inline-start: -70px;
    background: color-mix(in srgb, var(--lux-gold) 60%, transparent);
    opacity: 0.4;
    animation: luxOrb 16s ease-in-out infinite reverse;
}
@keyframes luxOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(0, -42px) scale(1.09); }
}

/* Keep hero content + wave above the orbs */
.landing-page .hero-inner { position: relative; z-index: 2; }
.hero-wrap .bottomShape { z-index: 3; }

/* Premium badge */
.landing-page .hero-badge {
    background: color-mix(in srgb, var(--dcolor) 14%, rgba(10, 22, 40, 0.28));
    border: 1px solid color-mix(in srgb, var(--dcolor) 38%, transparent);
    color: rgba(255, 255, 255, 0.96);
    padding: 0.5rem 1.05rem;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.landing-page .hero-badge .fa { color: var(--lux-gold); }

/* Gradient brand title (populate site_name to show it) */
.landing-page .hero-title-gold {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    background: var(--lux-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dcolor); /* fallback if clip unsupported */
}

/* Brush underline — thicken + brand/gold feel (stroke is var(--primaryColor) inline) */
.landing-page .style-shape { height: 14px; bottom: -11px; }
.landing-page .style-shape .animate-brush { stroke-width: 4; }

.landing-page .hero-desc {
    color: var(--lux-ink-onDark);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 540px;
}

/* Feature chips — raised contrast for legibility on the mid-brown gradient */
.landing-page .hero-feature-item {
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s var(--lux-ease);
}
.landing-page .hero-feature-item:hover {
    border-color: color-mix(in srgb, var(--dcolor) 45%, transparent);
    background: color-mix(in srgb, var(--dcolor) 12%, rgba(255, 255, 255, 0.04));
}
.landing-page .hero-feature-item .fa { color: var(--lux-gold); }

/* Buttons */
.hero-bottom-action > .btn {
    padding: 14px 28px;
    border: 1.5px solid color-mix(in srgb, var(--dcolor) 60%, rgba(255, 255, 255, 0.35));
    border-radius: 50px;
    letter-spacing: 0.4px;
    backdrop-filter: blur(4px);
}
.hero-bottom-action > .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.hero-bottom-action .btn.live-demo-btn {
    background: var(--lux-brand-grad);
    border: 1.5px solid transparent;
    color: #fff;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--dcolor) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hero-bottom-action .btn.live-demo-btn:hover {
    background: var(--lux-gold-grad);
    color: #1c0d05;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--dcolor) 46%, transparent);
}

/* Phone mockup — brand glow halo + gentle float */
.landing-page .phone-container { position: relative; }
.landing-page .phone-container::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 78%;
    top: 12%;
    inset-inline-start: 11%;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--dcolor) 55%, transparent), transparent 68%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.landing-page .phone-frame {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #2c3646 0%, #171f2c 100%);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--dcolor) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: luxFloat 6s ease-in-out infinite;
}
@keyframes luxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}
.iphone-slider-dots .dot.active { background: var(--lux-gold); }

/* --------------------------------------------------------------------------
   2. SECTION HEADINGS & ACCENTS (de-blue the theme toward brand)
   -------------------------------------------------------------------------- */
.biz-types-badge {
    background: color-mix(in srgb, var(--dcolor) 10%, var(--soft-background));
    color: var(--dcolor);
    border: 1px solid color-mix(in srgb, var(--dcolor) 28%, transparent);
}
.ops-suite-label .fa { color: var(--dcolor); }
.test-biz { color: var(--dcolor); }

.biz-types-heading,
.ops-section-title,
.testimonials-title,
h2.heading-text {
    letter-spacing: -0.02em;
}

/* the highlight_word() wrapper renders a colored inner span — tint it gold */
.biz-types-heading b,
.biz-types-heading .highlight,
.ops-section-title b,
.ops-section-title .highlight {
    color: var(--dcolor);
}

/* --------------------------------------------------------------------------
   3. CARDS across step_1 / step_2 partials — refined depth & brand hover
   -------------------------------------------------------------------------- */
.biz-type-card,
.pricing-card,
.testimonial-card,
.accordion-card {
    border-radius: 18px;
    transition: transform 0.35s var(--lux-ease), box-shadow 0.35s var(--lux-ease), border-color 0.35s var(--lux-ease);
}
.biz-type-card:hover,
.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--dcolor) 14%, rgba(0, 0, 0, 0.14));
    border-color: color-mix(in srgb, var(--dcolor) 30%, transparent);
}
.accordion-card:hover {
    border-color: color-mix(in srgb, var(--dcolor) 25%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--dcolor) 10%, rgba(0, 0, 0, 0.1));
}

/* Ops tools active tab — brand shadow instead of the base blue rgba */
.ops-tab-link.active {
    box-shadow: 0 8px 26px color-mix(in srgb, var(--dcolor) 40%, transparent);
}
.ops-head-ico {
    background: var(--lux-brand-grad);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--dcolor) 34%, transparent);
}
.ops-feat-check { background: var(--lux-brand-grad); }

/* FAQ accordion count bubble + chevron */
.accordion-btn .count { background: var(--lux-gold-grad); }

/* How-it-works — elegant centered card */
.how_it_works .single_serivce_area {
    flex-direction: column;
    text-align: center;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 2.25rem 1.5rem;
    box-shadow: 0 10px 30px var(--box-shadow);
    height: 100%;
    transition: transform 0.35s var(--lux-ease), box-shadow 0.35s var(--lux-ease), border-color 0.35s var(--lux-ease);
}
.how_it_works .single_serivce_area:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--dcolor) 35%, transparent);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--dcolor) 16%, transparent);
}
.how_it_works .home_service_img {
    background: var(--lux-brand-grad);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--dcolor) 30%, transparent);
}
.learn_more_link { color: var(--dcolor); font-weight: 600; }

/* Services cards */
.serviceSection .singleService {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--box-shadow);
    transition: transform 0.35s var(--lux-ease), box-shadow 0.35s var(--lux-ease);
}
.serviceSection .singleService:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--dcolor) 14%, rgba(0, 0, 0, 0.14));
}

/* --------------------------------------------------------------------------
   4. WHY-CHOOSE + FOOTER bands — brand-consistent (base uses blue default var)
   -------------------------------------------------------------------------- */
.why-choose-section {
    background:
        radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--dcolor) 34%, transparent), transparent 55%),
        linear-gradient(160deg, #180f0b 0%, color-mix(in srgb, var(--dcolor) 34%, #0f0908) 100%);
}
.why-choose-heading .why-h-gold,
.why-stat,
.why-ico-wrap .fa { color: var(--lux-gold); }
.why-ico-wrap {
    background: color-mix(in srgb, var(--dcolor) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dcolor) 25%, transparent);
}
.why-card:hover {
    border-color: color-mix(in srgb, var(--lux-gold) 35%, transparent);
    box-shadow: 0 16px 44px color-mix(in srgb, var(--dcolor) 20%, rgba(0, 0, 0, 0.3));
}

.footer-section {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--dcolor) 30%, #140c09) 0%, #0e0806 100%);
}
.footer-section::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--lux-gold-grad);
    opacity: 0.85;
}
.footer-social a { background: color-mix(in srgb, var(--dcolor) 45%, transparent); }
.footer-social a:hover { background: var(--dcolor); }
.footer-links a i { color: var(--lux-gold); }
.footer-links .footer-link:hover { color: var(--lux-gold); }
.contact-item span { color: var(--lux-gold); }

/* --------------------------------------------------------------------------
   5. COOKIE BANNER — not styled in base; full lux styling here
   -------------------------------------------------------------------------- */
.cookie-container {
    position: fixed;
    inset-inline: 18px;
    bottom: 18px;
    max-width: 560px;
    margin-inline: auto;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    animation: cookieRise 0.5s var(--lux-ease) both;
}
/* Visible by default (the theme's accept-JS hides/removes it on click — we never
   gate visibility ourselves, so acceptance/hiding logic keeps working untouched). */
@keyframes cookieRise {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.cookie-container p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color);
    font-family: 'Poppins', sans-serif;
}
.cookie-container p a {
    color: var(--dcolor);
    font-weight: 600;
    text-decoration: underline;
}
.cookie-container .cookie-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-weight: 700;
    color: #fff;
    background: var(--lux-brand-grad);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dcolor) 32%, transparent);
    transition: all 0.3s var(--lux-ease);
}
.cookie-container .cookie-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--dcolor) 45%, transparent);
}

/* --------------------------------------------------------------------------
   QA FIX — Pricing card top accent (a tier card ships a hardcoded BLUE edge)
   Rebrand the top border + tier accents to Baseet orange. Covers the base
   theme's blue "advanced" tier and the alternate pricing-partial selectors.
   (Green/amber/purple tiers stay as intentional variety — only blue is fixed.)
   -------------------------------------------------------------------------- */
.pricing-card--advanced,
.home_pricing .price_card,
.pricing_1 .price_card,
.pricing_3 .price_card,
.package-card.featured,
.price_card.active {
    border-top-color: var(--dcolor) !important;
}
.pricing-card--advanced .card-price,
.pricing-card--advanced .pricing-cta,
.pricing-card--advanced .fa-check {
    color: var(--dcolor) !important;
}
.pricing-card--advanced .subscribe-btn {
    background-color: var(--dcolor) !important;
}
.pricing-card--advanced .pricing-offer-badge {
    border-color: color-mix(in srgb, var(--dcolor) 45%, transparent) !important;
    color: var(--dcolor) !important;
    background: color-mix(in srgb, var(--dcolor) 8%, transparent) !important;
}

/* --------------------------------------------------------------------------
   QA FIX — Top navbar login/signup pill (was a low-contrast orange ghost
   outline on the navbar) → solid brand fill.
   -------------------------------------------------------------------------- */
.landing-page .btn-gradient-pill {
    background: var(--lux-brand-grad) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dcolor) 30%, transparent);
}
.landing-page .btn-gradient-pill:hover {
    background: var(--lux-gold-grad) !important;
    color: #1c0d05 !important;
    transform: translateY(-1px);
}
.landing-page .nav-side-link:hover {
    color: var(--dcolor) !important;
}

/* ==========================================================================
   JOB 2 —  FULL RTL LAYER  (the base theme ships ZERO RTL support)
   The row/grid mirroring itself is handled by bootstrap-rtl.css (loaded in RTL);
   below we fix every bare left/right, translateX centering, text-align, float,
   and switch Arabic copy to the refined Tajawal/Cairo faces.
   ========================================================================== */

/* ---- Arabic typography ---- */
[dir="rtl"] .landing-page,
[dir="rtl"] .footer-section,
[dir="rtl"] .cookie-container {
    font-family: 'Tajawal', 'Cairo', 'Poppins', sans-serif;
}
[dir="rtl"] .landing-page h1,
[dir="rtl"] .landing-page h2,
[dir="rtl"] .landing-page h3,
[dir="rtl"] .landing-page h4,
[dir="rtl"] .landing-page h5,
[dir="rtl"] .landing-page h6,
[dir="rtl"] .hero-badge,
[dir="rtl"] .hero-title-gold,
[dir="rtl"] .hero-cats,
[dir="rtl"] .landing-page .hero-desc,
[dir="rtl"] .hero-feature-item,
[dir="rtl"] .hero-bottom-action > .btn,
[dir="rtl"] .biz-types-heading,
[dir="rtl"] .biz-type-title,
[dir="rtl"] .biz-type-desc,
[dir="rtl"] .ops-section-title,
[dir="rtl"] .ops-pane-title,
[dir="rtl"] .ops-pane-desc,
[dir="rtl"] .pricing-plan-name,
[dir="rtl"] .why-choose-heading,
[dir="rtl"] .why-card-title,
[dir="rtl"] .why-card-desc,
[dir="rtl"] .test-quote,
[dir="rtl"] .test-biz,
[dir="rtl"] .btn.accordion-btn,
[dir="rtl"] .accordion-body,
[dir="rtl"] .footer-links a,
[dir="rtl"] .footer-title,
[dir="rtl"] .cookie-container p {
    font-family: 'Tajawal', 'Cairo', 'Poppins', sans-serif !important;
    letter-spacing: normal !important;
}

/* ---- Hero: alignment (base forces .text-lg-left / .text-left) ---- */
[dir="rtl"] .hero-wrap .text-lg-left,
[dir="rtl"] .landing-page .hero-desc.text-lg-left,
[dir="rtl"] .hero-features.text-left {
    text-align: right !important;
}
/* icon spacing inside hero buttons (mr-1 / mr-2 utilities) */
[dir="rtl"] .hero-bottom-action .btn .fa {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}
[dir="rtl"] .landing-page .hero-feature-item .fa {
    margin-right: 0;
    margin-left: 0.5rem;
}
/* orbs sit on logical sides already (inset-inline-*), so they mirror automatically */

/* ---- Ops tools ---- */
[dir="rtl"] .ops-head-ico {
    margin-right: 0 !important;
    margin-left: 10px !important;
}
[dir="rtl"] .ops-feat-check {
    margin-right: 0;
    margin-left: 0.7rem;
}
[dir="rtl"] .ops-pane-body.text-md-left,
[dir="rtl"] .ops-pane-body { text-align: right; }
[dir="rtl"] .ops-offline-ico .fa-ban { left: auto; right: 50%; transform: translate(50%, -50%); }

/* ---- Business-type checklist bullets ---- */
[dir="rtl"] .biz-type-list li { text-align: right; }
[dir="rtl"] .biz-type-list .fa-check {
    margin-right: 0;
    margin-left: 0.45rem;
}

/* ---- Pricing ---- */
[dir="rtl"] .pricing-feat-list { text-align: right; }
[dir="rtl"] .pricing-feat span { text-align: right; }
[dir="rtl"] .pricing-popular-badge {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* ---- Testimonials ---- */
[dir="rtl"] .test-footer { text-align: right; }
[dir="rtl"] .test-avatar {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* ---- FAQ accordion chevron (base floats right w/ margin-left:auto) ---- */
[dir="rtl"] .arrow_down::after,
[dir="rtl"] .collapsed.arrow_down::after {
    float: left;
    margin-left: 0;
    margin-right: auto;
}

/* ---- Footer (base uses a margin-left:-50px centering hack) ---- */
[dir="rtl"] .footer-title {
    margin-left: 0;
    margin-right: -50px;
}
[dir="rtl"] h5.footer-title.blue {
    margin-left: 0;
    margin-right: 0;
}

/* ---- Misc utilities the theme sets with bare left/right ---- */
[dir="rtl"] .previous_price {
    margin-right: 0;
    margin-left: 5px;
}
[dir="rtl"] .landing-page .whatsapp-float {
    left: auto;
    right: 22px;
}
[dir="rtl"] .landing-page .whatsapp-badge {
    right: auto;
    left: -2px;
}
[dir="rtl"] .pwaContent { text-align: right; }
[dir="rtl"] .pwaContent img {
    margin-right: 0;
    margin-left: 10px;
}
[dir="rtl"] a.pwaClose {
    right: auto;
    left: 6px;
}
[dir="rtl"] .add-to-area {
    padding: 10px 10px 10px 53px;
}

/* ---- Cookie banner mirrors via logical props already; nudge the arrow-free layout ---- */
[dir="rtl"] .cookie-container p a { text-underline-offset: 2px; }

/* ==========================================================================
   6. SMALL-SCREEN REFINEMENTS
   ========================================================================== */
@media (max-width: 575.98px) {
    .landing-page .hero-wrap::before { width: 300px; height: 300px; }
    .landing-page .hero-wrap::after { width: 220px; height: 220px; }
    .cookie-container {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        inset-inline: 12px;
        bottom: 12px;
    }
    .cookie-container .cookie-btn { width: 100%; }
    .landing-page .hero-feature-item { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
}