/* ═══════════════════════════════════════════════════
   index_style.css  –  Home/Index Page Specific Styles
   Loaded via @section Styles in Home/Index.cshtml
═══════════════════════════════════════════════════ */

/* ── Shared Section Headings ── */
.section-heading {
    font-size:     clamp(26px,4vw,42px);
    font-weight:   900;
    margin-bottom: 16px;
    line-height:   1.3;
}
.section-subtext {
    font-size:   15px;
    color:       var(--text-muted);
    line-height: 1.9;
    margin-bottom: 32px;
}
.section-center { text-align: center; }

/* ══ HERO ══ */
.hero-section-new {
    min-height: 100vh;
    display:    flex;
    align-items: center;
    position:   relative;
    overflow:   hidden;
    padding-top: 70px;
}
.hero-bg-glow {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.09) 0%, transparent 70%);
    pointer-events: none;
}
.hero-grid-overlay {
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
    background-size:  60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    mask-image:       radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events:   none;
}
.hero-inner {
    display:         grid;
    grid-template-columns: 1fr 420px;
    gap:             60px;
    align-items:     center;
    width:           100%;
    position:        relative;
    z-index:         2;
}
.hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    rgba(201,168,76,.12);
    border:        1px solid rgba(201,168,76,.3);
    border-radius: 30px;
    padding:       7px 20px;
    font-size:     13px;
    font-weight:   700;
    color:         var(--gold);
    margin-bottom: 28px;
    animation:     fadeInDown .8s ease both;
}
.hero-title {
    font-size:     clamp(32px,5vw,58px);
    font-weight:   900;
    line-height:   1.25;
    margin-bottom: 20px;
    animation:     fadeInDown .9s ease .1s both;
    color:         var(--text);
}
.hero-title em { color: var(--gold); font-style: normal; display: block; }
.hero-subtitle {
    font-size:     17px;
    color:         var(--text-muted);
    line-height:   1.8;
    margin-bottom: 36px;
    animation:     fadeInDown 1s ease .2s both;
}
.hero-btn-row {
    display:     flex;
    gap:         14px;
    flex-wrap:   wrap;
    margin-bottom: 36px;
    animation:   fadeInDown 1s ease .3s both;
}
.hero-stats-row {
    display:   flex;
    gap:       32px;
    animation: fadeInDown 1s ease .4s both;
}
.hero-stat-num  { font-size: 26px; font-weight: 900; color: var(--gold); display: block; line-height: 1.1; }
.hero-stat-lbl  { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* Hero Card */
.hero-card {
    background:    linear-gradient(145deg, var(--dark3), var(--dark2));
    border:        1px solid rgba(201,168,76,.2);
    border-radius: 24px;
    padding:       32px;
    position:      relative;
    animation:     fadeInRight 1s ease .2s both;
    box-shadow:    0 40px 80px rgba(0,0,0,.5);
}
.hero-card-head {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  24px;
    padding-bottom: 20px;
    border-bottom:  1px solid rgba(201,168,76,.12);
}
.hc-logo {
    width:           44px;
    height:          44px;
    background:      var(--gold);
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
}
.hc-name   { font-size: 15px; font-weight: 700; color: var(--text); }
.hc-sub    { font-size: 12px; color: var(--text-muted); }
.hero-qr-box {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    border: 3px solid var(--gold);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 3px;
}
.hero-qr-box::after {
    content:         '✂';
    position:        absolute;
    top:             -14px;
    left:            -14px;
    width:           28px;
    height:          28px;
    background:      var(--dark2);
    border:          2px solid var(--gold);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    color:           var(--gold);
    line-height:     28px;
    text-align:      center;
}
.hero-qr-img { width: 100%; height: 100%; object-fit: contain; }
.hero-qr-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; text-align: center; }
.hero-qr-url  { font-size: 15px; font-weight: 700; color: var(--gold); text-align: center; }
.hero-card-feats {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-top:            20px;
}
.feat-pill {
    background:    rgba(201,168,76,.08);
    border:        1px solid rgba(201,168,76,.18);
    border-radius: 10px;
    padding:       10px 12px;
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--text-muted);
}

/* ══ STATS ══ */
.stats-section-new {
    padding:       60px 0;
    border-top:    1px solid rgba(201,168,76,.1);
    border-bottom: 1px solid rgba(201,168,76,.1);
}
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(4,1fr);
    gap:                   2px;
}
.stat-card {
    text-align: center;
    padding:    32px 20px;
    position:   relative;
}
.stat-card:not(:last-child)::after {
    content:    '';
    position:   absolute;
    left:       0;
    top:        20%;
    height:     60%;
    width:      1px;
    background: rgba(201,168,76,.15);
}
.stat-num {
    font-size:     44px;
    font-weight:   900;
    color:         var(--gold);
    line-height:   1;
    display:       block;
    margin-bottom: 6px;
}
.stat-lbl { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* Stats section header */
.stats-section-header { text-align: center; margin-bottom: 40px; }
.stats-section-header h2 { font-size: clamp(20px,3vw,28px); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.stats-section-header h3 { font-size: clamp(16px,2.5vw,22px); font-weight: 400; color: var(--text-muted); }

/* ══ ABOUT ══ */
.about-section-new { padding: 100px 0; }
.about-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   70px;
    align-items:           center;
}
.about-feature {
    display:     flex;
    gap:         14px;
    margin-bottom: 22px;
    align-items: flex-start;
}
.about-icon {
    width:           40px;
    height:          40px;
    background:      var(--gold-dim);
    border:          1px solid rgba(201,168,76,.25);
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
    margin-top:      2px;
}
.about-feat-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.about-feat-body  { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.about-cta-link   { margin-top: 8px; display: inline-flex; }

/* Booking Mockup */
.about-mockup {
    background:    linear-gradient(145deg, var(--dark3), var(--dark2));
    border:        1px solid rgba(201,168,76,.2);
    border-radius: 20px;
    padding:       28px;
    position:      relative;
    overflow:      hidden;
}
.about-mockup::before {
    content:    '';
    position:   absolute;
    top:        -60px;
    left:       -60px;
    width:      200px;
    height:     200px;
    background: radial-gradient(circle, rgba(201,168,76,.15), transparent 70%);
    pointer-events: none;
}
.mockup-titlebar { display: flex; gap: 6px; margin-bottom: 18px; align-items: center; }
.mockup-dot      { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mockup-dot-red  { background: #ff5f57; }
.mockup-dot-yel  { background: #febc2e; }
.mockup-dot-grn  { background: #28c840; }
.mockup-win-lbl  { margin-right: auto; font-size: 12px; color: var(--text-dim); }

.booking-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 14px;
    background:    rgba(255,255,255,.04);
    border:        1px solid rgba(201,168,76,.12);
    border-radius: 10px;
    margin-bottom: 10px;
}
.booking-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     700;
    flex-shrink:     0;
}
.booking-av-gold   { background: rgba(201,168,76,.2);  color: var(--gold);    }
.booking-av-orange { background: rgba(255,120,70,.15); color: #FF9060;        }
.booking-av-green  { background: rgba(39,196,117,.15); color: var(--accent);  }
.booking-av-blue   { background: rgba(99,153,34,.15);  color: var(--accent2); }

.booking-name { font-size: 13px; font-weight: 700; color: var(--text); }
.booking-time { font-size: 11px; color: var(--text-muted); }
.booking-badge {
    margin-right:  auto;
    font-size:     11px;
    padding:       3px 10px;
    border-radius: 20px;
    font-weight:   700;
    flex-shrink:   0;
}
.badge-confirmed { background: rgba(39,196,117,.15); color: var(--accent);  }
.badge-pending   { background: rgba(201,168,76,.15); color: var(--gold);    }
.badge-done      { background: rgba(255,255,255,.08); color: var(--text-dim); }

.mockup-revenue {
    margin-top:    16px;
    padding:       14px;
    background:    rgba(201,168,76,.06);
    border:        1px solid rgba(201,168,76,.15);
    border-radius: 10px;
    text-align:    center;
    display:       flex;
    justify-content: center;
    gap:           8px;
    align-items:   baseline;
}
.mockup-revenue-lbl  { font-size: 13px; color: var(--text-muted); }
.mockup-revenue-val  { font-size: 18px; font-weight: 900; color: var(--gold); }

/* ══ FEATURES ══ */
.features-section-new {
    padding:    100px 0;
    background: linear-gradient(180deg, var(--dark) 0%, var(--dark2) 50%, var(--dark) 100%);
}
.features-section-intro { margin-bottom: 0; }
.features-section-intro p { max-width: 520px; margin: 0 auto; }
.features-grid {
    display:               grid;
    grid-template-columns: repeat(4,1fr);
    gap:                   16px;
    margin-top:            50px;
}
.feature-card {
    background:    var(--dark3);
    border:        1px solid rgba(201,168,76,.12);
    border-radius: 16px;
    padding:       24px 20px;
    transition:    all .3s;
    position:      relative;
    overflow:      hidden;
}
.feature-card::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      0;
    left:       0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:    0;
    transition: opacity .3s;
}
.feature-card:hover {
    border-color: rgba(201,168,76,.4);
    transform:    translateY(-4px);
    box-shadow:   0 20px 50px rgba(0,0,0,.4);
}
.feature-card:hover::after { opacity: 1; }
.feature-card-num {
    position:    absolute;
    top:         16px;
    left:        16px;
    font-size:   11px;
    font-weight: 900;
    color:       rgba(201,168,76,.3);
}
.feature-icon  { font-size: 28px; margin-bottom: 14px; display: block; }
.feature-title { font-size: 15px; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.feature-body  { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ══ PRICING CALLOUT ══ */
.pricing-callout {
    background:    linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.03));
    border:        1.5px solid rgba(201,168,76,.35);
    border-radius: 20px;
    padding:       48px 40px 40px;
    text-align:    center;
    margin-top:    60px;
    position:      relative;
}
.pricing-callout-badge {
    position:    absolute;
    top:         -16px;
    left:        50%;
    transform:   translateX(-50%);
    background:  var(--gold);
    color:       var(--dark);
    font-size:   13px;
    font-weight: 900;
    padding:     5px 24px;
    border-radius: 30px;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}
.pricing-big-num  { font-size: 56px; font-weight: 900; color: var(--gold); line-height: 1; }
.pricing-unit     { font-size: 16px; color: var(--text-muted); margin-bottom: 8px; }
.pricing-free     { font-size: 18px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.pricing-note     { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.pay-pills-row    { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pay-pill {
    background:    rgba(201,168,76,.1);
    border:        1px solid rgba(201,168,76,.3);
    border-radius: 20px;
    padding:       6px 18px;
    font-size:     13px;
    color:         var(--gold);
    font-weight:   600;
}

/* ══ TRAINING ══ */
.training-section-new { padding: 100px 0; }
.training-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
    align-items:           center;
}
.training-img {
    width:         100%;
    border-radius: 20px;
    box-shadow:    0 20px 60px rgba(0,0,0,.5);
    object-fit:    cover;
    max-height:    420px;
}
.training-card-item {
    background:    var(--dark3);
    border:        1px solid rgba(201,168,76,.15);
    border-radius: 16px;
    padding:       20px;
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
    margin-bottom: 14px;
    transition:    all .25s;
}
.training-card-item:hover {
    border-color: rgba(201,168,76,.35);
    background:   var(--dark4);
}
.train-icon {
    width:           44px;
    height:          44px;
    background:      var(--gold-dim);
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
}
.train-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.train-body  { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.badge-cert {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    rgba(39,196,117,.12);
    border:        1px solid rgba(39,196,117,.25);
    border-radius: 20px;
    padding:       5px 14px;
    font-size:     12px;
    color:         var(--accent);
    font-weight:   700;
    margin-top:    10px;
}

/* ══ JOBS ══ */
.jobs-section-new {
    padding:    100px 0;
    background: var(--dark2);
}
.jobs-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    margin-top:            50px;
}
.job-card {
    border-radius: 20px;
    padding:       32px;
    position:      relative;
    overflow:      hidden;
}
.job-card-barber {
    background: linear-gradient(145deg, rgba(201,168,76,.12), rgba(201,168,76,.03));
    border:     1.5px solid rgba(201,168,76,.35);
}
.job-card-salon {
    background: linear-gradient(145deg, rgba(65,105,225,.08), rgba(65,105,225,.02));
    border:     1.5px solid rgba(65,105,225,.3);
}
.job-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    border-radius: 20px;
    padding:       5px 14px;
    font-size:     12px;
    font-weight:   700;
    margin-bottom: 16px;
}
.job-badge-gold  { background: rgba(201,168,76,.15); color: var(--gold);   border: 1px solid rgba(201,168,76,.3); }
.job-badge-blue  { background: var(--accent-dim);    color: var(--accent); border: 1px solid var(--accent2); }
.job-title { font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 10px; }
.job-body  { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; }
.job-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    border:          1.5px solid rgba(201,168,76,.5);
    border-radius:   30px;
    padding:         10px 24px;
    font-size:       14px;
    font-weight:     700;
    color:           var(--gold);
    cursor:          pointer;
    background:      transparent;
    font-family:     'Cairo', sans-serif;
    transition:      all .25s;
    text-decoration: none;
}
.job-btn:hover { background: var(--gold); color: var(--dark); }
.job-btn-blue  { border-color: var(--accent-dim); color: var(--accent); }
.job-btn-blue:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══ SALONS ══ */
.salons-section-new { padding: 100px 0; }
.salons-search-row  { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; align-items: center; justify-content: center; }
.salons-search-row .form-control { max-width: 280px; }
.salons-grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   20px;
    margin-top:            16px;
}
.salon-card {
    background:    var(--dark3);
    border:        1px solid rgba(201,168,76,.12);
    border-radius: 16px;
    overflow:      hidden;
    transition:    all .3s;
    text-decoration: none;
    display:       block;
}
.salon-card:hover {
    border-color: rgba(201,168,76,.4);
    transform:    translateY(-5px);
    box-shadow:   0 20px 50px rgba(0,0,0,.5);
}
.salon-card-img {
    width:      100%;
    height:     180px;
    object-fit: cover;
    display:    block;
}
.salon-card-img-placeholder {
    height:          180px;
    background:      linear-gradient(135deg, var(--dark4), var(--dark2));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       48px;
    position:        relative;
}
.salon-card-img-placeholder::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 50%, var(--dark3));
}
.salon-card-body { padding: 16px; }
.salon-card-logo {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--gold);
    margin-bottom: 8px;
}
.salon-name   { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.salon-loc    { font-size: 12px; color: var(--text-muted); }
.salon-stars  { color: var(--gold); font-size: 13px; margin-top: 6px; }
.salon-open   {
    display:       inline-block;
    font-size:     11px;
    color:         var(--accent);
    background:    rgba(65,105,225,.12);
    padding:       2px 10px;
    border-radius: 20px;
    margin-top:    6px;
}
.salon-qr-img {
    width:         80px;
    height:        80px;
    object-fit:    contain;
    border:        1.5px solid var(--gold);
    border-radius: 8px;
    display:       block;
    margin:        8px 0;
}
.salon-visit-btn {
    display:       inline-flex;
    align-items:   center;
    font-size:     13px;
    font-weight:   700;
    color:         var(--gold);
    text-decoration: none;
    margin-top:    8px;
    gap:           4px;
    transition:    color .2s;
}
.salon-visit-btn:hover { color: var(--gold-light); }
.salons-load-more { text-align: center; margin-top: 30px; }

/* ══ FAQ ══ */
.faq-section-new { padding: 100px 0; background: var(--dark2); }
.faq-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
    margin-top:            50px;
}
.faq-item {
    background:    var(--dark3);
    border:        1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding:       22px 24px;
    transition:    all .25s;
}
.faq-item:hover { border-color: rgba(201,168,76,.25); background: var(--dark4); }
.faq-q {
    font-size:   15px;
    font-weight: 700;
    color:       var(--gold);
    margin-bottom: 8px;
    display:     flex;
    align-items: flex-start;
    gap:         6px;
}
.faq-q-icon { flex-shrink: 0; }
.faq-a { font-size: 13.5px; color: var(--text-muted); line-height: 1.75; }

/* ══ CTA ══ */
.cta-section-new {
    padding:    120px 0;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.cta-bg-glow {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,168,76,.1) 0%, transparent 70%);
    pointer-events: none;
}
.cta-inner  { position: relative; z-index: 2; }
.cta-title {
    font-size:     clamp(28px,5vw,52px);
    font-weight:   900;
    color:         var(--text);
    margin-bottom: 16px;
}
.cta-title em { color: var(--gold); font-style: normal; }
.cta-subtitle  { font-size: 17px; color: var(--text-muted); margin-bottom: 40px; }
.cta-btn-row   { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ══ ANIMATIONS ══ */
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(30px);  } to { opacity: 1; transform: translateY(0); } }

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
    .hero-inner               { grid-template-columns: 1fr; gap: 40px; }
    .hero-card                { max-width: 460px; margin: 0 auto; }
    .stats-grid               { grid-template-columns: repeat(2,1fr); }
    .stat-card:nth-child(2)::after { display: none; }
    .about-inner              { grid-template-columns: 1fr; }
    .features-grid            { grid-template-columns: repeat(2,1fr); }
    .training-inner           { grid-template-columns: 1fr; }
    .jobs-grid                { grid-template-columns: 1fr; }
    .faq-grid                 { grid-template-columns: 1fr; }
    .salons-grid              { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
    .stats-grid               { grid-template-columns: 1fr 1fr; }
    .features-grid            { grid-template-columns: 1fr; }
    .salons-grid              { grid-template-columns: 1fr; }
    .hero-stats-row           { gap: 20px; }
    .hero-btn-row             { flex-direction: column; }
    .cta-btn-row              { flex-direction: column; align-items: center; }
    .salons-search-row        { flex-direction: column; align-items: stretch; }
    .salons-search-row .form-control { max-width: 100%; }
}