/* HotelOS SMART — PeopleFit 18
   Luxury UI Stage 2 + Stage 3 / V7.3.5
   Additive visual layer only — no backend logic changes.
*/
:root{
  --lux-navy:#11162b;
  --lux-navy2:#1c2850;
  --lux-blue:#274677;
  --lux-gold:#d7ad35;
  --lux-gold2:#f2d16b;
  --lux-ivory:#fbf8ef;
  --lux-mist:#eef1f6;
  --lux-card:#ffffff;
  --lux-ink:#11162b;
  --lux-muted:#737b89;
  --lux-line:#dfe5ef;
  --lux-green:#1e8c68;
  --lux-shadow:0 18px 44px rgba(17,22,43,.09);
}

body{
  background:
    radial-gradient(circle at 0% 0%,rgba(215,173,53,.09),transparent 26%),
    radial-gradient(circle at 100% 4%,rgba(39,70,119,.08),transparent 24%),
    #eef1f6!important;
}

/* ===== Stage 2 continuity: Home + Assessment ===== */
#homePage .approved-kpi,#assessmentPage .card,#assessmentPage .section-title,.start-card,.lux-panel,.lux-assessment-hero{box-shadow:var(--lux-shadow)}
.approved-hero{background:linear-gradient(135deg,#0f1736,#233d72)!important;border:1px solid rgba(214,181,83,.18)!important;overflow:hidden;position:relative}
.approved-hero:after{content:"";position:absolute;right:-90px;bottom:-130px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(215,173,53,.22),transparent 68%)}
.lux-hero-visual,.lux-home-story,.lux-assessment-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.lux-hero-art,.lux-assessment-art{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:10px}
.lux-hero-art img,.lux-assessment-art img{width:100%;display:block;border-radius:18px}
.lux-mini-infograph,.lux-pill-grid{display:grid;gap:12px}
.lux-mini-card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:15px;color:#fff}
.lux-mini-card strong{display:block;color:#f4d784;margin-bottom:6px}.lux-mini-card span{font-size:13px;color:rgba(255,255,255,.86);line-height:1.7}
.approved-kpis{grid-template-columns:repeat(2,1fr)!important;gap:18px!important}.approved-kpi{background:linear-gradient(180deg,#fbfbfd,#f2f5f9)!important;border:1px solid #e1e6ef!important;border-radius:30px!important}
.lux-panel{background:linear-gradient(180deg,#fbfaf6,#f5f7fb);border:1px solid #dde3ef;border-radius:30px;padding:24px 22px}
.lux-eyebrow{display:inline-flex;background:#11162b;color:#f0d06b;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;margin-bottom:12px}
.lux-panel-copy h3,.lux-assessment-copy h3{margin:0 0 10px;font-size:28px;line-height:1.35;color:#11162b}.lux-panel-copy p,.lux-assessment-copy p{margin:0;color:#5e6779;line-height:1.9;font-size:15px}
.lux-pill{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e5e9f1;border-radius:18px;padding:14px 16px}.lux-pill b{background:#fff5d2;border-radius:999px;padding:7px 12px}
.start-here{background:linear-gradient(180deg,#f7f9fc,#f4f6fb)!important;border:1px solid #e2e6ef;border-radius:30px!important;padding:24px 20px!important}.start-card{background:linear-gradient(135deg,#11162b,#1d2b56)!important;border:1px solid rgba(215,173,53,.25)!important;color:#fff!important}.start-card b{color:#fff!important}.start-card small{color:rgba(255,255,255,.78)!important}
#assessmentPage .premium-section-title{background:linear-gradient(135deg,#f7f9fd,#f2f4f9)!important;border-color:#e2e8f1!important}.lux-assessment-hero{margin:0 0 22px;background:linear-gradient(135deg,#fbfaf6,#f5f8fc);border:1px solid #e1e7f0;border-radius:30px;padding:18px}
#assessmentPage .registration-card{background:linear-gradient(180deg,#fbfbfd,#f5f8fc)!important}#assessmentPage .activation-card{background:linear-gradient(180deg,#fff9ea,#f7f9fc)!important;border-color:#ecdca2!important}#assessmentPage .field input,#assessmentPage .field select,#assessmentPage .specialty-picker-btn{background:rgba(255,255,255,.92)!important}
.lux-steps-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.lux-steps-row span{background:#fff;border:1px solid #e4e9f1;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;color:#22345f}

/* ===== Stage 3: shared premium page banners ===== */
#sopPage,#academyPage,#verifyPage{position:relative}
#sopPage::before,#academyPage::before,#verifyPage::before{
  content:"";
  display:block;
  height:210px;
  border-radius:30px;
  margin:4px 0 24px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(215,173,53,.18);
  box-shadow:var(--lux-shadow);
}
#sopPage::before{background-image:linear-gradient(90deg,rgba(17,22,43,.03),rgba(17,22,43,.03)),url('ai-sop-v735.svg')}
#academyPage::before{background-image:linear-gradient(90deg,rgba(17,22,43,.03),rgba(17,22,43,.03)),url('ai-academy-v735.svg')}
#verifyPage::before{background-image:linear-gradient(90deg,rgba(17,22,43,.03),rgba(17,22,43,.03)),url('ai-verify-v735.svg')}

#sopPage .section-title,#academyPage .section-title,#verifyPage .section-title{
  background:linear-gradient(135deg,#11162b,#223b6d);
  color:#fff;
  border:1px solid rgba(215,173,53,.18);
  border-radius:26px;
  padding:18px 20px;
  box-shadow:var(--lux-shadow);
}
#sopPage .section-title h2,#academyPage .section-title h2,#verifyPage .section-title h2{color:#fff!important;margin:0!important}
#sopPage .section-title .muted,#academyPage .section-title .muted,#verifyPage .section-title .muted{color:rgba(255,255,255,.72)!important}

/* ===== SOP ===== */
#sopPage .card.sop{
  background:linear-gradient(180deg,#fff,#f7f9fc)!important;
  border:1px solid var(--lux-line)!important;
  border-right:5px solid var(--lux-gold)!important;
  border-radius:25px!important;
  box-shadow:0 12px 32px rgba(17,22,43,.065)!important;
  overflow:hidden;
}
#sopPage .card.sop:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(17,22,43,.1)!important}
#sopPage .badge{background:#11162b!important;color:#f2d16b!important;border:1px solid rgba(215,173,53,.28)!important}
#sopPage .steps{margin-top:14px;padding-top:10px;border-top:1px solid #e6eaf1}
#sopPage .step{background:#fafbfc;border:1px solid #edf0f5;border-radius:15px;padding:10px 12px!important;margin:7px 0}
#sopPage .stepnum{background:linear-gradient(135deg,var(--lux-gold),var(--lux-gold2))!important;color:#11162b!important}
#sopPage input[type="search"],#sopPage input{background:#fff!important;border:1px solid #dfe5ef!important;border-radius:18px!important;min-height:54px!important;box-shadow:0 8px 22px rgba(17,22,43,.04)}

/* ===== Academy ===== */
#academyPage .course,#academyPage .card.course{
  background:linear-gradient(145deg,#fff,#f5f7fb)!important;
  border:1px solid #e0e5ee!important;
  border-radius:25px!important;
  box-shadow:0 12px 32px rgba(17,22,43,.065)!important;
  padding:18px!important;
  position:relative;
  overflow:hidden;
}
#academyPage .course::after{content:"";position:absolute;left:-42px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(215,173,53,.13),transparent 66%)}
#academyPage .course .num{background:linear-gradient(135deg,#11162b,#283e72)!important;color:#f2d16b!important;border-radius:15px!important;box-shadow:0 8px 18px rgba(17,22,43,.16)}
#academyPage .course b{color:#11162b!important;font-size:1.02rem}
#academyPage .course .badge{background:#fff3c8!important;color:#7b5d12!important;border:1px solid #ead486!important}

/* ===== Verification ===== */
#verifyPage .card{
  background:linear-gradient(180deg,#fff,#f6f8fb)!important;
  border:1px solid #e0e6ef!important;
  border-radius:28px!important;
  box-shadow:var(--lux-shadow)!important;
}
#verifyPage .field input{background:#fff!important;border:1px solid #d8dfeb!important;border-radius:18px!important;min-height:56px!important}
#verifyPage .btn,#verifyPage button{border-radius:18px!important;min-height:54px!important}
#verifyResult .notice.green{background:linear-gradient(145deg,#eaf8f2,#f7fcfa)!important;border-color:#bfe5d4!important;border-radius:24px!important;color:#176a4d!important}
#verifyResult .notice.red{border-radius:24px!important}

/* ===== Account / Result Modal ===== */
#accountModal{backdrop-filter:blur(14px);background:rgba(9,14,31,.72)!important}
#accountModal .modalbox{
  background:
    linear-gradient(180deg,rgba(255,255,255,.985),rgba(246,248,252,.99)),
    url('ai-account-v735.svg') center/cover no-repeat!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:32px!important;
  box-shadow:0 30px 90px rgba(5,10,25,.28)!important;
  overflow:auto!important;
  position:relative;
}
#accountModal .modalbox::before{
  content:"";
  display:block;
  height:120px;
  margin:-22px -22px 20px;
  border-radius:32px 32px 26px 26px;
  background:url('ai-account-v735.svg') center/cover no-repeat;
  border-bottom:1px solid rgba(215,173,53,.18);
}
#accountModal h2{color:#11162b!important;font-size:1.8rem!important}
#accountModal .field input{background:#fff!important;border:1px solid #dce2ec!important;border-radius:18px!important;min-height:58px!important}
#accountModal .btn{border-radius:18px!important;min-height:55px!important}
#accountModal .btn-primary{background:linear-gradient(135deg,#11162b,#273e71)!important;color:#fff!important}
#accountModal .btn-soft{background:linear-gradient(135deg,#d7ad35,#f1cf68)!important;color:#11162b!important}
#lookupResult .notice{border-radius:22px!important;box-shadow:0 10px 28px rgba(17,22,43,.05)}

/* ===== Bottom navigation refinement ===== */
.navgrid,.nav{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(18px);border-top:1px solid #e0e5ed!important;box-shadow:0 -10px 30px rgba(17,22,43,.06)}
.navitem{border-radius:18px!important;transition:.2s ease}
.navitem.active{background:#f2f4f8!important;color:#11162b!important;font-weight:800!important}

/* ===== Mobile ===== */
@media(max-width:860px){.lux-hero-visual,.lux-home-story,.lux-assessment-hero{grid-template-columns:1fr!important}}
@media(max-width:680px){
  .approved-kpis{grid-template-columns:1fr!important}.lux-panel-copy h3,.lux-assessment-copy h3{font-size:22px}
  #sopPage::before,#academyPage::before,#verifyPage::before{height:158px;border-radius:24px;margin-bottom:18px}
  #sopPage .section-title,#academyPage .section-title,#verifyPage .section-title{border-radius:22px;padding:15px}
  #accountModal .modalbox{border-radius:28px!important}
  #accountModal .modalbox::before{height:95px}
}
@media print{
  .lux-hero-visual,.lux-home-showcase,.lux-assessment-hero,#sopPage::before,#academyPage::before,#verifyPage::before{display:none!important}
}

/* ===== V7.3.7 Critical UI fixes ===== */
.approved-kpi strong{
  color:#11162b!important;
  font-weight:900!important;
}
.approved-kpi span{
  color:#b38b21!important;
  font-weight:800!important;
}
#assessmentPage .field select{
  position:relative!important;
  z-index:2!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#assessmentPage .field select:focus{
  border-color:#d7ad35!important;
  box-shadow:0 0 0 4px rgba(215,173,53,.12)!important;
}
.payment-waiting{
  background:linear-gradient(135deg,#fff8df,#f7f9fc)!important;
  border:1px solid #ead58c!important;
  color:#6b5516!important;
}
@media(max-width:700px){
  .approved-kpi strong{font-size:46px!important}
  .approved-kpi span{font-size:18px!important}
}

/* ===== V7.3.8 Specialty / Facility / Activation fixes ===== */
/* Keep normal dropdowns usable, but hide the technical specialty SELECT.
   The visible specialty control is the approved luxury picker only. */
#assessmentPage select.native-specialty,
#assessmentPage .native-specialty{
  display:none!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:1px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Current establishment appears only when "currently employed" is checked. */
.current-facility-field{
  margin-top:16px!important;
  padding:16px!important;
  border:1px solid #e5d394!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#fffaf0,#f6f8fc)!important;
  box-shadow:0 10px 24px rgba(17,22,43,.05)!important;
}
.current-facility-field.hidden{display:none!important}
.current-facility-field label{color:#11162b!important;font-weight:900!important}
.current-facility-field input{
  background:#fff!important;
  border-color:#e0d3a6!important;
}

/* The luxury specialty picker is the single visible specialty selector. */
.specialty-picker-btn{
  background:linear-gradient(180deg,#fff,#fffdf7)!important;
  border:1.5px solid #d8bd61!important;
  box-shadow:0 8px 22px rgba(17,22,43,.045)!important;
}
.specialty-picker-btn:focus{
  outline:none!important;
  box-shadow:0 0 0 4px rgba(215,173,53,.13),0 8px 22px rgba(17,22,43,.045)!important;
}

/* Do not visually suggest that a new registration already has an activation code. */
#codeActions.hidden,#codeMsg.hidden{display:none!important}

/* ===== V7.3.9 — Assessment answer luxury alignment ===== */
#quizPanel .option,
#quizPanel button.option,
.quizbox .option{
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:18px 22px!important;
  font-size:22px!important;
  line-height:1.45!important;
  font-weight:800!important;
  color:#11162b!important;
  background:linear-gradient(180deg,#ffffff,#fafbfc)!important;
  border:1.5px solid #e1e5ec!important;
  border-radius:22px!important;
  box-shadow:0 8px 20px rgba(17,22,43,.045)!important;
}
#quizPanel .option:hover,
#quizPanel .option:focus{
  border-color:#d7ad35!important;
  background:#fffaf0!important;
  box-shadow:0 0 0 4px rgba(215,173,53,.10),0 8px 20px rgba(17,22,43,.045)!important;
}
#quizPanel .option.selected,
#quizPanel .option[aria-pressed="true"]{
  border-color:#d7ad35!important;
  background:linear-gradient(135deg,#fff8df,#fff)!important;
}
@media(max-width:700px){
  #quizPanel .option,#quizPanel button.option,.quizbox .option{
    min-height:82px!important;
    font-size:21px!important;
    border-radius:24px!important;
  }
}

/* Generic premium dropdown buttons: gender, education, purpose */
.lux-select-native{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
  min-height:1px!important;
}
.lux-select-btn{
  width:100%!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border:1.5px solid #d9c06b!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff,#fffdf8)!important;
  color:#11162b!important;
  padding:0 16px!important;
  font-size:17px!important;
  text-align:start!important;
  box-shadow:0 7px 18px rgba(17,22,43,.035)!important;
}
.lux-select-btn .lux-chevron{color:#8c772f;font-size:21px}
.lux-select-sheet{
  position:fixed!important;inset:0!important;z-index:150!important;
  background:rgba(7,12,28,.72)!important;backdrop-filter:blur(6px)!important;
  display:grid!important;align-items:end!important;
}
.lux-select-sheet.hidden{display:none!important}
.lux-select-panel{
  width:min(720px,100%)!important;max-height:82vh!important;overflow:auto!important;
  margin:0 auto!important;padding:20px 18px calc(24px + env(safe-area-inset-bottom))!important;
  background:#f6f8fc!important;border-radius:32px 32px 0 0!important;
  box-shadow:0 -16px 50px rgba(0,0,0,.18)!important;
}
.lux-select-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.lux-select-head h3{margin:0;color:#11162b;font-size:24px}
.lux-select-close{width:46px;height:46px;border-radius:14px;border:1px solid #dfe4ed;background:#fff;font-size:20px}
.lux-select-list{display:grid;gap:10px}
.lux-select-option{
  min-height:72px;border:1px solid #e1e6ee;border-radius:22px;background:#fff;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#11162b;font-size:18px;font-weight:800;text-align:start;
}
.lux-select-option.selected{border-color:#d7ad35;background:#fffaf0}
.lux-select-radio{
  width:24px;height:24px;border:2px solid #7f8795;border-radius:50%;display:grid;place-items:center;flex:0 0 auto
}
.lux-select-option.selected .lux-select-radio{border-color:#16885e}
.lux-select-option.selected .lux-select-radio:after{content:"";width:12px;height:12px;border-radius:50%;background:#16885e}

/* ===== V7.4.0 — Payment reference field restored ===== */
#paymentPanel .formgrid{
  align-items:end!important;
}
#paymentReference{
  direction:ltr!important;
  text-align:center!important;
  font-weight:800!important;
  letter-spacing:.4px!important;
}
#requestIdView{
  direction:ltr!important;
  text-align:left!important;
  font-size:13px!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#paymentReference:disabled{
  background:#f1f3f7!important;
  color:#8a909b!important;
  border-color:#e1e5ec!important;
  cursor:not-allowed!important;
}
#confirmPaymentBtn:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  filter:grayscale(.18)!important;
}
.payment-reference-state{
  margin-top:10px!important;
  font-size:13px!important;
  line-height:1.7!important;
  color:#78621f!important;
}
@media(max-width:700px){
  #paymentPanel .formgrid{grid-template-columns:1fr!important}
  #paymentReference,#requestIdView{font-size:14px!important}
}

/* ===== V7.4.2 — absolutely remove duplicate native dropdowns ===== */
#assessmentPage .field select.lux-select-native,
#assessmentPage select#gender.lux-select-native,
#assessmentPage select#education.lux-select-native,
#assessmentPage select#purpose.lux-select-native,
select.lux-select-native[hidden]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* exactly one visible premium control */
#assessmentPage .lux-select-btn{
  min-height:62px!important;
  border:1.5px solid #d7bd62!important;
  background:linear-gradient(180deg,#ffffff,#fffdf7)!important;
  color:#11162b!important;
  font-weight:800!important;
  font-size:18px!important;
}
#assessmentPage .lux-select-btn.has-value{
  background:linear-gradient(135deg,#fffaf0,#ffffff)!important;
}
.lux-select-panel{padding-top:18px!important}
.lux-select-list{gap:12px!important}
.lux-select-option{
  min-height:76px!important;
  font-size:20px!important;
  border-radius:24px!important;
}