/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   ConnectBooker ΓÇô Onboarding Design System
   Ported 1-to-1 from React (connectbooker-onboard-flow-main)
   Primary  : hsl(217 91% 50%)  Γëê #1a6ef2
   Secondary: hsl(24  95% 53%)  Γëê #f97316
   Font     : Plus Jakarta Sans
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ΓöÇΓöÇ Design tokens ΓöÇΓöÇ */
:root {
    --primary:        #1a6ef2;
    --primary-fg:     #ffffff;
    --primary-10:     rgba(26,110,242,.10);
    --primary-20:     rgba(26,110,242,.20);
    --primary-60:     rgba(26,110,242,.60);
    --secondary:      #f97316;
    --secondary-fg:   #ffffff;
    --secondary-10:   rgba(249,115,22,.10);
    --secondary-20:   rgba(249,115,22,.20);
    --bg:             hsl(0,0%,98%);
    --fg:             hsl(220,20%,14%);
    --card:           #ffffff;
    --muted:          hsl(214,20%,96%);
    --muted-fg:       hsl(220,10%,46%);
    --accent:         hsl(217,40%,94%);
    --border:         hsl(220,13%,91%);
    --input:          hsl(220,13%,91%);
    --destructive:    hsl(0,72%,51%);
    --success:        hsl(152,58%,42%);
    --radius:         0.75rem;
}

/* ΓöÇΓöÇ Base ΓöÇΓöÇ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   SHELL
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
}
@media (min-width: 768px) { .ob-shell { align-items: center; } }

.ob-container {
    width: 100%;
    max-width: 480px;
}
@media (min-width: 768px)  { .ob-container { max-width: 540px; } }
@media (min-width: 1024px) { .ob-container { max-width: 600px; } }

/* ΓöÇΓöÇ Header ΓöÇΓöÇ */
.ob-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0;
}
.ob-logo-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem; flex-shrink: 0;
}
.ob-brand {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -.02em;
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   PROGRESS STEPS  (5 steps)
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-progress {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 0 8px;
    margin-bottom: 1.5rem;
}
.ob-progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ob-progress-bar {
    height: 6px;
    border-radius: 99px;
    width: 100%;
    background: var(--border);
    transition: background .3s;
}
.ob-progress-bar.complete { background: var(--primary); }
.ob-progress-bar.active   { background: var(--primary-60); }
.ob-progress-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-fg);
    max-width: 60px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s;
}
.ob-progress-label.active,
.ob-progress-label.complete { color: var(--primary); }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   CARD  (animate-fade-in-up)
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 8px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.04);
    animation: obFadeUp .4s ease both;
}
@media (min-width: 768px) { .ob-card { padding: 2rem; } }

@keyframes obFadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Step panels */
.ob-step { display: none; }
.ob-step.active { display: block; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   TYPOGRAPHY
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: .875rem;
    color: var(--muted-fg); cursor: pointer;
    margin-bottom: 1rem;
    transition: color .2s;
}
.ob-back-btn:hover { color: var(--fg); }

.ob-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1.25;
    margin-bottom: .25rem;
}
.ob-subtitle {
    font-size: .875rem;
    color: var(--muted-fg);
    margin-bottom: 1.5rem;
}
.ob-subtitle strong { color: var(--fg); font-weight: 600; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   BADGES
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 99px;
    font-size: .7rem; font-weight: 700;
}
.ob-badge-primary {
    background: var(--primary-10); color: var(--primary);
    border: 1px solid var(--primary-20);
}
.ob-badge-secondary {
    background: var(--secondary-10); color: var(--secondary);
    border: 1px solid var(--secondary-20);
}
.ob-badge-success {
    background: rgba(34,160,107,.12); color: var(--success);
    border: 1px solid rgba(34,160,107,.25);
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   FORM CONTROLS
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-form-group { margin-bottom: 1rem; }
.ob-label {
    display: block;
    font-size: .875rem; font-weight: 500;
    color: var(--fg); margin-bottom: .375rem;
}

.ob-input {
    display: block; width: 100%;
    height: 44px; padding: 0 .875rem;
    border: 1.5px solid var(--input);
    border-radius: var(--radius);
    background: #fff;
    font-family: inherit; font-size: .875rem; color: var(--fg);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.ob-input::placeholder { color: var(--muted-fg); }
.ob-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,110,242,.15);
}
.ob-input.is-invalid { border-color: var(--destructive); }

/* Icon prefix */
.ob-input-wrap { position: relative; }
.ob-input-wrap .ob-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted-fg); pointer-events: none; font-size: .8rem;
}
.ob-input-wrap .ob-input { padding-left: 2.4rem; }

/* +91 prefix */
.ob-input-prefix { position: relative; }
.ob-input-prefix .prefix {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: .875rem; font-weight: 500;
    color: var(--muted-fg); pointer-events: none;
}
.ob-input-prefix .ob-input { padding-left: 3rem; }

/* "or" divider */
.ob-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.25rem 0;
}
.ob-divider::before, .ob-divider::after {
    content:''; flex:1; height:1px; background: var(--border);
}
.ob-divider span {
    font-size: .75rem; font-weight: 500; color: var(--muted-fg);
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   BUTTONS
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 48px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius);
    font-family: inherit; font-size: .9rem; font-weight: 700;
    cursor: pointer; transition: background .2s, transform .1s;
}
.ob-btn-cta:hover { background: #1459cc; }
.ob-btn-cta:active { transform: scale(.99); }
.ob-btn-cta:disabled { background: #b3caf7; cursor: not-allowed; transform: none; }

.ob-btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    width: 100%; height: 48px;
    background: #fff; color: var(--fg);
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: border-color .2s, background .2s;
    margin-bottom: 1.25rem;
}
.ob-btn-google:hover { border-color: #aaa; background: var(--muted); }

.ob-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 48px; padding: 0 1.25rem;
    background: #fff; color: var(--fg);
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-family: inherit; font-size: .875rem; font-weight: 600;
    cursor: pointer; transition: border-color .2s, color .2s;
}
.ob-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.ob-btn-ghost {
    background: none; border: none; padding: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit; font-size: .8125rem;
    color: var(--muted-fg); cursor: pointer; transition: color .2s;
}
.ob-btn-ghost:hover { color: var(--fg); }
.ob-btn-ghost.primary { color: var(--primary); }
.ob-btn-ghost.primary:hover { text-decoration: underline; }

.ob-btn-link {
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: .875rem;
    color: var(--primary); font-weight: 600;
    cursor: pointer; transition: opacity .2s;
}
.ob-btn-link:hover { text-decoration: underline; }

.ob-btn-delete {
    background: none; border: none; padding: 4px;
    color: var(--destructive); cursor: pointer;
    display: inline-flex; align-items: center;
    opacity: .8; transition: opacity .15s;
}
.ob-btn-delete:hover { opacity: 1; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   AUTOCOMPLETE DROPDOWN
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-dropdown {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 4px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    position: relative; z-index: 50;
}
.ob-dropdown-item {
    width: 100%; text-align: left;
    padding: .75rem 1rem;
    border: none; background: #fff;
    cursor: pointer;
    display: flex; align-items: flex-start; gap: .75rem;
    border-bottom: 1px solid var(--border);
    font-family: inherit; transition: background .15s;
}
.ob-dropdown-item:last-child { border-bottom: none; }
.ob-dropdown-item:hover,
.ob-dropdown-item.active { background: var(--accent); }
.ob-dropdown-item .di-icon { color: var(--primary); flex-shrink: 0; margin-top: 2px; font-size: .8rem; }
.ob-dropdown-item .di-name { font-size: .875rem; font-weight: 600; color: var(--fg); }
.ob-dropdown-item .di-addr { font-size: .75rem; color: var(--muted-fg); margin-top: 1px; }

/* Selected place card */
.ob-place-card {
    background: rgba(26,110,242,.05);
    border: 1.5px solid var(--primary-20);
    border-radius: var(--radius);
    padding: 1rem; margin-top: .75rem;
}
.ob-place-card .pc-head {
    display: flex; align-items: center; gap: 6px;
    font-size: .875rem; font-weight: 700; color: var(--fg); margin-bottom: 4px;
}
.ob-place-card .pc-addr { font-size: .75rem; color: var(--muted-fg); }
.ob-map-frame {
    width: 100%; margin-top: .75rem;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   OTP INPUTS  (Step 2)
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-otp-row { display: flex; gap: 8px; justify-content: center; }
.ob-otp-input {
    width: 44px; height: 48px;
    text-align: center;
    font-size: 1.125rem; font-weight: 700;
    border: 1.5px solid var(--input);
    border-radius: var(--radius);
    background: #fff; color: var(--fg);
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.ob-otp-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,110,242,.15);
}
.ob-otp-input.verified {
    border-color: var(--primary);
    background: var(--accent);
    color: var(--primary);
}

/* Consent box */
.ob-consent-row {
    display: flex; align-items: flex-start; gap: .75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    background: rgba(0,0,0,.02);
    cursor: pointer; margin-top: 1.5rem;
}
.ob-consent-row input[type=checkbox] {
    width: 16px; height: 16px;
    flex-shrink: 0; margin-top: 2px;
    accent-color: var(--primary); cursor: pointer;
}
.ob-consent-row span { font-size: .8125rem; color: var(--muted-fg); line-height: 1.5; }
.ob-consent-row a { color: var(--primary); font-weight: 600; text-decoration: none; }
.ob-consent-row a:hover { text-decoration: underline; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   GMB OPTION CARDS  (Step 3)
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-option-card {
    width: 100%; text-align: left;
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 1rem;
    font-family: inherit;
    transition: border-color .2s, background .2s;
    margin-bottom: .75rem;
}
.ob-option-card:hover { border-color: var(--primary); background: var(--accent); }
.ob-option-card.secondary:hover { border-color: var(--secondary); background: rgba(249,115,22,.05); }
.ob-option-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ob-option-icon.primary   { background: var(--primary-10); color: var(--primary); }
.ob-option-icon.secondary { background: var(--secondary-10); color: var(--secondary); }
.ob-option-title { font-size: .9rem; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
.ob-option-desc  { font-size: .75rem; color: var(--muted-fg); }

/* Verified owner state */
.ob-verified-wrap { text-align: center; padding: 2rem 0; }
.ob-verified-icon {
    width: 64px; height: 64px;
    border-radius: 50%; background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem; color: var(--primary);
    animation: obPulseCheck .6s ease-in-out;
}
@keyframes obPulseCheck { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   VERIFY STEP (Step 3) ΓÇô exact match to React VerificationScreen
   Tailwind equivalents: Back mb-4, title text-2xl mb-1, subtitle text-sm mb-6,
   space-y-2, p-3.5 rounded-xl border gap-3, icon w-9 h-9 rounded-lg bg-muted,
   label text-sm font-medium, desc text-xs text-muted-foreground
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-step-verify .ob-verify-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-fg);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.2s;
}
.ob-step-verify .ob-verify-back:hover {
    color: var(--fg);
}
.ob-step-verify .ob-verify-back i {
    font-size: 0.875rem;
}
.ob-step-verify .ob-verify-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}
.ob-step-verify .ob-verify-subtitle {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}
.ob-verify-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ob-verify-method {
    width: 100%;
    text-align: left;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.ob-verify-method:hover {
    border-color: var(--primary);
    background: var(--accent);
}
.ob-verify-method-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.5rem;
    background: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fg);
    font-size: 1rem;
}
.ob-verify-method-text {
    min-width: 0;
}
.ob-verify-method-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg);
    margin: 0 0 0 0;
    line-height: 1.3;
}
.ob-verify-method-desc {
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin: 0.125rem 0 0 0;
    line-height: 1.3;
}
.ob-verify-doc-upload {
    border: 2px dashed var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin-top: 0.75rem;
    transition: border-color 0.2s;
}
.ob-verify-doc-upload:hover {
    border-color: var(--primary);
}

.ob-verify-doc-type-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.ob-radio-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--fg);
}
.ob-radio-wrap input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   ROOMS (Step 4)
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-section-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
}
.ob-section-title {
    font-size: .75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--fg);
}

/* Scraped room card */
.ob-room-review {
    background: rgba(26,110,242,.04);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem; margin-bottom: .75rem;
    display: flex; gap: .75rem; align-items: flex-start;
}
.ob-room-img {
    width: 64px; height: 64px;
    border-radius: 10px; object-fit: cover;
    border: 1.5px solid var(--border); flex-shrink: 0;
}
.ob-room-img-ph {
    width: 64px; height: 64px;
    border-radius: 10px; border: 1.5px solid var(--border);
    background: var(--muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--muted-fg);
}
.ob-room-name  { font-size: .875rem; font-weight: 700; color: var(--fg); }
.ob-room-rate  { font-size: .875rem; font-weight: 600; color: var(--fg); margin-top: 4px; }
.ob-room-sub   { font-size: .75rem; color: var(--muted-fg); margin-top: 2px; }
.ob-room-check { color: var(--primary); flex-shrink: 0; margin-left: auto; margin-top: 2px; }

/* Manual room card */
.ob-room-card {
    background: rgba(26,110,242,.04);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem; margin-bottom: .75rem;
}
.ob-room-card-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
}
.ob-room-card-title {
    font-size: .875rem; font-weight: 700; color: var(--fg);
    display: flex; align-items: center; gap: 6px;
}
.ob-room-card-title i { color: var(--primary); }

.ob-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) {
    #step1 .ob-grid-2 { grid-template-columns: 1fr; }
}

.ob-add-room-btn {
    width: 100%; padding: 10px;
    border: 2px dashed rgba(249,115,22,.35);
    border-radius: var(--radius);
    background: none;
    color: var(--secondary); font-size: .875rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .15s; margin-top: 4px;
}
.ob-add-room-btn:hover { background: rgba(249,115,22,.05); }

/* Scrollable area */
.ob-scrollable {
    max-height: 55vh; overflow-y: auto; padding-right: 4px;
}
.ob-scrollable::-webkit-scrollbar { width: 4px; }
.ob-scrollable::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   AMENITY / FACILITY CHIPS
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip {
    padding: 6px 14px; border-radius: 99px;
    font-size: .8rem; font-weight: 600;
    border: 1.5px solid var(--border);
    background: #fff; color: var(--muted-fg);
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.ob-chip:hover { border-color: rgba(26,110,242,.4); }
.ob-chip.selected { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Review panel */
.ob-review-panel {
    background: rgba(26,110,242,.04);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem; margin-bottom: .75rem;
}
.ob-review-timings {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem;
    align-items: center;
}
.ob-review-timings .ob-review-timing-item {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}
.ob-review-timings .ob-review-time-val {
    font-weight: 600;
    min-width: 2.5rem;
    display: inline-block;
}
.ob-review-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .875rem; color: var(--fg); margin-bottom: 4px;
}
.ob-review-row:last-child { margin-bottom: 0; }
.ob-review-row i { color: var(--muted-fg); font-size: .8rem; }
.ob-review-row .rr-ml { margin-left: auto; color: var(--primary); font-size: .8rem; }

.ob-grid-timings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.ob-grid-timings .ob-timing-field {
    min-width: 0;
}
.ob-grid-timings .ob-input {
    width: 100%;
    min-width: 0;
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   SCRAPING LOADER
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-loader-wrap { text-align: center; padding: 1.5rem 0; }
.ob-loader-icon {
    width: 64px; height: 64px;
    border-radius: 50%; background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem; color: var(--primary);
}
.ob-loader-icon .spin-slow { animation: obSpinSlow 2s linear infinite; }
.ob-loader-icon .pulse-check { animation: obPulseCheck .6s ease-in-out; }
@keyframes obSpinSlow { to { transform: rotate(360deg); } }

.ob-loader-step {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .625rem; text-align: left;
    max-width: 280px; margin-left: auto; margin-right: auto;
}
.ob-ls-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ob-ls-icon.done    { background: var(--primary); color: #fff; font-size: .75rem; }
.ob-ls-icon.running { color: var(--primary); font-size: 1rem; animation: obSpinSlow 1s linear infinite; }
.ob-ls-icon.pending { background: var(--muted); }
.ob-ls-text { font-size: .875rem; color: var(--muted-fg); }
.ob-ls-text.active  { color: var(--fg); font-weight: 600; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   DASHBOARD WELCOME
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-welcome-icon {
    width: 56px; height: 56px;
    border-radius: 1rem; background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; font-size: 1.75rem; color: var(--primary);
}
.ob-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px;
    font-size: .75rem; font-weight: 700;
}
.ob-status-badge.owner { background: var(--primary); color: #fff; }
.ob-status-badge.rep   { background: var(--secondary); color: #fff; }

.ob-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.25rem; }
.ob-quick-card {
    text-align: left; padding: .875rem;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    background: #fff; cursor: pointer; font-family: inherit;
    transition: border-color .2s, background .2s;
}
.ob-quick-card:hover { border-color: var(--primary); background: var(--accent); }
.ob-quick-card i { font-size: 1.1rem; color: var(--muted-fg); display: block; margin-bottom: 8px; transition: color .2s; }
.ob-quick-card:hover i { color: var(--primary); }
.ob-quick-card .qc-title { font-size: .875rem; font-weight: 700; color: var(--fg); }
.ob-quick-card .qc-desc  { font-size: .75rem; color: var(--muted-fg); margin-top: 2px; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   FULL-SCREEN OVERLAY
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.ob-overlay-box {
    background: #fff; border-radius: 1rem;
    padding: 2rem 2.5rem; text-align: center;
    max-width: 320px; width: 90%;
}
.ob-overlay-box .spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--accent); border-top-color: var(--primary);
    border-radius: 50%; animation: obSpin .8s linear infinite;
    margin: 0 auto 1rem;
}
.ob-overlay-box h5 { font-size: 1rem; font-weight: 800; margin-bottom: 4px; }
.ob-overlay-box p  { font-size: .85rem; color: var(--muted-fg); }
@keyframes obSpin { to { transform: rotate(360deg); } }

/* ΓöÇΓöÇ Spacing helpers ΓöÇΓöÇ */
.ob-mt-2  { margin-top: .5rem; }
.ob-mt-4  { margin-top: 1rem; }
.ob-mt-6  { margin-top: 1.5rem; }
.ob-mb-4  { margin-bottom: 1rem; }
.ob-mb-6  { margin-bottom: 1.5rem; }
.ob-text-center { text-align: center; }
.ob-text-muted  { font-size: .875rem; color: var(--muted-fg); }
.ob-fw-700  { font-weight: 700; }

/* Step 5 ΓÇô validation (same pattern as BasicPromotion: is-invalid red outline, invalid-feedback) */
#step5 .form-control.is-invalid { border-color: var(--destructive); }
#step5 [id^="roomMealWrap_"].is-invalid .ob-chips { border: 1px solid var(--destructive); border-radius: var(--radius); padding: 2px; }
#step5 [id^="roomMealWrap_"].is-invalid .invalid-feedback { display: block; }

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   STEP 4 ΓÇô ACCORDION VERIFICATION FLOW
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-v4-accordion { display: flex; flex-direction: column; gap: 0.75rem; }

/* Accordion item */
.ob-v4-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ob-v4-item:hover { border-color: var(--primary); }
.ob-v4-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}

/* Accordion header */
.ob-v4-header {
    width: 100%;
    text-align: left;
    padding: 0.875rem 1rem;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: inherit;
    transition: background 0.2s;
}
.ob-v4-item.active .ob-v4-header { background: var(--accent); }

.ob-v4-header-icon {
    width: 2.5rem; height: 2.5rem; min-width: 2.5rem;
    border-radius: 0.5rem;
    background: var(--muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--fg);
    font-size: 1rem;
}
.ob-v4-item.active .ob-v4-header-icon { background: var(--primary-20); color: var(--primary); }

.ob-v4-header-text { flex: 1; min-width: 0; }
.ob-v4-header-label {
    font-size: 0.875rem; font-weight: 600; color: var(--fg);
    line-height: 1.3;
    display: flex; align-items: center; gap: 0.5rem;
}
.ob-v4-header-desc {
    font-size: 0.75rem; color: var(--muted-fg);
    margin-top: 2px; line-height: 1.3;
}

.ob-v4-chevron {
    font-size: 0.75rem;
    color: var(--muted-fg);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ob-v4-item.active .ob-v4-chevron { transform: rotate(180deg); }

/* Badge */
.ob-v4-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Accordion body */
.ob-v4-body {
    display: none;
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border);
}
.ob-v4-item.active .ob-v4-body { display: block; }

/* Step labels inside accordion */
.ob-v4-step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg);
    margin: 1rem 0 0.5rem 0;
}

/* Document type / number type pill selector */
.ob-v4-pill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
@media (min-width: 480px) {
    .ob-v4-pill-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
}

.ob-v4-pill {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fg);
    transition: border-color 0.2s, background 0.2s;
}
.ob-v4-pill:hover { border-color: var(--primary); }
.ob-v4-pill input[type="radio"] { display: none; }
.ob-v4-pill:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--primary-10);
    color: var(--primary);
}

/* Radio circle inside pill */
.ob-v4-pill .ob-pill-radio {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-block; flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ob-v4-pill:has(input:checked) .ob-pill-radio {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 3px #fff;
}

/* Back link inside method sections */
.ob-biz-back-link {
    font-size: 0.8rem; color: var(--primary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.ob-biz-back-link:hover { text-decoration: underline; }

/* File upload area (reused from ob-verify-doc-upload but scoped) */
.ob-v4-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ob-v4-upload:hover { border-color: var(--primary); background: var(--accent); }
.ob-v4-upload.has-file { border-color: var(--success); background: rgba(34,197,94,0.05); }

/* Alert banner */
.ob-v4-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: var(--radius);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    margin: 1rem 0;
}
.ob-v4-alert i { color: #f97316; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.ob-v4-alert-title { font-size: 0.8rem; font-weight: 600; color: #9a3412; }
.ob-v4-alert-desc { font-size: 0.75rem; color: #c2410c; margin-top: 2px; }

/* Business-number step wizard */
.ob-biz-step {
    animation: obFadeUp .25s ease both;
}
.ob-biz-step + .ob-biz-step {
    margin-top: 0.5rem;
}

/* Method toggle buttons */
.ob-biz-method-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.825rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--fg);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.ob-biz-method-btn i { font-size: 0.9rem; }
.ob-biz-method-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--accent); }
.ob-biz-method-btn.active {
    border-color: var(--primary);
    background: var(--primary-10);
    color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}

/* Inline verify result badge */
.ob-biz-inline-result {
    display: none;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 500;
    align-items: center;
    gap: 8px;
}
.ob-biz-inline-result.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ob-biz-inline-result.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ob-biz-inline-result.pending { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Bank input row inside Step 3 */
.ob-biz-bank-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.ob-biz-bank-row .ob-form-group { flex: 1; margin-bottom: 0; }

/* Outline button for Skip */
.ob-btn-outline {
    width: 100%;
    padding: 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--fg);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}
.ob-btn-outline:hover { border-color: var(--primary); background: var(--accent); }

/* Number input helper */
.ob-v4-input-note {
    font-size: 0.7rem;
    color: var(--muted-fg);
    margin-top: 4px;
}

/* ΓöÇΓöÇ Choice Cards (Step 4.5 ΓÇô Set up hotel details) ΓöÇΓöÇ */
.ob-choice-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.ob-choice-card:hover {
    border-color: var(--primary-60);
    box-shadow: 0 4px 18px rgba(26,110,242,.10);
}
.ob-choice-card--highlighted {
    border-color: var(--primary);
    box-shadow: 0 2px 14px rgba(26,110,242,.12);
}
.ob-choice-card__badge {
    background: #f97316;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 5px 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ob-choice-card__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
}
.ob-choice-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary);
    flex-shrink: 0;
}
.ob-choice-card__icon--gray {
    background: var(--muted);
    color: var(--muted-fg);
}
.ob-choice-card__content { flex: 1; }
.ob-choice-card__content--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ob-choice-card__title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--fg);
    margin-bottom: 4px;
}
.ob-choice-card__desc {
    font-size: .85rem;
    color: var(--muted-fg);
    margin-bottom: 10px;
    line-height: 1.4;
}
.ob-choice-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ob-choice-card__list li {
    font-size: .85rem;
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    gap: 7px;
}
.ob-choice-card__list li i {
    color: var(--primary);
    font-size: .75rem;
}
.ob-choice-card__link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ob-choice-card__link:hover { text-decoration: underline; }
.ob-choice-card__arrow {
    color: var(--muted-fg);
    font-size: .9rem;
    flex-shrink: 0;
}

/* ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ
   OTA PICKER CARDS
ΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉΓòÉ */
.ob-ota-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    position: relative;
    transition: all .15s ease;
    user-select: none;
}
.ob-ota-card:hover {
    border-color: var(--primary-60);
    background: var(--accent);
}
.ob-ota-card--selected {
    border-color: var(--primary);
    background: var(--primary-10);
}
.ob-ota-card--selected:hover {
    background: var(--primary-10);
}
.ob-ota-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ob-ota-card__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--fg);
    flex: 1;
}
.ob-ota-card__check {
    font-size: .85rem;
    color: var(--primary);
    opacity: 0;
    transition: opacity .15s ease;
}
.ob-ota-card--selected .ob-ota-card__check {
    opacity: 1;
}
.ob-ota-card--other {
    grid-column: 1 / -1;
    justify-content: center;
}
.ob-ota-card--other .ob-ota-card__name {
    text-align: center;
}

/* ── Auto-fill preview styles ── */
.af-card { border:1.5px solid #e2e8f0; border-radius:12px; margin-bottom:16px; overflow:hidden; background:#fff; }
.af-card-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #f1f5f9; background:#f8fafc; }
.af-card-head-left { display:flex; align-items:center; gap:10px; }
.af-card-icon { width:36px; height:36px; border-radius:50%; background:#dbeafe; display:flex; align-items:center; justify-content:center; color:#1d4ed8; font-size:.9rem; flex-shrink:0; }
.af-card-title { font-weight:700; font-size:.92rem; color:#1e293b; }
.af-card-subtitle { font-size:.75rem; color:#64748b; margin-top:2px; }
.af-card-badge { background:#16a34a; color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.af-card-body { padding:14px 16px; }
.af-timing-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.af-timing-box { border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 14px; background:#fafafa; }
.af-timing-label { font-size:.72rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.af-timing-value { font-size:.92rem; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:6px; }
.af-facility-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:.76rem; color:#64748b; }
.af-facility-bar-links { display:flex; gap:10px; }
.af-facility-bar-links a { color:#1d4ed8; cursor:pointer; font-weight:600; text-decoration:none; }
.af-facility-bar-links a:hover { text-decoration:underline; }
.af-chip { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:.76rem; font-weight:600; border:1.5px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; margin:3px 3px 3px 0; cursor:default; }
.af-chip--selected { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }

.af-room-card { border:1.5px solid #e2e8f0; border-radius:10px; margin-bottom:12px; overflow:hidden; }
.af-room-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#f8fafc; }
.af-room-head input[type=checkbox] { accent-color:#1d4ed8; width:16px; height:16px; flex-shrink:0; }
.af-room-thumb { width:48px; height:48px; border-radius:8px; object-fit:cover; border:1px solid #e2e8f0; flex-shrink:0; }
.af-room-thumb-ph { width:48px; height:48px; border-radius:8px; border:1px solid #e2e8f0; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:#94a3b8; flex-shrink:0; }
.af-room-name { font-weight:700; font-size:.88rem; color:#1e293b; }
.af-room-meta { font-size:.74rem; color:#64748b; margin-top:2px; }
.af-room-body { padding:10px 14px; }
.af-room-actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; }
.af-room-btn { border:none; background:none; cursor:pointer; padding:4px 7px; border-radius:6px; font-size:.82rem; transition:background .15s,color .15s; }
.af-room-btn--edit { color:#1d4ed8; }
.af-room-btn--edit:hover { background:#eff6ff; color:#1e40af; }
.af-room-btn--del { color:#dc2626; }
.af-room-btn--del:hover { background:#fef2f2; color:#b91c1c; }

.af-rp-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.af-rp-card input[type=checkbox] { accent-color:#1d4ed8; width:14px; height:14px; flex-shrink:0; }
.af-rp-name-text { font-weight:600; font-size:.82rem; color:#1e293b; }
.af-rp-tag { font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.af-rp-tag--ep { background:#fef3c7; color:#92400e; }
.af-rp-tag--cp { background:#dbeafe; color:#1e40af; }
.af-rp-tag--map { background:#d1fae5; color:#065f46; }
.af-rp-tag--ap { background:#ede9fe; color:#5b21b6; }
.af-rp-tag--no_meal { background:#f1f5f9; color:#64748b; }
.af-rp-card-sub { font-size:.72rem; color:#64748b; display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; width:100%; }
.af-rp-price { font-weight:700; color:#0f172a; font-size:.82rem; margin-left:auto; }

.af-policy-cat { font-weight:700; font-size:.8rem; color:#475569; margin-bottom:4px; margin-top:10px; }
.af-policy-rule { font-size:.78rem; color:#64748b; padding-left:12px; position:relative; margin-bottom:3px; }
.af-policy-rule::before { content:''; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:#94a3b8; }

.af-img-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.af-img-thumb { width:64px; height:48px; border-radius:6px; object-fit:cover; border:1px solid #e2e8f0; cursor:pointer; transition:border-color .15s; }
.af-img-thumb:hover { border-color:#1d4ed8; }

.af-manual-room { border:1.5px solid #e2e8f0; border-radius:10px; padding:14px; margin-bottom:10px; }
.af-manual-room-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.af-manual-room-title { font-weight:700; font-size:.88rem; color:#1e293b; display:flex; align-items:center; gap:6px; }
.af-manual-rp { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.af-manual-rp input { flex:1; min-width:120px; }

/* ═══════════════════════════════════════════════════════════════
   FSSAI VIDEO KYC
   ═══════════════════════════════════════════════════════════════ */
.vkyc-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0b1220;
    border-radius: 14px;
    overflow: hidden;
    margin: 12px 0 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06);
}
.vkyc-preview-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#vkycLivePreview { transform: scaleX(-1); /* mirror selfie view */ }

/* Face positioning guide */
.vkyc-face-guide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.vkyc-face-guide::before {
    content: '';
    width: 46%;
    height: 56%;
    border: 2px dashed rgba(255,255,255,.35);
    border-radius: 50%;
    box-shadow: 0 0 0 2000px rgba(0,0,0,.22);
}
.vkyc-preview-wrap.recording .vkyc-face-guide::before {
    border-color: rgba(239,68,68,.65);
    border-style: solid;
    animation: vkycPulseGuide 1.6s ease-in-out infinite;
}
@keyframes vkycPulseGuide {
    0%, 100% { box-shadow: 0 0 0 2000px rgba(0,0,0,.22), 0 0 0 0 rgba(239,68,68,.25); }
    50% { box-shadow: 0 0 0 2000px rgba(0,0,0,.22), 0 0 0 8px rgba(239,68,68,0); }
}

/* Recording indicator */
.vkyc-rec-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0,0,0,.55);
    border-radius: 99px;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    z-index: 3;
    backdrop-filter: blur(4px);
}
.vkyc-rec-indicator::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: vkycRecPulse 1.2s ease-in-out infinite;
}
.vkyc-preview-wrap.recording .vkyc-rec-indicator { display: inline-flex; }
@keyframes vkycRecPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.85); }
}

/* Declaration script overlay */
.vkyc-script-overlay {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: 46%;
    background: rgba(11,18,32,.78);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .78rem;
    line-height: 1.55;
    pointer-events: auto;
    overflow-y: auto;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
    z-index: 2;
}
.vkyc-script-overlay::-webkit-scrollbar { width: 4px; }
.vkyc-script-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 4px; }
.vkyc-script-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fbbf24;
    margin-bottom: 4px;
}
.vkyc-script-text { white-space: pre-line; }

/* Placeholder before camera starts */
.vkyc-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    font-size: .85rem;
    text-align: center;
    padding: 16px;
    z-index: 1;
}
.vkyc-placeholder i { font-size: 1.6rem; opacity: .7; }

/* Controls */
.vkyc-controls {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}
.vkyc-controls button {
    flex: 1;
    min-width: 90px;
    height: 44px;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all .2s ease;
}
#btnVkycStart {
    background: #fff;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}
#btnVkycStart:hover { background: var(--primary-10); }
#btnVkycStop {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
}
#btnVkycStop:hover { background: #fee2e2; }
#btnVkycRetake:hover { border-color: var(--primary); color: var(--primary); }

/* Status */
.vkyc-status {
    font-size: .8rem;
    color: #64748b;
    margin-top: 8px;
    min-height: 1.3em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vkyc-status.recording { color: #dc2626; font-weight: 600; }

/* Error / result messages */
.vkyc-error {
    font-size: .8rem;
    color: #b91c1c;
    margin-top: 10px;
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    display: none;
}
.vkyc-inline-result {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 500;
    align-items: center;
    gap: 8px;
}
.vkyc-inline-result.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.vkyc-inline-result.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.vkyc-submit-btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
}