/*
 * Registration for a travel agency: one page, two columns.
 *
 * Same palette and type as the landing page (welcome.blade.php): warm paper,
 * deep teal, coral for the one action. The form is still validated by
 * login.js (data-wizard="false"), so field names, ids and the .input-group
 * wrapper the validator's errorPlacement looks for are all kept.
 *
 * vendor.css carries bootstrap and select2; the !important borders below are
 * what it takes to win against those.
 */

:root {
    --rt-paper: #fbf8f2;
    --rt-paper-2: #f3eee4;
    --rt-line: #e6dfd2;
    --rt-line-2: #d6cdbd;
    --rt-ink: #101828;
    --rt-ink-2: #33415c;
    --rt-mute: #6b7280;
    --rt-faint: #9aa3b2;
    --rt-teal: #0e7c7b;
    --rt-teal-d: #0a5c5b;
    --rt-teal-l: #d9f0ee;
    --rt-coral: #ef6340;
    --rt-coral-d: #e3532f;
    --rt-coral-l: #fde6de;
    --rt-gold-l: #fbf0d4;
    --rt-red: #b91c1c;
    --rt-display: "Fraunces", Georgia, serif;
    --rt-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --rt-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px rgba(16, 24, 40, .07);
}

html[lang="bn"] {
    --rt-display: "Noto Serif Bengali", "Kalpurush", "SolaimanLipi", "Nirmala UI", "Vrinda", Georgia, serif;
    --rt-sans: "Hind Siliguri", "Kalpurush", "SolaimanLipi", "Nirmala UI", "Vrinda", "Segoe UI", sans-serif;
}

/* The auth layout paints html with a gradient and pins white links to the
   viewport corners. Repaint, unpad, hide - the page lays its own top bar. */
body.reg-page { background: var(--rt-paper) !important; font-family: var(--rt-sans); }
.reg-flush { padding: 0 !important; }
.reg-flush > .row { margin: 0; }
.reg-flush > .row > .tw-absolute { display: none; }

/* ------------------------------------------------------------------ page */

.rt {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px 80px;
    font-family: var(--rt-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--rt-ink-2);
}
html[lang="bn"] .rt { line-height: 1.75; }

.rt a { text-decoration: none; }

/* --------------------------------------------------------------- top bar */

.rt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 34px;
}

.rt-brand { display: flex; align-items: center; gap: 10px; }
.rt-brand .tp-logo-icon { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #fff; box-shadow: var(--rt-sh); }
.rt-brand .tp-logo { height: 64px; width: auto; }
.rt-brand b { display: block; font-family: var(--rt-display); font-size: 17px; color: var(--rt-ink); line-height: 1; }
html[lang="bn"] .rt-brand b { font-family: var(--rt-sans); font-weight: 800; }
.rt-brand small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-teal); }
html[lang="bn"] .rt-brand small { letter-spacing: 0; }

.rt-bar-right { display: flex; align-items: center; gap: 10px; }

.rt-lang {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--rt-line-2); background: #fff;
    font-size: 12.5px; font-weight: 800; color: var(--rt-ink);
}
.rt-lang svg { width: 14px; height: 14px; color: var(--rt-teal); }
.rt-lang:hover { border-color: var(--rt-teal); color: var(--rt-ink); }

.rt-btn-line {
    display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--rt-line-2); font-size: 13px; font-weight: 700; color: var(--rt-ink);
}
.rt-btn-line:hover { background: #fff; color: var(--rt-ink); }

/* ---------------------------------------------------------------- layout */

.rt-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.rt-aside { position: sticky; top: 24px; }

/* ------------------------------------------------------------ left column */

.rt-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: #fff; border: 1px solid var(--rt-line);
    font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rt-teal-d);
    box-shadow: var(--rt-sh);
}
html[lang="bn"] .rt-eyebrow { letter-spacing: 0; font-size: 12.5px; }
.rt-eyebrow i { width: 20px; height: 20px; border-radius: 50%; background: var(--rt-teal-l); color: var(--rt-teal); display: grid; place-items: center; }
.rt-eyebrow i svg { width: 12px; height: 12px; }

.rt-aside h1 {
    margin: 18px 0 12px;
    font-family: var(--rt-display);
    font-size: 34px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
    color: var(--rt-ink);
}
html[lang="bn"] .rt-aside h1 { font-weight: 700; line-height: 1.3; letter-spacing: 0; font-size: 31px; }

.rt-aside > p { margin: 0; font-size: 15px; color: var(--rt-mute); }

/* the locked business type */
.rt-preset {
    margin-top: 26px;
    padding: 18px 18px 16px;
    background: #fff;
    border: 1px solid var(--rt-line);
    border-radius: 18px;
    box-shadow: var(--rt-sh);
}

.rt-preset-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-faint); }
html[lang="bn"] .rt-preset-label { letter-spacing: 0; font-size: 12px; }

.rt-preset-head { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rt-preset-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--rt-ink); color: #fff; display: grid; place-items: center; }
.rt-preset-ico svg { width: 20px; height: 20px; }
.rt-preset-name { font-size: 15.5px; font-weight: 800; color: var(--rt-ink); line-height: 1.3; }
.rt-preset-auto {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--rt-teal-l); color: var(--rt-teal-d);
    font-size: 11.5px; font-weight: 800;
}
.rt-preset-auto svg { width: 11px; height: 11px; stroke-width: 3; }

.rt-preset-blurb { margin: 12px 0 0; font-size: 13.5px; color: var(--rt-mute); }

.rt-preset ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--rt-line-2); display: grid; gap: 8px; }
.rt-preset li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--rt-ink-2); }
.rt-preset li i { width: 20px; height: 20px; border-radius: 50%; background: var(--rt-teal-l); color: var(--rt-teal-d); display: grid; place-items: center; margin-top: 1px; }
.rt-preset li i svg { width: 11px; height: 11px; stroke-width: 2.8; }

.rt-preset-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rt-line-2); font-size: 12.5px; color: var(--rt-mute); }

.rt-proof { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rt-proof li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--rt-mute); }
.rt-proof svg { width: 14px; height: 14px; color: var(--rt-teal); stroke-width: 2.6; }

/* ------------------------------------------------------------- the form */

.rt-form {
    background: #fff;
    border: 1px solid var(--rt-line);
    border-radius: 24px;
    box-shadow: var(--rt-sh);
    padding: 8px 32px 30px;
}

.rt-errors {
    margin: 22px 0 0;
    padding: 14px 16px;
    background: var(--rt-coral-l);
    border: 1px solid #f7c5b5;
    border-radius: 12px;
    color: var(--rt-red);
    font-size: 14px;
}
.rt-errors b { display: block; margin-bottom: 4px; }
.rt-errors ul { margin: 0; padding-left: 18px; }

.rt-sec { padding: 28px 0 6px; border-top: 1px solid var(--rt-line); }
.rt-sec:first-of-type { border-top: 0; }

.rt-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.rt-num {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--rt-paper-2); color: var(--rt-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 800;
}
.rt-sec-head h2 { margin: 2px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--rt-ink); line-height: 1.3; }
html[lang="bn"] .rt-sec-head h2 { letter-spacing: 0; }
.rt-sec-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--rt-mute); }

/* fields */
/* flex, not floats: a taller column (select2, help text) must not push the next one sideways */
.rt-form .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.rt-form .row::before, .rt-form .row::after { display: none; }
.rt-form .row > [class^="col-"], .rt-form .row > [class*=" col-"] { padding-left: 8px; padding-right: 8px; }
.rt-form .form-group { margin-bottom: 16px; }
.rt-form .form-group > label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--rt-ink-2); }
.rt-form .form-group > label .req { color: var(--rt-coral); }
.rt-help { display: block; margin-top: 5px; font-size: 12.5px; color: var(--rt-faint); }

/* keep .input-group for the validator, drop bootstrap's welded addon */
.rt-form .input-group { display: block; position: relative; width: 100%; }
.rt-form .input-group > .input-group-addon { display: none; }

.rt-form .form-control,
.rt-form .input-group > .form-control:first-child,
.rt-form .input-group > .form-control:last-child {
    width: 100%; height: 44px; padding: 0 13px;
    font-family: var(--rt-sans); font-size: 15px; color: var(--rt-ink);
    background: var(--rt-paper);
    border: 1px solid var(--rt-line) !important;
    border-radius: 10px; box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.rt-form .form-control:hover { border-color: var(--rt-line-2) !important; }
.rt-form .form-control:focus { background: #fff; border-color: var(--rt-teal) !important; box-shadow: 0 0 0 3px rgba(14, 124, 123, .14); }
.rt-form .form-control::placeholder { color: var(--rt-faint); }

/* select2 draws its own box */
.rt-form .select2-container { width: 100% !important; }
.rt-form .select2-container--default .select2-selection--single { height: 44px; background: var(--rt-paper); border: 1px solid var(--rt-line) !important; border-radius: 10px; }
.rt-form .select2-container--default.select2-container--focus .select2-selection--single,
.rt-form .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--rt-teal) !important; background: #fff; }
.rt-form .select2-container--default .select2-selection--single .select2-selection__rendered { height: 42px; padding-left: 13px; line-height: 42px; font-size: 15px; color: var(--rt-ink); }
.rt-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--rt-faint); }
.rt-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-dropdown { border-color: var(--rt-line) !important; border-radius: 10px; font-family: var(--rt-sans); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--rt-teal) !important; }

/* the logo picker: a plain file input, dashed like a drop zone */
.rt-form .rt-file {
    display: block; width: 100%; height: 44px; padding: 10px 12px;
    font-family: var(--rt-sans); font-size: 13.5px; color: var(--rt-mute);
    background: var(--rt-paper); border: 1px dashed var(--rt-line-2); border-radius: 10px;
    cursor: pointer;
}
.rt-form .rt-file:hover { border-color: var(--rt-teal); }
.rt-form .rt-file::file-selector-button {
    margin: -4px 10px -4px -6px; padding: 4px 12px;
    border: 1px solid var(--rt-line); border-radius: 8px;
    background: #fff; color: var(--rt-ink); font: inherit; font-weight: 700; cursor: pointer;
}

/* validation */
.rt-form label.error { display: block; margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--rt-red); }
.rt-form .form-control.error { border-color: var(--rt-red) !important; }

/* terms */
.rt-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; color: var(--rt-ink-2); cursor: pointer; }
.rt-check input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--rt-teal); }
.rt-check a { color: var(--rt-teal); font-weight: 700; }

/* ------------------------------------------------------------- stepper */

.rt-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 24px 0 0; padding: 0; list-style: none;
}
.rt-steps li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--rt-line); background: var(--rt-paper);
    color: var(--rt-mute); cursor: default; transition: background .15s, border-color .15s;
}
.rt-steps li.done { cursor: pointer; }
.rt-steps li.done:hover { border-color: var(--rt-teal); }
.rt-steps li.on { background: var(--rt-ink); border-color: var(--rt-ink); color: #fff; }
.rt-steps-n {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--rt-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 800;
}
.rt-steps li.on .rt-steps-n { background: var(--rt-coral); color: #fff; }
.rt-steps li.done .rt-steps-n { background: var(--rt-teal); color: #fff; }
.rt-steps-t { font-size: 13px; font-weight: 700; line-height: 1.25; }

.rt-progress { height: 4px; margin: 10px 0 0; border-radius: 2px; background: var(--rt-paper-2); overflow: hidden; }
.rt-progress i { display: block; height: 100%; background: var(--rt-teal); border-radius: 2px; transition: width .4s cubic-bezier(.22, 1, .36, 1); }

/* only the active step once the script is running; all steps without it */
.rt-form.rt-js .rt-sec[data-step] { display: none; }
.rt-form.rt-js .rt-sec[data-step].on { display: block; animation: rtIn .35s cubic-bezier(.22, 1, .36, 1); }
.rt-form.rt-js .rt-sec[data-step].on { border-top: 0; padding-top: 24px; }
@keyframes rtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rt-form .select2.rt-bad .select2-selection--single { border-color: var(--rt-red) !important; }

/* submit / step navigation */
.rt-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rt-line); }
.rt-nav { display: flex; align-items: center; gap: 10px; }
.rt-submit button {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 26px; border: 0; border-radius: 999px;
    font-family: var(--rt-sans); font-size: 15px; font-weight: 800; color: #fff;
    background: var(--rt-coral); box-shadow: 0 8px 22px rgba(239, 99, 64, .35);
    cursor: pointer; transition: transform .2s, background .15s;
}
.rt-submit button svg { width: 16px; height: 16px; }
.rt-submit button:hover { background: var(--rt-coral-d); transform: translateY(-1px); }
.rt-submit button:active { transform: translateY(0); }
.rt-submit button.rt-next { background: var(--rt-ink); box-shadow: 0 8px 20px rgba(16, 24, 40, .18); }
.rt-submit button.rt-next:hover { background: #000; }
.rt-submit button.rt-back { background: transparent; color: var(--rt-ink); border: 1px solid var(--rt-line-2); box-shadow: none; padding: 0 20px; }
.rt-submit button.rt-back:hover { background: var(--rt-paper); }
/* hidden until the script decides; without JS all three steps show and only Submit is needed */
.rt-form:not(.rt-js) .rt-back, .rt-form:not(.rt-js) .rt-next { display: none; }
.rt-submit-note { font-size: 13.5px; color: var(--rt-mute); }
.rt-submit-note a { font-weight: 800; color: var(--rt-teal); }
.rt-required { margin: 10px 0 0; font-size: 12.5px; color: var(--rt-faint); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
    .rt-grid { grid-template-columns: 1fr; gap: 26px; }
    .rt-aside { position: static; }
    .rt-aside h1 { font-size: 28px; }
    .rt-form { padding: 4px 20px 22px; border-radius: 18px; }
}

@media (max-width: 600px) {
    .rt { padding: 16px 16px 56px; }
    .rt-bar { padding-bottom: 24px; }
    .rt-bar-right .rt-btn-line { display: none; }
    .rt-steps { gap: 6px; }
    .rt-steps li { padding: 8px; justify-content: center; }
    .rt-steps li:not(.on) .rt-steps-t { display: none; }
    .rt-submit { display: block; }
    .rt-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    .rt-nav .rt-go { grid-column: 1 / -1; }
    .rt-nav .rt-back:first-child:last-child, .rt-nav .rt-next:first-child { grid-column: 1 / -1; }
    .rt-submit button { width: 100%; justify-content: center; }
    .rt-submit-note { display: block; text-align: center; }
}