/* Bliss customer pages: login, booking, account, order details, policies.
   Loaded after style.css and reuses its header, buttons and colors. */

.app-page{background:#F2F6FA;min-height:100vh;display:flex;flex-direction:column}
.app-main{flex:1;padding:40px 0 96px}
.app-wrap{max-width:760px}
.app-wrap--narrow{max-width:460px}
.page-head{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.page-title{margin:0;font-size:32px;font-weight:800;letter-spacing:-.6px;color:#0B1F3A}
.page-sub{margin:0;font-size:16px;color:#475569}

/* Header link that switches between Login and My Account */
.btn-nav-account{height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.35);color:#FFFFFF;font-size:14px}

/* Cards */
.panel{background:#FFFFFF;border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(11,31,58,.06)}
.panel + .panel{margin-top:20px}
.panel-title{margin:0 0 16px;font-size:18px;font-weight:800;color:#0B1F3A}
.muted{color:#475569;font-size:14px;line-height:1.6;margin:0}
.hidden{display:none !important}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:#0B1F3A}
.field .hint{font-size:12px;color:#475569}
.input{box-sizing:border-box;width:100%;height:50px;padding:0 18px;border:1.5px solid #D5DEE8;border-radius:999px;background:#FFFFFF;color:#0B1F3A;font:inherit;font-size:15px}
.input:focus{outline:none;border-color:#00B4F0;box-shadow:0 0 0 3px rgba(0,180,240,.2)}
textarea.input{height:auto;min-height:90px;padding:14px 18px;border-radius:18px;resize:vertical}
.input-group{display:flex;align-items:center;border:1.5px solid #D5DEE8;border-radius:999px;background:#FFFFFF}
.input-group:focus-within{border-color:#00B4F0;box-shadow:0 0 0 3px rgba(0,180,240,.2)}
.input-group .prefix{padding:0 4px 0 18px;font-weight:700;color:#0B1F3A}
.input-group .input{border:0;box-shadow:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:#0B1F3A}
.check input{width:18px;height:18px;accent-color:#00B4F0}

/* Buttons used on light backgrounds */
button.btn{border:0;cursor:pointer;font-family:inherit}
button.btn.btn-ghost{border:1.5px solid #C3CFDC}
.btn-block{width:100%;justify-content:center}
.btn-dark{background:#0B1F3A;color:#FFFFFF}
.btn-ghost{background:transparent;color:#0B1F3A;border:1.5px solid #C3CFDC}
.btn-danger{background:#FEE2E2;color:#991B1B}
.btn-sm{height:38px;padding:0 16px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.form-actions{margin-top:20px}
.form-intro{margin-bottom:18px}
.nav-only-sm{display:none}
@media (max-width:600px){.navlinks a.nav-only-sm{display:block}}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;color:#0369A1;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.form-note{margin:18px 0 0;font-size:12px;color:#475569;text-align:center;line-height:1.6}
.form-note a{color:#0369A1}

/* Steps (booking) */
.book-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 24px;padding:0;list-style:none}
.book-steps li{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;color:#94A3B8}
.book-steps li::after{content:"";height:4px;border-radius:4px;background:#D5DEE8}
.book-steps li.is-active,.book-steps li.is-done{color:#0B1F3A}
.book-steps li.is-active::after,.book-steps li.is-done::after{background:#00B4F0}

/* Selectable tiles (services, addresses) */
.choice-list{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid #D5DEE8;border-radius:18px;background:#FFFFFF;cursor:pointer;text-align:left;font:inherit;color:#0B1F3A;width:100%;box-sizing:border-box}
.choice:hover{border-color:#7DD3FC}
.choice[aria-pressed="true"],.choice[aria-checked="true"]{border-color:#00B4F0;background:#F0FAFF}
.choice-title{font-weight:700;font-size:15px}
.choice-sub{font-size:13px;color:#475569;margin-top:2px;line-height:1.5}
.choice-body{flex:1}
.choice-tick{width:22px;height:22px;border-radius:50%;border:2px solid #D5DEE8;flex:none;box-sizing:border-box}
.choice[aria-pressed="true"] .choice-tick,.choice[aria-checked="true"] .choice-tick{border:6px solid #00B4F0}

/* Date + slot chips */
.pick-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:24px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pick{flex:none;padding:12px 16px;border:1.5px solid #D5DEE8;border-radius:16px;background:#FFFFFF;font:inherit;font-size:14px;font-weight:700;color:#0B1F3A;cursor:pointer;text-align:center}
.pick small{display:block;font-size:12px;font-weight:600;color:#475569}
.pick[aria-pressed="true"]{background:#0B1F3A;border-color:#0B1F3A;color:#FFFFFF}
.pick[aria-pressed="true"] small{color:#CBD5E1}
.pick[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.date-pick{min-width:64px}

.summary{display:grid;grid-template-columns:140px 1fr;gap:12px 16px;margin:0}
.summary dt{font-size:13px;font-weight:700;color:#475569}
.summary dd{margin:0;font-size:15px;color:#0B1F3A;line-height:1.5}

.sticky-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.sticky-actions .btn-primary{margin-left:auto}
.empty .btn-row{justify-content:center}
.confirm-dialog{max-width:420px;border:0}
.confirm-dialog::backdrop{background:rgba(7,26,51,.55)}

/* Notices */
.notice{padding:14px 18px;border-radius:16px;font-size:14px;line-height:1.5;margin:0 0 16px}
.notice--ok{background:#DCFCE7;color:#14532D}
.notice--warn{background:#FEF3C7;color:#78350F}
.notice--error{background:#FEE2E2;color:#7F1D1D}
.notice--info{background:#E0F2FE;color:#0C4A6E}

/* Coupons */
.coupon-row{display:flex;gap:10px}
.coupon-row .input{flex:1}
.coupon-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.coupon{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border:1.5px dashed #7DD3FC;border-radius:16px}
.coupon-code{font-weight:800;letter-spacing:1px;color:#0369A1}

/* Account tabs */
.tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto}
.tab{height:42px;padding:0 18px;border:1.5px solid #D5DEE8;border-radius:999px;background:#FFFFFF;font:inherit;font-size:14px;font-weight:700;color:#0B1F3A;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:#0B1F3A;border-color:#0B1F3A;color:#FFFFFF}

.profile-head{display:flex;align-items:center;gap:16px}
.avatar{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#E0F6FE;color:#0369A1;font-size:22px;font-weight:800;flex:none}

/* Account hub: menu + content (desktop side by side, phone one at a time) */
.account-wrap{max-width:1040px}
.account-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;margin-top:24px}
.account-menu{display:flex;flex-direction:column;padding:10px;position:sticky;top:100px}
.account-menu a,.menu-logout{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;color:#0B1F3A;font-size:15px;font-weight:600;text-decoration:none}
.account-menu a::after{content:"›";font-size:20px;color:#94A3B8}
.account-menu a:hover{background:#F2F6FA}
.account-menu a[aria-current="page"]{background:#E0F6FE;color:#0369A1}
.menu-logout{width:100%;margin-top:6px;border:0;border-top:1px solid #E2E8F0;border-radius:0 0 14px 14px;background:none;font:inherit;font-size:15px;font-weight:700;color:#B91C1C;cursor:pointer;text-align:left}
.menu-logout:hover{background:#FEF2F2}
.account-back{display:none;margin-bottom:16px}
.account-section .panel + .panel,.account-section .panel{margin-top:0;margin-bottom:16px}
.sub-title{margin:0 0 10px;font-size:16px;font-weight:800;color:#0B1F3A}
.link-list{display:flex;flex-direction:column}
.link-list a{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #E2E8F0;color:#0B1F3A;font-weight:600;text-decoration:none}
.link-list a:last-child{border-bottom:0}
.link-list a::after{content:"›";color:#94A3B8;font-size:20px}
.faq{border-bottom:1px solid #E2E8F0;padding:14px 0}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;color:#0B1F3A}
.faq p{margin:10px 0 0;font-size:14px;line-height:1.6;color:#475569}
.faq a{color:#0369A1}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-box{padding:18px;border-radius:18px;background:#F2F6FA}
.stat-box strong{display:block;font-size:22px;font-weight:800;color:#0B1F3A}
.stat-box span{font-size:13px;color:#475569}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border:1.5px dashed #00B4F0;border-radius:18px;background:#F0FAFF}
.ref-code strong{font-size:22px;letter-spacing:2px;color:#0369A1}
.how-steps{margin:0;padding-left:20px;color:#475569;font-size:14px;line-height:1.9}
.how-steps strong{color:#0B1F3A}
.price-service{margin-bottom:12px}
.price-service summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;font-weight:700;font-size:15px;color:#0B1F3A;list-style:none}
.price-service summary::-webkit-details-marker{display:none}
.price-service summary span{color:#0369A1;white-space:nowrap}
.price-cat{margin:16px 0 4px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#475569}

@media (max-width:860px){
  .account-layout{grid-template-columns:1fr;margin-top:16px}
  .account-menu{position:static}
  .account-back{display:inline-block}
  .account-layout[data-view="menu"] .account-content{display:none}
  .account-layout[data-view="section"] .account-menu{display:none}
}

/* Orders */
.order-list{display:flex;flex-direction:column;gap:14px}
.order-card{padding:20px 22px;border-radius:20px;background:#FFFFFF;box-shadow:0 8px 24px rgba(11,31,58,.05)}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.order-code{font-weight:800;font-size:15px}
.order-meta{margin:10px 0 0;font-size:14px;color:#475569;line-height:1.7}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.badge--active{background:#DCFCE7;color:#14532D}
.badge--completed{background:#E0E7FF;color:#1E3A8A}
.badge--canceled{background:#FEE2E2;color:#7F1D1D}
.empty{padding:40px 20px;text-align:center}
.empty h3{margin:0 0 6px;font-size:18px}

/* Line items (invoice / challan) */
.line-items{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid #E2E8F0}
.line-items li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #E2E8F0;font-size:14px}
.line-items small{display:block;color:#475569;margin-top:2px}
.totals{margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:8px;font-size:14px}
.totals .grand{font-size:17px;font-weight:800}
.photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.photos img{width:96px;height:96px;object-fit:cover;border-radius:14px}

/* Policies */
.policy h2{margin:28px 0 8px;font-size:20px;font-weight:800;color:#0B1F3A}
.policy p,.policy li{font-size:15px;line-height:1.75;color:#475569}
.policy ul{padding-left:20px}
.policy a{color:#0369A1}

/* Simple footer on inner pages */
.mini-footer{background:#071A33;color:#94A3B8;font-size:13px}
.mini-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;padding-bottom:22px}
.mini-footer a{color:#CBD5E1;text-decoration:none}
.mini-footer a:hover{color:#FFFFFF}
.mini-footer nav{display:flex;flex-wrap:wrap;gap:18px}

/* Footer legal links on the homepage */
.footer-legal{display:flex;gap:16px}
.footer-legal a{color:#94A3B8;text-decoration:none}
.footer-legal a:hover{color:#FFFFFF}

/* Toast */
.toast{position:fixed;left:50%;bottom:96px;z-index:60;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 20px;border-radius:16px;background:#0B1F3A;color:#FFFFFF;font-size:14px;font-weight:600;box-shadow:0 14px 34px rgba(2,11,26,.3);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.toast[data-tone="error"]{background:#991B1B}
.toast[data-tone="ok"]{background:#14532D}

.loading{padding:40px 0;text-align:center;color:#475569}

@media (max-width:600px){
  .app-main{padding:24px 0 96px}
  .panel{padding:22px 18px;border-radius:20px}
  .page-title{font-size:26px}
  .field-row{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr;gap:4px}
  .summary dd{margin-bottom:10px}
  .book-steps li{font-size:11px}
}