/* ==========================================================================
   Supplier onboarding: the become-a-supplier wizard + the shared register
   form it reuses (modules/Layout/auth/register-form.blade.php, also used by
   the site-wide login/register modal). Consolidated out of inline <style>
   blocks - this file is the single source for all of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared auth form (register-form.blade.php / login-form.blade.php)
   -------------------------------------------------------------------------- */
.bc-form-register .form-group,
.bc-form-login .form-group {
    position: relative;
    margin-bottom: 16px;
}
.bc-form-register .form-control,
.bc-form-login .form-control {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px 12px 48px;
    font-size: 14px;
    background: #fafbfc;
    font-family: 'Poppins', sans-serif;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    height: auto;
    width: 100%;
}
.bc-form-register .form-control:focus,
.bc-form-login .form-control:focus {
    background: #fff;
    border-color: #038a52;
    box-shadow: 0 0 0 3px rgba(3,138,82,0.08);
    outline: none;
}
.bc-form-register .form-control::placeholder,
.bc-form-login .form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Question-style label above each field */
.bc-form-register .bc-form-label,
.bc-form-login .bc-form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
}

/* Positioned wrapper for icon-badge + input + toggle button - kept separate from
   .form-group so the badge/toggle center on the input alone, not the label above it */
.bc-form-register .bc-input-wrap,
.bc-form-login .bc-input-wrap {
    position: relative;
}

/* Round icon badge */
.bc-form-register .input-icon-badge,
.bc-form-login .input-icon-badge {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f0f5f3;
    border: 1px solid #e0e8e4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    color: #64748b;
    font-size: 14px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.bc-form-register .bc-input-wrap:focus-within .input-icon-badge,
.bc-form-login .bc-input-wrap:focus-within .input-icon-badge {
    color: #038a52;
    background: rgba(3,138,82,0.08);
    border-color: rgba(3,138,82,0.2);
}

/* Phone input - prevent text hidden under flag */
.bc-form-register .phone-field-wrap {
    position: relative;
}
.bc-form-register .phone-field-wrap .iti {
    width: 100%;
    display: block;
}
.bc-form-register .phone-field-wrap .iti .iti__selected-flag {
    background: #f0f5f3;
    border-right: 1.5px solid #e0e0e0;
    border-radius: 8px 0 0 8px;
    padding: 0 8px 0 12px;
    height: 100%;
}
.bc-form-register .phone-field-wrap .iti input.form-control,
.bc-form-register .phone-field-wrap .iti--separate-dial-code input.form-control {
    padding-left: 98px !important;
    border-radius: 8px;
}

/* Password toggle button */
.bc-form-register .pwd-toggle-btn,
.bc-form-login .pwd-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    z-index: 3;
    color: #64748b;
    font-size: 15px;
    line-height: 1;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.bc-form-register .pwd-toggle-btn:hover,
.bc-form-login .pwd-toggle-btn:hover {
    color: #1e293b;
    background: #f0f0f0;
}
.bc-form-register .form-group.has-pwd-toggle .form-control,
.bc-form-login .form-group.has-pwd-toggle .form-control {
    padding-right: 46px;
}

/* Terms checkbox */
.bc-form-register .terms-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #475569;
    font-family: 'Poppins', sans-serif;
}
.bc-form-register .terms-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #038a52;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.bc-form-register .terms-row a {
    color: #f47c04;
    font-weight: 500;
    text-decoration: none;
}
.bc-form-register .terms-row a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   become-a-supplier: 3-step tracker (partials/steps.blade.php)
   -------------------------------------------------------------------------- */
.auth-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 0 0 28px; padding: 0 4px; }
.auth-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 80px; position: relative; }
.auth-step-dot {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; border: 2px solid #e5e7eb; background: #fff; color: #9ca3af;
    transition: all .25s; position: relative; z-index: 1;
}
.auth-step.done  .auth-step-dot { background: #038a52; border-color: #038a52; color: #fff; }
.auth-step.active .auth-step-dot { background: #f47c04; border-color: #f47c04; color: #fff; box-shadow: 0 0 0 4px rgba(244,124,4,.15); }
.auth-step.pending .auth-step-dot { background: #f9fafb; border-color: #e5e7eb; color: #d1d5db; }
.auth-step-label { font-size: 10.5px; font-weight: 600; text-align: center; white-space: nowrap; color: #9ca3af; letter-spacing: .2px; line-height: 1.2; }
.auth-step.done  .auth-step-label { color: #038a52; }
.auth-step.active .auth-step-label { color: #f47c04; }
.auth-step-line { flex: 1; height: 2px; background: #e5e7eb; margin-top: 17px; min-width: 20px; transition: background .25s; }
.auth-step-line.done { background: #038a52; }
@media (max-width: 400px) { .auth-step-label { display: none; } .auth-step { min-width: 40px; } }

/* --------------------------------------------------------------------------
   become-a-supplier: Business Type / Service Type choice cards
   (business-type.blade.php, service-type.blade.php)
   -------------------------------------------------------------------------- */
.sup-choice-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.sup-choice {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1.5px solid #e0e0e0; border-radius: 10px;
    padding: 14px 16px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sup-choice:hover { border-color: #038a52; }
.sup-choice.is-selected { border-color: #038a52; background: rgba(3,138,82,.05); }
.sup-choice input[type="radio"] { margin-top: 3px; accent-color: #038a52; flex-shrink: 0; }
.sup-choice-icon {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    background: #f0fdf6; color: #038a52;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.sup-choice-body { display: flex; flex-direction: column; gap: 2px; }
.sup-choice-label-row { display: flex; align-items: center; gap: 6px; }
.sup-choice-label { font-size: 14px; font-weight: 600; color: #111827; }
.sup-choice-desc { font-size: 12.5px; color: #6b7280; line-height: 1.4; }

/* Info-icon tooltip on each option - a square badge (not a round icon),
   sitting at the end of the question it explains. */
.sup-tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    background: #f0fdf6; color: #038a52; cursor: help; flex-shrink: 0;
    transition: background .15s, color .15s;
}
.sup-tip:hover, .sup-tip:focus { background: #038a52; color: #fff; outline: none; }
.sup-tip i { font-size: 11px; }
.sup-tip-sm { width: 14px; height: 14px; border-radius: 3px; }
.sup-tip-sm i { font-size: 9px; }
.sup-tip-bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: 240px; max-width: 70vw; background: #111827; color: #fff; font-size: 12px; font-weight: 400;
    line-height: 1.5; padding: 10px 12px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s;
    z-index: 20; text-align: left;
}
.sup-tip-bubble::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #111827;
}
.sup-tip:hover .sup-tip-bubble, .sup-tip:focus .sup-tip-bubble, .sup-tip:focus-within .sup-tip-bubble {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
    .sup-tip-bubble { left: auto; right: -8px; transform: translateY(4px); }
    .sup-tip:hover .sup-tip-bubble, .sup-tip:focus .sup-tip-bubble, .sup-tip:focus-within .sup-tip-bubble { transform: translateY(0); }
    .sup-tip-bubble::after { left: auto; right: 12px; transform: none; }
}

/* --------------------------------------------------------------------------
   become-a-supplier: Create Account step extras (create-account.blade.php)
   -------------------------------------------------------------------------- */
.sup-social { display: flex; gap: 10px; justify-content: center; }
.sup-social .btn { flex: 1; text-align: center; padding: 12px 0; border-radius: 8px; }
.sup-social-divider { margin: 14px 0; }

/* Business Type / Service Type validation error (was an inline style="") */
.sup-field-error { display: block; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   become-a-supplier: welcome/landing page (welcome.blade.php)
   -------------------------------------------------------------------------- */
.bas-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.bas-page { --bas-ink: #111827; --bas-muted: #6b7280; --bas-green: #038a52; --bas-orange: #f47c04; --bas-line: #e5e7eb; }

.bas-hero { background: #0f172a; color: #fff; padding: 72px 0; text-align: center; }
.bas-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #86efac; margin: 0 0 14px; }
.bas-hero h1 { font-size: 34px; line-height: 1.25; font-weight: 700; max-width: 760px; margin: 0 auto 16px; }
.bas-hero-dek { font-size: 16px; color: #cbd5e1; max-width: 560px; margin: 0 auto 28px; }

.bas-btn { display: inline-block; padding: 13px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.bas-btn-primary { background: var(--bas-green); color: #fff; }
.bas-btn-primary:hover { background: #027041; color: #fff; }

.bas-section { padding: 56px 0; }
.bas-section-alt { background: #f9fafb; }
.bas-section-title { font-size: 24px; font-weight: 700; color: var(--bas-ink); text-align: center; margin: 0 0 8px; }
.bas-section-sub { font-size: 14px; color: var(--bas-muted); text-align: center; max-width: 620px; margin: 0 auto 32px; }

.bas-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bas-card { border: 1px solid var(--bas-line); border-radius: 12px; padding: 28px 20px; text-align: center; }
.bas-card i { font-size: 26px; color: var(--bas-green); margin-bottom: 12px; }
.bas-card h3 { font-size: 16px; font-weight: 700; color: var(--bas-ink); margin: 0 0 6px; }
.bas-card p { font-size: 13px; color: var(--bas-muted); margin: 0; }

.bas-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-top: 32px; }
.bas-benefit { display: flex; gap: 14px; align-items: flex-start; }
.bas-benefit i { font-size: 18px; color: var(--bas-green); margin-top: 3px; flex-shrink: 0; }
.bas-benefit h4 { font-size: 14px; font-weight: 700; color: var(--bas-ink); margin: 0 0 3px; }
.bas-benefit p { font-size: 13px; color: var(--bas-muted); margin: 0; line-height: 1.5; }

.bas-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.bas-gs-step { text-align: center; }
.bas-gs-num { width: 32px; height: 32px; border-radius: 50%; background: var(--bas-green); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.bas-gs-step h4 { font-size: 14px; font-weight: 700; color: var(--bas-ink); margin: 0 0 4px; }
.bas-gs-time { display: inline-block; font-size: 11px; font-weight: 600; color: var(--bas-orange); margin-bottom: 6px; }
.bas-gs-step p { font-size: 12.5px; color: var(--bas-muted); margin: 0; line-height: 1.5; }

.bas-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.bas-tab { border: 1px solid var(--bas-line); background: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--bas-muted); cursor: pointer; }
.bas-tab.is-active { background: var(--bas-ink); border-color: var(--bas-ink); color: #fff; }
.bas-tab-panel { display: none; }
.bas-tab-panel.is-active { display: block; }
.bas-doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 760px; margin: 0 auto; }
.bas-doc-cols h4 { font-size: 13px; font-weight: 700; color: var(--bas-ink); margin: 0 0 10px; }
.bas-doc-cols ul { margin: 0; padding-left: 18px; }
.bas-doc-cols li { font-size: 13px; color: var(--bas-muted); margin-bottom: 6px; line-height: 1.5; }
.bas-doc-note { text-align: center; font-size: 12px; color: var(--bas-muted); margin: 24px 0 0; }

.bas-standards { list-style: none; margin: 32px auto 0; padding: 0; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.bas-standards li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bas-ink); }
.bas-standards i { color: var(--bas-green); font-size: 13px; }

.bas-faq { max-width: 720px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 10px; }
.bas-faq-item { border: 1px solid var(--bas-line); border-radius: 10px; padding: 14px 18px; background: #fff; }
.bas-faq-item summary { font-size: 14px; font-weight: 600; color: var(--bas-ink); cursor: pointer; }
.bas-faq-item p { font-size: 13px; color: var(--bas-muted); margin: 10px 0 0; line-height: 1.6; }

.bas-cta { background: var(--bas-green); padding: 48px 0; text-align: center; }
.bas-cta h2 { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.bas-cta .bas-btn-primary { background: #fff; color: var(--bas-green); }
.bas-cta .bas-btn-primary:hover { background: #f0fdf6; color: var(--bas-green); }

@media (max-width: 860px) {
    .bas-cards, .bas-benefits { grid-template-columns: 1fr; }
    .bas-steps-row { grid-template-columns: 1fr 1fr; }
    .bas-doc-cols { grid-template-columns: 1fr; }
    .bas-hero h1 { font-size: 26px; }
}

/* ==========================================================================
   Hotel portal - Property Details wizard (modules/Hotel/Views/portal/
   property-details.blade.php). Linked from that view's own @push('styles'),
   not globally, since these .pd-*/.ptype-*/.review-* classes are specific
   to this page.
   ========================================================================== */

/* intl-tel-input v25 brand overrides */
:root {
    --iti-path-flags-1x: url("/vendor/intl-tel-input/img/flags.webp");
    --iti-path-flags-2x: url("/vendor/intl-tel-input/img/flags@2x.webp");
    --iti-path-globe-1x: url("/vendor/intl-tel-input/img/globe.webp");
    --iti-path-globe-2x: url("/vendor/intl-tel-input/img/globe@2x.webp");
}
.iti { width: 100%; }
.iti__selected-country { border-right: 1.5px solid #d1d5db; background: #f9fafb; border-radius: 7px 0 0 7px; padding: 0 8px; }
.iti__selected-country:hover { background: #e6f5ef; }
.iti__dropdown-content { border-color: #038a52 !important; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.iti__search-input { padding: 8px 10px 8px 32px !important; }
.iti__search-input:focus { border-color: #038a52 !important; box-shadow: 0 0 0 3px rgba(3,138,82,.15) !important; outline: none !important; }
.iti__country.iti__highlight { background: #e6f5ef; }
.iti__country:hover { background: #e6f5ef; }
.iti__dial-code { color: #038a52; }
.pd-iti-input { border-radius: 0 7px 7px 0 !important; }

:root {
    --pd-primary: #038a52;
    --pd-primary-lt: #e6f5ef;
    --pd-primary-dk: #026b3f;
    --pd-border: #e5e7eb;
    --pd-radius: 10px;
    --pd-shadow: 0 1px 4px rgba(0,0,0,.07);
    --pd-text: #111827;
    --pd-sub: #374151;
}

/* ── Two-column layout: vertical step nav (left) + form content (right) ── */
.pd-layout {
    display: grid;
    grid-template-columns: 312px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}
.pd-content { min-width: 0; }

/* ── Vertical step nav ──
   A tinted region rather than a floating card: the form's own .pd-card blocks
   are white, so this soft grey-green sets the nav apart from them without a
   shadow or heavy border. Still no height cap and no inner scrollbar - the
   list runs its full natural length. Sticks against .portal-content (the
   portal chassis makes that the scroll container via overflow-y:auto). */
.pd-steplist {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f4f7f6;
    border-radius: var(--pd-radius);
    padding: 14px 10px;
}
.pd-steplist-head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 2px 0 10px;
    padding: 0 11px;
}
.pd-steplink {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 11px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--pd-sub);
    transition: background .15s, color .15s;
}
.pd-steplink:hover { background: #e8edeb; }
.pd-steplink:focus-visible { outline: 2px solid var(--pd-primary); outline-offset: -2px; }
.pd-steplink .num {
    width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    transition: background .18s, color .18s;
}
.pd-steplink .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-steplink .name { font-size: 13.5px; font-weight: 700; color: var(--pd-text); line-height: 1.35; }
/* Descriptions wrap in full - never clamped or truncated. */
.pd-steplink .desc { font-size: 11.5px; font-weight: 400; color: #6b7280; line-height: 1.5; }
.pd-steplink .tick { font-size: 11px; color: var(--pd-primary); opacity: 0; flex-shrink: 0; margin-top: 6px; }

.pd-steplink.done .num  { background: var(--pd-primary); color: #fff; }
.pd-steplink.done .tick { opacity: 1; }
.pd-steplink.active { background: var(--pd-primary-lt); }
.pd-steplink.active .num  { background: var(--pd-primary); color: #fff; }
.pd-steplink.active .name { color: var(--pd-primary); }
.pd-steplink.active .desc { color: var(--pd-primary-dk); }

@media (max-width: 1100px) {
    .pd-layout { grid-template-columns: 232px minmax(0, 1fr); }
    .pd-steplink .desc { display: none; }
}
@media (max-width: 900px) {
    .pd-layout { grid-template-columns: 1fr; gap: 1rem; }
    .pd-steplist {
        position: static; background: none; border-radius: 0;
        flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 0 4px;
    }
    .pd-steplist-head { display: none; }
    .pd-steplink { flex-direction: column; align-items: center; gap: 4px; min-width: 80px; padding: 8px 6px; text-align: center; }
    .pd-steplink .txt { align-items: center; }
    .pd-steplink .name { font-size: 11px; white-space: nowrap; }
    .pd-steplink .tick { display: none; }
}

/* ── Sections ── */
.pd-section { display: none; }
.pd-section.active { display: block; }

/* ── Cards ── */
.pd-card {
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--pd-shadow);
}
.pd-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pd-text);
    margin-bottom: 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--pd-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-card-title i { color: var(--pd-primary); }

/* ── Forms ── */
.form-label { font-size: 13px; font-weight: 600; color: var(--pd-text); margin-bottom: 4px; }
.form-control, .form-select { font-size: 13px; color: var(--pd-text); border-color: var(--pd-border); border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: var(--pd-primary); box-shadow: 0 0 0 3px rgba(3,138,82,.12); }
.form-text { font-size: 11.5px; color: #6b7280; margin-top: 2px; }
.char-count { font-size: 11px; color: #6b7280; text-align: right; }
.required-star { color: #ef4444; margin-left: 2px; }

/* ── Field example note (always visible, brief - a concrete sample value) ── */
.pd-example { font-size: 11.5px; color: var(--pd-sub); font-style: italic; margin-top: 3px; }

/* ── Property type grid ── */
.ptype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}
.ptype-card {
    border: 2px solid var(--pd-border);
    border-radius: 8px;
    padding: 9px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-text);
    transition: all .15s;
    user-select: none;
    position: relative;
}
.ptype-card:hover { border-color: var(--pd-primary); background: var(--pd-primary-lt); }
.ptype-card.checked { border-color: var(--pd-primary); background: var(--pd-primary-lt); color: var(--pd-primary); }
.ptype-card.checked i { color: var(--pd-primary); }
/* The checkbox stays in the DOM (name/value still submit normally) but is
   visually replaced by the whole card + a checkmark badge - the entire
   card is the click target already via the wrapping <label>. */
.ptype-card input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ptype-check { display: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: var(--pd-primary); align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.ptype-card.checked .ptype-check { display: inline-flex; }
.ptype-other-input input { max-width: 320px; }
.ptype-group-error { color: #dc2626; font-size: 12px; margin-top: 6px; }

/* ── Star rating ── */
.star-row { display: flex; flex-wrap: wrap; gap: 8px; }
.star-opt {
    border: 2px solid var(--pd-border);
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-text);
    transition: all .15s;
    white-space: nowrap;
}
.star-opt:hover, .star-opt.checked { border-color: var(--pd-primary); background: var(--pd-primary-lt); color: var(--pd-primary); }
.star-opt input { display: none; }

/* ── Location autocomplete ── */
.loc-wrap { position: relative; }
.loc-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.loc-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--pd-text);
    border-bottom: 1px solid #f3f4f6;
}
.loc-item:last-child { border-bottom: none; }
.loc-item:hover, .loc-item.highlighted { background: var(--pd-primary-lt); color: var(--pd-primary); }
.loc-none { padding: 10px 12px; font-size: 12px; color: #6b7280; }

/* ── Nominatim autocomplete (pdBuildNominatim) ──
   Used by "Where's your property located?" and every nearby-places row. The JS
   builds this dropdown itself and sets only position/z-index/display inline, so
   without these rules the suggestions render as transparent text overlapping the
   fields underneath. Deliberately mirrors .loc-dropdown above - the two are the
   same control, and the city field only looked right because it happened to use
   a class this stylesheet already covered. */
.tm-ac-dropdown {
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
}
.tm-ac-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--pd-text);
    border-bottom: 1px solid #f3f4f6;
}
.tm-ac-item:last-child { border-bottom: none; }
.tm-ac-item:hover, .tm-ac-item.highlighted { background: var(--pd-primary-lt); color: var(--pd-primary); }

/* ── Map preview ── */
.map-preview-box {
    width: 100%;
    height: 200px;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
}
#pdMapIframe { width: 100%; height: 200px; border: none; border-radius: 8px; display: none; }

/* ── Nearby places ── */
.nearby-item {
    background: #f9fafb;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    position: relative;
}
.nearby-remove {
    position: absolute;
    top: 8px; right: 8px;
    background: none;
    border: none;
    color: #ef4444;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
.nearby-remove:hover { color: #b91c1c; }
.nearby-photo-slot { margin-top: 4px; }
.nearby-photo-empty {
    width: 80px; height: 60px;
    border: 2px dashed var(--pd-border);
    border-radius: 6px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; color: #6b7280; gap: 3px;
    transition: border-color .15s;
}
.nearby-photo-empty:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.nearby-photo-preview { position: relative; display: inline-block; }
.nearby-photo-preview img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--pd-border); }
.nearby-photo-del {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px;
    background: #ef4444; color: #fff;
    border-radius: 50%; border: none; cursor: pointer;
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    padding: 0;
}

/* ── Media step: hero photo + gallery strip ── */
.pd-hero-photo-empty {
    width: 220px; height: 140px;
    border: 2px dashed var(--pd-border);
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; color: #6b7280; gap: 6px;
    transition: border-color .15s;
}
.pd-hero-photo-empty:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.pd-hero-photo-empty i { font-size: 22px; }
.pd-hero-photo-preview { position: relative; display: inline-block; }
.pd-hero-photo-preview img { width: 220px; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--pd-border); }
.pd-hero-photo-del {
    position: absolute; top: -8px; right: -8px;
    width: 24px; height: 24px;
    background: #ef4444; color: #fff;
    border-radius: 50%; border: 2px solid #fff; cursor: pointer;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
    padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.pd-gallery-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pd-gallery-thumb { position: relative; width: 100px; height: 76px; flex-shrink: 0; }
.pd-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; border: 1px solid var(--pd-border); }
.pd-gallery-thumb .pd-hero-photo-del { width: 20px; height: 20px; font-size: 10px; top: -7px; right: -7px; }
.pd-gallery-add {
    width: 100px; height: 76px; flex-shrink: 0;
    border: 2px dashed var(--pd-border);
    border-radius: 7px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; color: #6b7280; gap: 3px;
    transition: border-color .15s;
}
.pd-gallery-add:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.pd-gallery-count { font-size: 12px; color: var(--pd-sub); margin-top: 6px; }
.pd-gallery-count.pd-gallery-count-ok { color: var(--pd-primary); font-weight: 600; }

/* ── Navigation bar ── */
.pd-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pd-border);
}
.pd-btn-prev {
    background: #f3f4f6;
    border: 1px solid var(--pd-border);
    color: var(--pd-text);
    font-size: 13px; font-weight: 600;
    padding: 8px 20px; border-radius: 6px;
    cursor: pointer; transition: background .15s;
}
.pd-btn-prev:hover { background: #e5e7eb; }
.pd-btn-next {
    background: var(--pd-primary);
    border: none;
    color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 8px 24px; border-radius: 6px;
    cursor: pointer; transition: background .15s;
}
.pd-btn-next:hover { background: var(--pd-primary-dk); }
.pd-step-info {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

/* ── Review ── */
.review-block {
    background: #f9fafb;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: .9rem 1.1rem;
    margin-bottom: .8rem;
}
.review-block h6 {
    font-size: 12px;
    font-weight: 700;
    color: var(--pd-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: .6rem;
}
.review-row { display: flex; gap: 8px; font-size: 13px; margin-bottom: 4px; color: var(--pd-text); }
.review-lbl { font-weight: 600; min-width: 150px; flex-shrink: 0; color: var(--pd-text); }
.review-val { color: var(--pd-sub); }

/* ── Publish toggle ── */
.pub-bar {
    background: var(--pd-primary-lt);
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
}
.pub-bar .info h6 { font-size: 14px; font-weight: 700; color: var(--pd-text); margin: 0 0 2px; }
.pub-bar .info p { font-size: 12px; color: var(--pd-sub); margin: 0; }
.form-switch .form-check-input { width: 44px; height: 22px; cursor: pointer; }
.form-check-input:checked { background-color: var(--pd-primary); border-color: var(--pd-primary); }

/* ── Publish-readiness checklist (Review step) ── */
.pd-readiness-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-readiness-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 7px; }
.pd-readiness-list li.is-done { color: var(--pd-primary); background: var(--pd-primary-lt); }
.pd-readiness-list li.is-done i { color: var(--pd-primary); }
.pd-readiness-list li.is-missing { color: var(--pd-text); background: #fef2f2; }
.pd-readiness-list li.is-missing i { color: #dc2626; }
.pd-readiness-list li span { flex: 1; }
.pd-readiness-list li a { font-size: 12px; font-weight: 600; color: var(--pd-primary); text-decoration: none; white-space: nowrap; }
.pd-readiness-list li a:hover { text-decoration: underline; }

/* ── Alerts ── */
.pd-alert-error {
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 6px; padding: .75rem 1rem;
    margin-bottom: 1rem; font-size: 13px; color: #991b1b;
    display: flex; gap: 8px; align-items: flex-start;
}
.pd-alert-success {
    background: #f0fdf4; border: 1px solid #6ee7b7;
    border-radius: 6px; padding: .75rem 1rem;
    margin-bottom: 1rem; font-size: 13px; color: #166534;
    display: flex; gap: 8px; align-items: center;
}
.pd-section-header {
    margin-bottom: 1.25rem;
}
.pd-section-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pd-text);
    margin: 0 0 4px;
}
.pd-section-header p {
    font-size: 13px;
    color: var(--pd-sub);
    margin: 0;
}

/* ── Admin badge ── */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media(max-width:640px) {
    .pd-dot { min-width: 50px; }
    .pd-dot .dot-label { font-size: 9.5px; }
    .ptype-grid { grid-template-columns: repeat(2,1fr); }
    .star-row .star-opt { padding: 6px 10px; font-size: 12px; }
}

/* ==========================================================================
   Shared auth card chrome (resources/views/auth/layout.blade.php) - the
   layout every auth page (login, register, password reset, OTP, 2FA) and
   the become-a-supplier pre-account steps (business-type, service-type,
   create-account) extend. Moved out of that file's inline <style> block -
   linked from themes/BC/Layout/app.blade.php like everything else here.
   ========================================================================== */
:root {
    --green:  #038a52;
    --orange: #f47c04;
    --text:   #111827;
    --muted:  #6b7280;
    --border: #e5e7eb;
    --bg-f:   #f9fafb;
    --r:      10px;
}

/* ── Auth page wrapper ───────────────────────── */
.auth-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: #eef0f3;
}

/* ── Card ───────────────────────────────────── */
.auth-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 40px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    border: 1px solid #e2e4e8;
}

/* ── Card logo (centered) ──────────────────── */
.auth-card-logo {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.auth-card-logo img { max-width: 46px; max-height: 46px; object-fit: contain; }
.auth-card-logo-text {
    font-size: 14px; font-weight: 800;
    color: var(--green); letter-spacing: -.3px; line-height: 1;
    text-align: center;
}
.auth-card-logo-text span { color: var(--orange); }

/* ── Card heading ───────────────────────────── */
.auth-card-title {
    font-size: 22px; font-weight: 700;
    color: var(--text);
    text-align: center;
    margin: 0 0 6px; letter-spacing: -.2px;
}
.auth-card-subtitle {
    font-size: 13.5px; color: var(--muted);
    text-align: center;
    margin: 0 0 26px; line-height: 1.6;
}

/* ── Form inputs ────────────────────────────── */
.auth-card .form-group { margin-bottom: 14px; position: relative; }
.auth-card .form-group label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--text); margin-bottom: 5px;
}
.auth-card .form-control,
.auth-card .bc-form-login .form-control,
.auth-card .bc-form-register .form-control {
    display: block; width: 100%;
    padding: 11px 14px 11px 44px;
    font-size: 14px; color: var(--text);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    transition: border-color .15s, box-shadow .15s, background .15s;
    line-height: 1.5; height: auto; -webkit-appearance: none;
}
.auth-card .form-control:focus,
.auth-card .bc-form-login .form-control:focus,
.auth-card .bc-form-register .form-control:focus {
    background: #fff;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(3,138,82,.1);
    outline: none;
}
.auth-card .form-control::placeholder { color: #9ca3af; font-weight: 400; }
.auth-card .form-control.is-invalid { border-color: #dc2626; }

/* ── Icon badge ─────────────────────────────── */
.auth-card .input-icon-badge {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    background: transparent; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 2; pointer-events: none;
    color: #9ca3af; font-size: 13px; transition: color .15s;
}
.auth-card .form-group:focus-within .input-icon-badge { color: var(--green); }

/* ── Password toggle ────────────────────────── */
.auth-card .has-pwd-toggle .form-control { padding-right: 42px; }
.auth-card .pwd-toggle-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0; cursor: pointer;
    color: #9ca3af; font-size: 14px; z-index: 3;
    transition: color .15s; line-height: 1;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.auth-card .pwd-toggle-btn:hover { color: var(--text); }

/* ── Remember me + forgot row ───────────────── */
.auth-card .d-flex.justify-content-between {
    display: flex; align-items: center; justify-content: space-between;
}
.auth-card .d-flex.justify-content-between label { font-size: 13px; color: var(--muted); }
.auth-card .d-flex.justify-content-between a {
    font-size: 13px; color: var(--green); font-weight: 500; text-decoration: none;
}
.auth-card .d-flex.justify-content-between a:hover { color: var(--orange); text-decoration: underline; }

/* ── Submit button ──────────────────────────── */
.auth-card .bc-form-login .btn.btn-primary.form-submit,
.auth-card .bc-form-register .btn.btn-primary.form-submit,
.auth-card .btn-submit {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important;
    padding: 13px 20px !important;
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--r) !important;
    font-size: 15px !important; font-weight: 600 !important;
    cursor: pointer; transition: background .18s !important;
    letter-spacing: .1px; line-height: 1.4;
    margin-top: 4px;
}
.auth-card .bc-form-login .btn.btn-primary.form-submit:hover,
.auth-card .bc-form-register .btn.btn-primary.form-submit:hover,
.auth-card .btn-submit:hover {
    background: var(--orange) !important;
    color: #fff !important;
}
.auth-card .icon-loading,
.auth-card .btn-submit .spinner-grow { display: none !important; }
.auth-card .bc-form-login .btn.btn-primary.form-submit.loading .icon-loading,
.auth-card .btn-submit.loading .spinner-grow { display: inline-block !important; }

/* ── "Or continue with" divider ─────────────── */
.auth-card .advanced p.text-center,
.auth-card .advanced p {
    font-size: 12.5px; color: #9ca3af;
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 12px;
}
.auth-card .advanced p.text-center::before,
.auth-card .advanced p.text-center::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Social login buttons ───────────────────── */
.auth-card .advanced .row { display: flex; gap: 10px; margin: 0; }
.auth-card .advanced .row > [class*="col"] { flex: 1; padding: 0; }
.btn_login_fb_link,
.btn_login_gg_link,
.btn_login_tw_link {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; padding: 10px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r) !important;
    background: #fff !important;
    color: var(--text) !important;
    text-decoration: none;
    transition: border-color .15s, background .15s;
    font-size: 18px !important;
}
.btn_login_fb_link:hover  { border-color: #1877F2 !important; background: #f0f4ff !important; }
.btn_login_gg_link:hover  { border-color: #ea4335 !important; background: #fff5f5 !important; }
.btn_login_tw_link:hover  { border-color: #000 !important; background: #f5f5f5 !important; }
.btn_login_fb_link .input-icon,
.btn_login_gg_link .input-icon,
.btn_login_tw_link .input-icon {
    position: static !important; transform: none !important;
    font-size: 18px; color: inherit !important;
}

/* ── Footer link (sign up / sign in) ────────── */
.auth-card .c-grey,
.auth-card .c-grey.f14 {
    font-size: 13.5px !important; color: var(--muted) !important;
    text-align: center; margin: 16px 0 0; display: block;
}
.auth-card .c-grey a {
    color: var(--green) !important; font-weight: 600; text-decoration: none;
}
.auth-card .c-grey a:hover { color: var(--orange) !important; text-decoration: underline; }

/* ── Terms row (register) ───────────────────── */
.auth-card .terms-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.auth-card .terms-row input[type="checkbox"] {
    width: 15px; height: 15px; margin-top: 2px;
    accent-color: var(--green); flex-shrink: 0; cursor: pointer;
}
.auth-card .terms-row a { color: var(--orange) !important; font-weight: 500; text-decoration: none; }
.auth-card .terms-row a:hover { text-decoration: underline; }

/* ── Alerts ─────────────────────────────────── */
.auth-card .alert {
    padding: 11px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 14px;
    display: flex; align-items: flex-start; gap: 8px;
    border: 1px solid transparent; line-height: 1.5;
}
.auth-card .alert i { margin-top: 1px; flex-shrink: 0; }
.auth-card .alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.auth-card .alert-danger  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.auth-card .alert-warning { background: #fefce8; color: #a16207; border-color: #fde68a; }

/* ── Validation ─────────────────────────────── */
.auth-card .invalid-feedback,
.auth-card .error.invalid-feedback,
.auth-card .message-error { display: block; font-size: 12px; color: #dc2626; margin-top: 3px; }

/* ── Auth footer (inside card) ──────────────── */
.auth-footer {
    text-align: center; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13.5px; color: var(--muted);
}
.auth-footer a { color: var(--green); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { color: var(--orange); text-decoration: underline; }

/* ── OTP input ──────────────────────────────── */
.otp-input {
    font-size: 24px; letter-spacing: 10px; text-align: center;
    font-weight: 700; padding-left: 20px !important;
}

/* ── Phone field (register) ─────────────────── */
.phone-field-wrap .iti { width: 100%; display: block; }
.phone-field-wrap .iti input.form-control { padding-left: 98px !important; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 500px) {
    .auth-card { padding: 28px 24px 24px; border-radius: 16px; }
    .auth-card-title { font-size: 20px; }
    .auth-wrap { padding: 32px 14px; }
}