@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');:root{--e:#241A17;--i:#FAF7F2;--n:#E8D8CC;--g:#C6A15B;--t:#292524;--m:#746A65}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--i);color:var(--t);font-family:'DM Sans',sans-serif}a{text-decoration:none;color:inherit}header{height:82px;padding:0 5vw;display:flex;align-items:center;gap:35px;position:sticky;top:0;background:#faf7f2f2;backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid #e7ddd6}.brand{display:flex;flex-direction:column;color:var(--e);line-height:.9}.brand b{font:600 21px 'Playfair Display',serif;letter-spacing:.04em}.brand span{font-size:9px;letter-spacing:.48em;margin-top:8px}nav{display:flex;gap:27px;margin:auto;font-size:13px}.btn{display:inline-flex;background:var(--e);color:white;border:1px solid var(--e);padding:14px 21px;font-weight:600;cursor:pointer}.small{padding:10px 16px}.outline{background:transparent;color:var(--e)}.hero{padding:70px 5vw 55px;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;min-height:650px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#98763c;font-weight:700}h1,h2{font:600 clamp(44px,5vw,72px)/1 'Playfair Display',serif;color:var(--e);margin:17px 0 23px}h1 i{color:#8d6e5c}.lead{color:var(--m);font-size:17px;line-height:1.7;max-width:650px}.actions{display:flex;gap:12px;margin:30px 0}.trust{font-size:11px;color:var(--m);line-height:2}.visual{height:500px;position:relative;background:var(--n);overflow:hidden}.v1,.v2{position:absolute;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:30px;color:white;font:600 20px 'Playfair Display',serif;letter-spacing:.2em}.v1{left:0;width:58%;background:linear-gradient(145deg,#c2a894,#73584c);clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}.v2{right:0;width:48%;background:linear-gradient(145deg,#89756a,#302824);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}.float{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:72%;padding:16px;background:#faf7f2ed;display:flex;flex-direction:column}.float small{color:var(--m);margin-top:5px}.search{margin:-15px 5vw 30px;background:white;padding:20px;box-shadow:0 15px 45px #33251e12;display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:12px;position:relative}.search label{font-size:10px;font-weight:700}.search input,.search select{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #ddd1c9;background:white}.section,.dark{padding:90px 5vw}.section h2,.dark h2{font-size:47px;max-width:750px}.cards,.pros{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}.cards article{background:white;padding:27px;min-height:180px;border:1px solid #eee5df}.cards strong{color:#98763c;font-size:24px}.cards h3{font:600 22px 'Playfair Display',serif}.cards p,.pros p,.pros small{color:var(--m);font-size:13px;line-height:1.6}.dark{background:var(--e);color:white}.dark h2{color:white}.pros article{background:#332622;padding-bottom:20px}.photo{height:235px;display:grid;place-items:center;font:600 38px 'Playfair Display',serif;color:white}.a{background:linear-gradient(135deg,#d1b6a4,#795d50)}.b{background:linear-gradient(135deg,#9a877c,#352d29)}.c{background:linear-gradient(135deg,#d8c4b8,#8b6c5d)}.pros h3,.pros p,.pros small{margin-left:18px;margin-right:18px}.pros h3 span{float:right;color:var(--g);font-size:13px}.booking{display:grid;grid-template-columns:1fr 420px;gap:70px;align-items:center}.steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.steps span{border-top:1px solid #ddd1c9;padding:14px 0;font-size:13px}.booking aside{background:white;padding:28px;box-shadow:0 20px 50px #33251e12}.booking aside h3{font:600 27px 'Playfair Display',serif}.booking aside p{display:flex;justify-content:space-between;border-bottom:1px solid #eee5df;padding:11px 0}.deposit{background:var(--n);padding:18px;display:flex;justify-content:space-between}.deposit b{font-size:24px}.full{width:100%;justify-content:center;margin-top:15px}.booking aside small{display:block;text-align:center;color:var(--m);margin-top:10px}.shop{background:#f0e7e0}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}.products article{background:white;padding-bottom:20px}.product{height:230px;display:grid;place-items:center;color:white;font:600 35px 'Playfair Display',serif}.p1{background:linear-gradient(145deg,#49372f,#b79682)}.p2{background:linear-gradient(145deg,#896a58,#342621)}.p3{background:linear-gradient(145deg,#c1a58f,#6f5b50)}.p4{background:linear-gradient(145deg,#9d7d6d,#d3b8a6)}.products h3,.products p,.products small,.products button{margin-left:17px;margin-right:17px}.products small{display:block;margin-top:16px;color:#98763c;letter-spacing:.16em}.products h3{font:600 18px 'Playfair Display',serif}.products button{background:none;border:0;border-bottom:1px solid var(--e);padding:4px 0}.note{font-size:11px;color:var(--m)}.choice{display:grid;grid-template-columns:1.3fr 1fr 1fr;background:var(--e);color:white}.choice>div,.choice article{padding:75px 5vw}.choice h2{color:white;font-size:48px}.choice>div p:last-child,.choice article p{color:#cdbfb7;line-height:1.65}.choice article{background:#332622;border-left:1px solid #5a463d}.choice article b{color:var(--g)}.choice article h3{font:600 27px 'Playfair Display',serif;margin-top:55px}.join{text-align:center}.join h2{margin-left:auto;margin-right:auto}.join>p:not(.eyebrow){color:var(--m);max-width:650px;margin:0 auto 28px;line-height:1.7}footer{padding:50px 5vw;background:#17110f;color:#cfc1b9;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px}footer .brand{color:white}@media(max-width:850px){nav{display:none}.hero,.booking{grid-template-columns:1fr}.search{grid-template-columns:1fr 1fr}.cards,.pros{grid-template-columns:1fr 1fr}.products{grid-template-columns:1fr 1fr}.choice{grid-template-columns:1fr}.visual{height:380px}}@media(max-width:550px){header{padding:0 20px}.hero,.section,.dark{padding:60px 20px}.hero h1{font-size:49px}.search{margin:0 20px 20px;grid-template-columns:1fr}.cards,.pros,.products{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.booking{gap:30px}.choice>div,.choice article{padding:55px 25px}footer{flex-direction:column;align-items:flex-start}}
/* Official Vanguard Styles logo integration */
.logo-brand{
  width:150px;
  min-width:150px;
  height:70px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.logo-brand img{
  display:block;
  width:100%;
  height:64px;
  object-fit:contain;
  object-position:left center;
}
.footer-logo{
  width:170px;
  height:90px;
  display:flex;
  align-items:center;
}
.footer-logo img{
  width:100%;
  max-height:86px;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:550px){
  .logo-brand{width:128px;min-width:128px;height:64px}
  .logo-brand img{height:58px}
  .footer-logo{width:150px}
}

.top-actions{display:flex;align-items:center;gap:10px}.plain-btn,.cart-btn{border:0;background:transparent;color:var(--e);cursor:pointer;font-weight:600}.cart-btn span{display:inline-grid;place-items:center;background:var(--g);color:#fff;width:21px;height:21px;border-radius:50%;font-size:10px;margin-left:3px}
.modal{position:fixed;inset:0;background:#241a17b8;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-box{width:min(680px,100%);max-height:90vh;overflow:auto;background:var(--i);padding:34px;position:relative}.modal-box h2{font-size:38px}.close{position:absolute;right:18px;top:15px;border:0;background:none;font-size:30px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{font-size:11px;font-weight:700}.form-grid input,.form-grid select{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid #d8ccc4;background:white}.booking-calc{margin:22px 0;border-top:1px solid #ddd1c9}.booking-calc p,.cart-total{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #e8ded8}.booking-calc .deposit{background:var(--n)}#cartItems .cart-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #e3d9d2}.remove-item{border:0;background:none;cursor:pointer;font-size:18px}.cart-total{font-size:20px;margin:12px 0}.account-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.account-card{background:white;border:1px solid #ded3cc;padding:25px;text-align:left;cursor:pointer}.account-card b,.account-card span{display:block}.account-card b{font:600 22px 'Playfair Display',serif;margin-bottom:8px}.account-card span{color:var(--m);line-height:1.5}
@media(max-width:700px){.top-actions .plain-btn{display:none}.form-grid,.account-options{grid-template-columns:1fr}.modal-box{padding:28px 20px}}
/* Live booking + inclusive hero */
.hero-photo{background-image:linear-gradient(0deg,rgba(36,26,23,.08),rgba(36,26,23,.02)),url('vanguard-hero-beauty-grooming.png');background-size:cover;background-position:center}.hero-photo .float{box-shadow:0 15px 40px #241a1720}.booking-modal-box{width:min(780px,100%)}.booking-intro{color:var(--m);line-height:1.6;margin-top:-10px}.availability-panel{margin:20px 0;padding:18px;background:white;border:1px solid #e5dad3}.availability-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.availability-head span{font-size:12px;color:var(--m)}.time-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.time-slot{border:1px solid #d8ccc4;background:var(--i);padding:9px 13px;cursor:pointer;font-weight:600;color:var(--e)}.time-slot:hover,.time-slot.selected{background:var(--e);border-color:var(--e);color:#fff}.customer-fields{margin-top:18px}.house-call-area{display:none}.booking-message{margin:12px 0;font-size:13px}.booking-message.error{background:#fff0ed;color:#8a2f22;padding:11px;border-left:3px solid #8a2f22}.booking-note{display:block;text-align:center;color:var(--m);margin-top:10px;line-height:1.5}.success-box{text-align:center;max-width:520px}.success-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--e);color:white;font-size:28px;margin:0 auto 18px}.confirmation-card{display:grid;grid-template-columns:1fr auto;gap:10px;text-align:left;background:white;padding:20px;margin:22px 0}.confirmation-card span{color:var(--m)}.hold-warning{background:var(--n);padding:16px;line-height:1.6}.btn:disabled{opacity:.55;cursor:not-allowed}@media(max-width:700px){.availability-head{align-items:flex-start;flex-direction:column}.hero-photo{background-position:58% center}}
/* Balance payment + My Booking */
.balance-choice{margin:18px 0;text-align:left;background:#fff;padding:18px;border:1px solid #e5dad3}.balance-choice>b{display:block;margin-bottom:10px}.balance-choice label{display:block;padding:8px 0;cursor:pointer}.balance-choice input{margin-right:8px}.balance-choice small{display:block;color:var(--m);margin-top:8px}.lookup-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.lookup-form label{font-size:11px;font-weight:700}.lookup-form input{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid #d8ccc4;background:#fff}.lookup-form .btn{margin-top:0}.my-booking-details{margin-top:20px}.booking-detail-card{background:#fff;border:1px solid #e5dad3;padding:20px}.booking-detail-card h3{font:600 24px 'Playfair Display',serif;margin:0 0 6px}.booking-detail-card>p{color:var(--m);margin:4px 0 18px}.payment-grid{display:grid;grid-template-columns:1fr auto;gap:9px;padding:15px 0;border-top:1px solid #eee5df}.payment-grid span{color:var(--m)}.status-pill{display:inline-block;padding:6px 9px;background:var(--n);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.balance-methods{margin-top:18px;padding-top:15px;border-top:1px solid #eee5df}.balance-methods label{display:block;padding:7px 0}.gateway-note{background:var(--n);padding:12px;line-height:1.5;font-size:12px;margin-top:12px}@media(max-width:700px){.lookup-form{grid-template-columns:1fr}}
/* EFT deposit + admin verification */
.eft-panel{margin-top:14px;text-align:left}.bank-details{background:#fff;border:1px solid #e5dad3;padding:16px;margin:12px 0;display:grid;grid-template-columns:1fr auto;gap:8px}.bank-details span{color:var(--m)}.proof-label{display:block;font-weight:700;font-size:12px;margin-top:12px}.proof-label input{display:block;width:100%;margin-top:8px;padding:10px;background:#fff;border:1px solid #d8ccc4}.admin-page{min-height:100vh;background:var(--i);padding:40px 20px}.admin-shell{max-width:900px;margin:auto}.admin-logo{width:160px}.admin-shell h1{font:600 42px 'Playfair Display',serif}.admin-shell input,.admin-shell textarea{width:100%;padding:12px;border:1px solid #d8ccc4;background:#fff;margin:8px 0}.admin-head{display:flex;justify-content:space-between;align-items:center}.admin-card{background:#fff;border:1px solid #e5dad3;padding:20px;margin:14px 0}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}.admin-card .btn{margin-top:8px}

/* Professional Portal - Availability */

#professionalAvailability .availability-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

#professionalAvailability .availability-day {
    margin: 0;
    padding: 18px;
    border: 1px solid #e5dad3;
    border-radius: 10px;
    background: #fff;
}

#professionalAvailability .availability-day h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

#professionalAvailability .availability-day > label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
}

#professionalAvailability .availability-enabled {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #241A17;
}

#professionalAvailability .availability-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

#professionalAvailability .availability-hours label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

#professionalAvailability .availability-hours input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #d8ccc4;
    border-radius: 6px;
    background: #fff;
}

#professionalAvailability .availability-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
}

#professionalAvailability .availability-actions .btn {
    width: auto;
    min-width: 190px;
}

@media (max-width: 800px) {
    #professionalAvailability .availability-editor {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    #professionalAvailability .availability-hours {
        grid-template-columns: 1fr;
    }
}
/* Vanguard Styles Professional Availability - final layout */

#professionalAvailability .availability-manager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#professionalAvailability .availability-manager > .booking-message {
    grid-column: 1 / -1;
}

#professionalAvailability .availability-day {
    margin: 0;
}

@media (max-width: 800px) {
    #professionalAvailability .availability-manager {
        grid-template-columns: 1fr;
    }
}
/* Professional availability two-column layout */
.availability-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.availability-grid > .booking-message {
    grid-column: 1 / -1 !important;
}

.availability-grid > .availability-day {
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 800px) {
    .availability-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   VANGUARD STYLES — PROFESSIONAL DASHBOARD SUMMARY
   ========================================================= */

.professional-summary-section {
    margin: 36px 0 56px;
}

.professional-summary-heading {
    margin-bottom: 28px;
}

.professional-summary-heading h2 {
    margin: 6px 0 10px;
}

.professional-summary-heading p:last-child {
    margin-bottom: 0;
    color: #746A65;
}

.professional-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.professional-summary-card {
    background: #FFFFFF;
    border: 1px solid #E8D8CC;
    border-radius: 18px;
    padding: 24px;
    min-height: 145px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0 8px 28px rgba(36, 26, 23, 0.05);
}

.professional-summary-card span {
    display: block;
    margin-bottom: 18px;

    color: #746A65;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.professional-summary-card strong {
    display: block;

    color: #241A17;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 500;
    line-height: 1;
}

.professional-summary-card small {
    display: block;
    margin-top: 12px;

    color: #746A65;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Professional earnings — primary financial figure */
.professional-summary-card:has(#summaryProfessionalEarnings) {
    background: #241A17;
    border-color: #241A17;
}

.professional-summary-card:has(#summaryProfessionalEarnings) span,
.professional-summary-card:has(#summaryProfessionalEarnings) small {
    color: #E8D8CC;
}

.professional-summary-card:has(#summaryProfessionalEarnings) strong {
    color: #FFFFFF;
}

/* Vanguard commission */
.professional-summary-card:has(#summaryCommission) {
    border-color: #C6A15B;
}

/* Outstanding balance */
.professional-summary-card:has(#summaryOutstanding) strong {
    color: #241A17;
}

/* Summary loading/error message */
#professionalSummaryMessage {
    margin-top: 18px;
}

/* Tablet */
@media (max-width: 900px) {
    .professional-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .professional-summary-section {
        margin: 28px 0 40px;
    }

    .professional-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .professional-summary-card {
        min-height: 120px;
        padding: 20px;
        border-radius: 14px;
    }

    .professional-summary-card strong {
        font-size: 2rem;
    }
}

/* ==================================================
   VANGUARD STYLES — ADMIN BUSINESS DASHBOARD
   ================================================== */

.admin-dashboard-section {
    padding: 20px 0 45px;
}

.admin-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #746a65;
}

.admin-dashboard-section .admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.admin-dashboard-section .admin-head h2 {
    margin: 0 0 8px;
}

#dashboardMessage {
    margin: 0 0 18px;
    color: #746a65;
}


/* DASHBOARD CARDS */

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 42px;
}

.dashboard-card {
    position: relative;
    min-height: 125px;
    padding: 22px;
    border: 1px solid #e8d8cc;
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    width: 34px;
    height: 3px;
    background: #c6a15b;
}

.dashboard-card span {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
    color: #746a65;
}

.dashboard-card strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 600;
    color: #241a17;
}

.dashboard-card small {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #746a65;
}


/* PROFESSIONAL PERFORMANCE */

.admin-provider-summary {
    margin-top: 18px;
}

.admin-provider-summary .admin-head {
    margin-bottom: 18px;
}

.admin-provider-summary h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    color: #241a17;
}

.provider-performance-card {
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid #e8d8cc;
    border-radius: 12px;
    background: #ffffff;
}

.provider-performance-title {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8d8cc;
}

.provider-performance-title strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    color: #241a17;
}

.provider-performance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.provider-performance-grid > div {
    min-width: 0;
}

.provider-performance-grid span {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    color: #746a65;
}

.provider-performance-grid strong {
    display: block;
    font-size: 17px;
    color: #292524;
}


/* DASHBOARD BUTTON */

#refreshDashboardBtn {
    flex-shrink: 0;
}


/* TABLET */

@media (max-width: 1000px) {

    .admin-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provider-performance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* MOBILE */

@media (max-width: 650px) {

    .admin-dashboard-section .admin-head {
        display: block;
    }

    #refreshDashboardBtn {
        margin-top: 18px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .provider-performance-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-card {
        min-height: 110px;
    }
}

@media (max-width: 430px) {

    .provider-performance-grid {
        grid-template-columns: 1fr;
    }
}