/* ============================================================
   Booking auth modal — booking-flow skin.

   Loaded only when partials/bookify/signin-modal.htm is included with
   variant='bkflow', and every rule is scoped to .bkflow-auth. The legacy
   assets/bookify/styles/login/login.css still ships on these pages and is
   left completely untouched, so the pages that use the old look are
   unaffected.

   Presentation only. No id, class, handler, component alias, input name or
   payload referenced by the modal script is changed here.
   ============================================================ */

.bkflow-auth {
  --bka-bg: #0D0D0D;
  --bka-surface: #111111;
  --bka-surface-2: #141414;
  --bka-input: #191919;
  --bka-border: rgba(255, 255, 255, 0.08);
  --bka-border-strong: rgba(255, 255, 255, 0.14);
  --bka-fg: #FFFFFF;
  --bka-fg-muted: rgba(255, 255, 255, 0.62);
  --bka-fg-faint: rgba(255, 255, 255, 0.42);
  --bka-orange: #FF551A;
  --bka-orange-soft: #FFB186;
  --bka-radius: 14px;
  --bka-input-h: 50px;
  --bka-easing: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- 1. Backdrop --------------------------------------------------- */
/* display is driven by inline style from the page script, so only the
   presentation of the open state is defined here. */
.bkflow-auth.modal_shadow {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(4, 4, 4, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.bkflow-auth .login_container_section_modal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  padding: 32px 20px;
  margin: 0;
}

/* ---------- 2. Panel ------------------------------------------------------ */
.bkflow-auth .login_container_modal {
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.bkflow-auth .login_content_modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bka-surface-2) 0%, var(--bka-surface) 100%);
  border: 1px solid var(--bka-border);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62);
  color: var(--bka-fg);
  animation: bkaRise 260ms var(--bka-easing) both;
}

@keyframes bkaRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Each view is a plain <span> wrapper that the script shows and hides.
   Only the wrappers become columns — .signinp / .signupp also appear on
   buttons, links and paragraphs further down, which must keep their own
   display so jQuery .show() restores them correctly. */
.bkflow-auth > .login_container_section_modal span.signinp,
.bkflow-auth > .login_container_section_modal span.signupp {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---------- 3. Close ------------------------------------------------------ */
.bkflow-auth .login_close_btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bka-border);
  color: var(--bka-fg-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms var(--bka-easing), color 180ms var(--bka-easing);
}
.bkflow-auth .login_close_btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bka-fg);
}
[dir="rtl"] .bkflow-auth .login_close_btn { right: auto; left: 16px; }

/* ---------- 4. Headings --------------------------------------------------- */
.bkflow-auth .login_title,
.bkflow-auth .signin_title {
  margin: 0 44px 8px 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bka-fg);
  text-align: left;
  width: auto;
}
.bkflow-auth .login_description,
.bkflow-auth .signin_description {
  margin: 0 0 22px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--bka-fg-muted);
  text-align: left;
  width: auto;
}

.bkflow-auth .login_input_header,
.bkflow-auth .signin_input_header {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bka-fg-faint);
  text-align: left;
  width: auto;
}
.bkflow-auth .login_input_header + .login_input_header { margin-top: 14px; }

/* RTL: heading/description/label text starts from the right. The title's
   44px reserved margin follows the close button, which already moves to
   the left in RTL (see section 3) - without flipping it here the heading
   keeps empty space on the wrong side and can run under the button. */
[dir="rtl"] .bkflow-auth .login_title,
[dir="rtl"] .bkflow-auth .signin_title {
  margin: 0 0 8px 44px;
  text-align: right;
}
[dir="rtl"] .bkflow-auth .login_description,
[dir="rtl"] .bkflow-auth .signin_description,
[dir="rtl"] .bkflow-auth .login_input_header,
[dir="rtl"] .bkflow-auth .signin_input_header {
  text-align: right;
}

/* ---------- 5. Inputs ----------------------------------------------------- */
.bkflow-auth .login_input,
.bkflow-auth .signin_input {
  width: 100%;
  height: var(--bka-input-h);
  margin: 0 0 14px;
  padding: 0 16px;
  border-radius: var(--bka-radius);
  background: var(--bka-input);
  border: 1px solid var(--bka-border);
  color: var(--bka-fg);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  outline: none;
  transition: border-color 180ms var(--bka-easing), box-shadow 180ms var(--bka-easing), background 180ms var(--bka-easing);
}
.bkflow-auth .login_input::placeholder,
.bkflow-auth .signin_input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}
.bkflow-auth .login_input:hover,
.bkflow-auth .signin_input:hover { border-color: var(--bka-border-strong); }
.bkflow-auth .login_input:focus,
.bkflow-auth .signin_input:focus {
  border-color: var(--bka-orange);
  background: #1C1C1C;
  box-shadow: 0 0 0 3px rgba(var(--bk-glow, 255, 85, 26), 0.18);
}
.bkflow-auth .login_input.is-invalid,
.bkflow-auth .signin_input.is-invalid {
  border-color: #FF5A5F;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.16);
}

/* RTL: typed text and placeholders start from the right, matching the
   right-aligned labels above each field. This overrides the partial's
   dir="ltr" attribute on the markup itself (an author stylesheet rule
   always wins over the dir attribute), so the fix is CSS-only - no
   template change needed. Email/phone values are not reversed by this:
   direction only controls where the caret/placeholder starts and how
   the field's own punctuation renders, the Unicode bidi algorithm still
   renders Latin letters and digits left-to-right within the field, the
   same way every RTL site's email/phone inputs already work. */
[dir="rtl"] .bkflow-auth .login_input,
[dir="rtl"] .bkflow-auth .signin_input {
  direction: rtl;
  text-align: right;
}

/* Reserve room for the eye button on the field's trailing edge (right in
   LTR, left in RTL - logical property tracks both automatically) so a
   full password does not render underneath the icon in either
   direction. */
.bkflow-auth .passwordsign,
.bkflow-auth .passwordsign-confirm {
  padding-inline-end: 46px;
}

/* These three fields keep direction: ltr on their typed value (see the
   email/phone exception rule in event-b-bookify.htm/get-tickets.htm) so
   the value itself is never reversed. Their Arabic placeholder is a
   different string, mixing an Arabic word ("مثال:"/"أو") with an
   embedded Latin email or +country-code phone example, and rendering
   that sentence as an LTR paragraph is what made it look reordered:
   the leading Arabic word gets pushed to visually trail the Latin
   segment instead of leading it as a normal RTL sentence would.
   ::placeholder is its own box, so overriding it here does not touch
   the input's own direction/text-align (still LTR, unaffected) - only
   how the placeholder text itself is read. unicode-bidi: plaintext
   resolves the paragraph's base direction from the placeholder's own
   first strong character (Arabic, so RTL) rather than inheriting the
   input's LTR direction, so "مثال:" leads on the right and the Latin/
   digit examples stay correctly left-to-right within it. */
[dir="rtl"] .bkflow-auth #userSigninLogin::placeholder,
[dir="rtl"] .bkflow-auth #emailsign::placeholder,
[dir="rtl"] .bkflow-auth #phonesign::placeholder {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

.bkflow-auth button[aria-busy="true"] { opacity:.65; cursor:wait; pointer-events:none; }
.bkflow-auth button[aria-busy="true"]::before { content:""; display:inline-block; width:14px; height:14px; margin-inline-end:8px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:bkaSpin .7s linear infinite; vertical-align:-2px; }
@keyframes bkaSpin { to { transform:rotate(360deg); } }

.bkflow-auth .bookify-booking-otp { position:relative; display:flex; flex-direction:column; gap:13px; width:100%; }
.bkflow-auth .bookify-booking-otp[hidden] { display:none; }
.bkflow-auth .bookify-booking-otp h2 { margin:0 44px 0 0; color:var(--bka-fg); font-size:24px; font-weight:800; }
.bkflow-auth .bookify-booking-otp-message,.bkflow-auth .bookify-booking-otp-destination { margin:0; color:var(--bka-fg-muted); font-size:13px; line-height:1.6; }
.bkflow-auth .bookify-booking-otp label { color:var(--bka-fg-faint); font-size:12px; font-weight:700; }
.bkflow-auth #bookify-booking-otp-input { width:100%; height:52px; border:1px solid var(--bka-border); border-radius:var(--bka-radius); background:var(--bka-input); color:var(--bka-fg); text-align:center; font-size:22px; letter-spacing:.35em; }
.bkflow-auth .bookify-booking-auth-error { margin:0; color:#ff8c8f; font-size:12px; line-height:1.5; }
.bkflow-auth .bookify-booking-otp-resend,.bkflow-auth .bookify-booking-otp-back { border:0; background:transparent; color:var(--bka-orange-soft); font-family:inherit; font-size:12px; font-weight:700; line-height:1.4; cursor:pointer; }

.bookify-booking-alert { width:min(430px,calc(100vw - 32px))!important; padding:28px 24px!important; border:1px solid rgba(var(--bk-glow,255,85,26),.22)!important; border-radius:18px!important; background:#fff!important; color:#171717!important; box-shadow:0 24px 70px rgba(0,0,0,.3)!important; font-family:'Montserrat',sans-serif!important; }
.bookify-booking-alert__primary { min-height:44px; padding:0 22px; border:0; border-radius:9px; background:var(--bk-orange,#ff551a); color:#fff; font:700 13px/1 'Montserrat',sans-serif; }
[dir="rtl"] .bookify-booking-alert { direction:rtl; text-align:right; font-family:'SST Arabic','Montserrat',sans-serif!important; }
[dir="rtl"] .bookify-booking-alert__primary { font-family:'SST Arabic','Montserrat',sans-serif; }
[dir="rtl"] .bkflow-auth .bookify-booking-otp h2 { margin:0 0 0 44px; text-align:right; }
[dir="rtl"] .bkflow-auth .bookify-booking-otp-message,[dir="rtl"] .bkflow-auth .bookify-booking-otp label { text-align:right; }

/* Password reveal. The button is absolutely positioned by the partial's own
   inline style block; only the look is adjusted. */
.bkflow-auth .eye_ref {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 0;
}
.bkflow-auth .login_input_eye {
  position: absolute;
  top: calc(-1 * (var(--bka-input-h) + 8px));
  right: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms var(--bka-easing), background 160ms var(--bka-easing);
}
.bkflow-auth .login_input_eye:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.bkflow-auth .login_input_eye img { width: 22px !important; height: auto !important; }
[dir="rtl"] .bkflow-auth .login_input_eye { right: auto; left: 8px; }

/* ---------- 6. Phone + country code --------------------------------------
   The country picker is a sibling that follows #phonesign in the DOM, and
   legacy CSS positions both it and its trigger absolutely, which sent the
   trigger to the top of the panel once the panel became the containing
   block. Both are put back in flow here and the whole group is pulled up
   over the input with a negative margin, leaving no space behind. */
.bkflow-auth .signin_country_number {
  padding-left: 142px;
}
[dir="rtl"] .bkflow-auth .signin_country_number { padding-left: 16px; padding-right: 142px; }

/* Stays in flow: an absolutely positioned child of a flex column loses its
   DOM static position and snaps to the top of the container. Instead the box
   is collapsed to zero height and lifted over the input with a negative top
   margin, with an equal bottom margin so the Password label below it does
   not move at all. */
.bkflow-auth .signin_country {
  position: relative;
  z-index: 3;
  width: auto;
  height: 0;
  margin-top: calc(-1 * (var(--bka-input-h) + 8px));
  margin-bottom: calc(var(--bka-input-h) + 8px);
  margin-left: 6px;
  margin-right: 0;
  padding: 0;
  background: none;
  border: 0;
}
[dir="rtl"] .bkflow-auth .signin_country { margin-left: 0; margin-right: 6px; }

.bkflow-auth .signin_country_menu {
  position: relative;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  /* signin.css sets min-height 50px (40px on mobile), which outranks height. */
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bka-border);
  color: var(--bka-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms var(--bka-easing);
}
.bkflow-auth .signin_country_menu::after { margin-left: 2px; opacity: 0.6; }
[dir="rtl"] .bkflow-auth .signin_country_menu::after { margin-left: 0; margin-right: 2px; }
.bkflow-auth .signin_country_menu:hover { background: rgba(255, 255, 255, 0.1); color: var(--bka-fg); }
/* The flag carries inline width/height attributes from the partial. */
.bkflow-auth .signin_flag {
  width: 24px !important;
  height: 13px !important;
  margin: 0;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 auto;
}

.bkflow-auth .category_menu_style {
  min-width: 210px;
  padding: 6px;
  border-radius: 14px;
  background: var(--bka-surface-2);
  border: 1px solid var(--bka-border) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
}
.bkflow-auth .category_menu_style li { list-style: none; }
.bkflow-auth .category_menu_style .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--bka-fg);
  font-size: 13.5px;
  font-weight: 500;
}
.bkflow-auth .category_menu_style .dropdown-item:hover,
.bkflow-auth .category_menu_style .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bka-fg);
}
.bkflow-auth .signin_ment_item { color: inherit; }

/* ---------- 7. Validation feedback --------------------------------------- */
.bkflow-auth #feedback:empty { display: none; }
.bkflow-auth #feedback {
  margin: -4px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #FF8A90;
}
.bkflow-auth #feedback p { margin: 0; }
.bkflow-auth #feedback .error { color: #FF8A90; }
[dir="rtl"] .bkflow-auth #feedback { text-align: right; }

/* ---------- 8. Buttons ---------------------------------------------------- */
.bkflow-auth .login_btn {
  width: 100%;
  height: 52px;
  margin: 6px 0 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--bka-radius);
  background: var(--bka-orange);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms var(--bka-easing), box-shadow 200ms var(--bka-easing), filter 160ms var(--bka-easing);
}
.bkflow-auth .login_btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(var(--bk-glow, 255, 85, 26), 0.3);
}
.bkflow-auth .login_btn:active { transform: scale(0.985); }

/* Guest checkout is a real alternative, not the headline action. */
.bkflow-auth .guestlogin.login_btn {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--bka-border-strong);
  color: var(--bka-fg-muted);
  font-weight: 600;
  box-shadow: none;
}
.bkflow-auth .guestlogin.login_btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bka-fg);
  filter: none;
  box-shadow: none;
}

/* Guest confirmation and ticket reminder stay inside the auth surface. */
.bkflow-auth .bookify-auth-standard[hidden],
.bkflow-auth .bookify-guest-state[hidden] { display: none !important; }
.bkflow-auth .bookify-auth-standard { display: contents; }
.bkflow-auth .bookify-guest-state {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.bkflow-auth .bookify-guest-title {
  margin: 0;
  color: var(--bka-fg);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}
.bkflow-auth .bookify-guest-message {
  margin: 0;
  color: var(--bka-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}
.bkflow-auth .bookify-guest-error {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 138, 144, 0.35);
  border-radius: 10px;
  background: rgba(255, 58, 68, 0.1);
  color: #FF8A90;
  font-size: 13px;
  font-weight: 600;
}
.bkflow-auth .bookify-guest-error[hidden] { display: none; }
.bkflow-auth .bookify-guest-actions {
  display: flex;
  gap: 10px;
}
.bkflow-auth .bookify-guest-actions > button { flex: 1 1 0; }
.bkflow-auth .bookify-guest-back {
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--bka-border-strong);
  border-radius: var(--bka-radius);
  background: transparent;
  color: var(--bka-fg-muted);
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.bkflow-auth .bookify-guest-back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bka-fg);
}
.bkflow-auth .bookify-guest-confirm.login_btn { margin-top: 0; }
.bkflow-auth .bookify-guest-confirm:disabled {
  cursor: wait;
  opacity: 0.65;
}
.bkflow-auth .bookify-guest-close {
  position: absolute;
  top: -6px;
  right: 0;
}
[dir="rtl"] .bkflow-auth .bookify-guest-close { right: auto; left: 0; }

/* RTL: guest-confirmation title/message follow the same right-aligned
   pattern as the standard login/signup view. */
[dir="rtl"] .bkflow-auth .bookify-guest-state { text-align: right; }

.bkflow-auth .login_horizontal_line {
  width: 100%;
  height: 1px;
  margin: 20px 0 0;
  background: var(--bka-border);
  border: 0;
}

.bkflow-auth .login_dont_have_account {
  margin: 16px 0 10px;
  width: 100%;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bka-fg-muted);
  text-align: center;
}

.bkflow-auth .login_create_acount_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 0;
  border-radius: var(--bka-radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bka-border-strong);
  color: var(--bka-orange-soft);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 170ms var(--bka-easing), border-color 170ms var(--bka-easing);
}
.bkflow-auth .login_create_acount_btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 177, 134, 0.45);
  color: var(--bka-orange-soft);
}

.bkflow-auth .login_forgot_password {
  align-self: flex-end;
  margin: -4px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bka-orange-soft);
  text-decoration: none;
  cursor: pointer;
}

/* ---------- 9. Focus visibility ------------------------------------------ */
.bkflow-auth a:focus-visible,
.bkflow-auth button:focus-visible,
.bkflow-auth input:focus-visible,
.bkflow-auth [role="button"]:focus-visible {
  outline: 2px solid var(--bka-orange-soft);
  outline-offset: 2px;
}

/* ---------- 10. Mobile: bottom sheet ------------------------------------- */
@media (max-width: 640px) {
  .bkflow-auth .login_container_section_modal {
    align-items: flex-end;
    padding: 0;
  }
  .bkflow-auth .login_container_modal { max-width: none; }
  .bkflow-auth .login_content_modal {
    /* login.css caps this at 380px / 90% on mobile; a bottom sheet is
       edge-to-edge. */
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    max-height: 94vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: bkaSheet 280ms var(--bka-easing) both;
  }
  @keyframes bkaSheet {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* Grab handle so the sheet reads as dismissible. */
  .bkflow-auth .login_content_modal::before {
    content: "";
    position: sticky;
    top: 0;
    align-self: center;
    width: 40px;
    height: 4px;
    margin: -8px 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    flex: 0 0 auto;
  }

  .bkflow-auth .login_title,
  .bkflow-auth .signin_title { font-size: 21px; }
  .bkflow-auth .login_description,
  .bkflow-auth .signin_description { margin-bottom: 18px; font-size: 13px; }

  /* Comfortable touch targets. 16px keeps iOS Safari from zooming on focus. */
  .bkflow-auth { --bka-input-h: 52px; }
  .bkflow-auth .login_input,
  .bkflow-auth .signin_input { font-size: 16px; }
  .bkflow-auth .login_btn { height: 54px; }
  .bkflow-auth .login_close_btn { top: 14px; right: 14px; width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .bkflow-auth .login_content_modal { animation: none; }
}