/* shipaLurex — the booking wizard.
   Shared chrome, .wrap and the section system live in base.css; Tailwind utilities stay in the markup.
   Order: page frame → cards → fields → step tabs → buttons → photo card → payment → narrow screens. */

/* ---- page frame ---- */
.bk-page { background: #fafafa; border-bottom: 1px solid #ececef; padding: 26px 0 36px; }
.bk-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
.bk-h1 { margin-top: 12px; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.08;
         letter-spacing: -.03em; font-weight: 700; }
@media (min-width: 1024px) { .bk-page { padding: 34px 0 44px; } }

/* ---- cards ---- */
.bk-card { border: 1px solid #ececef; border-top: 3px solid #ffc400; border-radius: 20px; background: #fff;
           padding: 18px 16px 16px; box-shadow: 0 34px 70px -52px rgba(16,19,23,.42); }
.bk-done { padding: 0; }
.bk-done > div { padding: 16px 18px 18px; }
@media (min-width: 640px) { .bk-done > div { padding: 18px 22px 20px; } }
.bk-aside-card { border: 1px solid #ececef; border-radius: 16px; background: #fff; padding: 16px 16px 17px; }
.bk-rail { display: grid; gap: 14px; align-content: start; }
@media (min-width: 640px) { .bk-card { padding: 20px 22px 18px; } }
@media (min-width: 1024px) { .bk-rail { position: sticky; top: 92px; } }

/* ---- field labels and inputs ---- */
.bk-lab { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; color: #101317; }
.bk-in { width: 100%; height: 44px; border: 1px solid #ececef; border-radius: 10px; background: #fff;
         padding: 10px 12px; font-size: 14.5px; color: #101317; outline: none;
         transition: border-color .15s, box-shadow .15s; }
textarea.bk-in { height: auto; }
.bk-in:focus { border-color: #d40511; box-shadow: 0 0 0 3px rgba(255,196,0,.35); }
.bk-in::placeholder { color: rgba(91,98,112,.6); }

/* ---- the four steps ---- */
.bk-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-step.on { display: block; }
.bk-step > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bk-tab { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-bottom: 2px solid #ececef;
          background: none; padding: 6px 4px 8px; color: #5b6270; text-align: left; font-size: 13.5px; cursor: default; }
.bk-tab b { flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 999px;
            background: #ececef; color: #5b6270; font: 700 11px/1 ui-monospace, SFMono-Regular, monospace; }
.bk-tab > span > span:last-child { display: none; }
.bk-tab.ready { color: #101317; cursor: pointer; }
.bk-tab.ready b { background: #ffc400; color: #101317; }
.bk-tab.on { color: #101317; border-bottom-color: #d40511; cursor: pointer; }
.bk-tab.on b { background: #d40511; color: #fff; }
@media (min-width: 900px) { .bk-tab > span > span:last-child { display: block; } }

/* ---- buttons, links, the row they sit in ---- */
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
          padding: 11px 18px; font-size: 14.5px; font-weight: 600; background: #101317; color: #fff;
          transition: background-color .15s; }
.bk-btn:hover { background: #000; }
.bk-btn-red { background: #d40511; }
.bk-btn-red:hover { background: #b8040f; }
.bk-link { font-size: 13.5px; font-weight: 500; color: #5b6270; }
.bk-link:hover { color: #101317; }
.bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           margin-top: 16px; padding-top: 13px; border-top: 1px solid #ececef; }

/* ---- photo card in the rail ---- */
.bk-shot { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; background: #080c14; }
.bk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-shot p { position: absolute; inset: auto 0 0; margin: 0; padding: 24px 12px 11px; color: #fff;
             font-size: 12.5px; line-height: 1.35; background: linear-gradient(to top, rgba(6,9,15,.9), rgba(6,9,15,0)); }
.bk-shot b { color: #ffc400; }

/* ---- payment choices ---- */
.bk-pay { border: 1px solid #ececef; }
.bk-pay.on { border-color: #101317; background: #fff6d6; }
.bk-pay:hover { border-color: rgba(16,19,23,.3); }

/* ---- narrow screens: action bar stacks, primary button goes full width ---- */
@media (max-width: 540px) {
  .bk-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .bk-foot > * { width: 100%; }
  .bk-foot > div { display: flex; flex-direction: column-reverse; gap: 10px; }
  .bk-foot > div > * { width: 100%; }
  .bk-foot .bk-btn { justify-content: center; }
  .bk-foot .bk-link { display: block; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
}