/*
 * Yerebatan online ticket widget.
 *
 * Two sources, deliberately kept apart:
 *   - LAYOUT (element order, box sizes, spacing, breakpoints) reproduces the vendor widget's
 *     captured stylesheet (mars-styles.css), so the flow keeps its current shape. The
 *     two-column breakpoint below is the vendor's own (min-width: 1024px).
 *   - LOOK (colours, typography, buttons, form controls, corners) is the Miras design
 *     system's (miras-turkiye/claude-design tokens, as the Miras-themed museum site uses them):
 *     a dark ground for a service screen, one turquoise accent for interaction, the kahve
 *     brown for the primary action and the card bar, terracotta for icons, square corners
 *     everywhere. Only the look is Miras: no Miras or Muze mark appears, the site is Yerebatan's.
 *
 * Miras values used here:
 *   ground #000 (siyah)          panel #151515 (antrasit)       text #fff
 *   secondary rgba(255,255,255,.64)       hairline rgba(255,255,255,.14)
 *   accent #5FF7FA (turkuaz)     primary #60332A (kahve), hover #4E2A22   icon #975A4D (terrakota)
 *   type "Plus Jakarta Sans" 200-800 (variable), reference numbers "IBM Plex Mono" 500
 *   corner radius 0, card left bar 6px kahve, container 1240px (the vitrin standard)
 *
 * The fonts are served from this host (widget/fonts, SIL OFL 1.1, licences next to them):
 * a remote font would make every visitor's browser call a third-party host.
 *
 * Adaptations, because the system does not cover them:
 *   - error red: Miras has none, so #E5484D stays.
 *   - success and the consent tick: Miras has no green, so they take the accent.
 *   - input field rgba(255,255,255,.06): one step above the panel so a field reads as editable.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans-wght.ttf") format("truetype-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Miras palette (miras-turkiye/claude-design/tokens) */
    --yb-ground: #000000;
    --yb-primary: #60332a; /* kahve: the primary action */
    --yb-primary-hover: #4e2a22; /* kahve, one step darker */
    --yb-accent: #5ff7fa; /* turkuaz: the single accent, interaction and selection */
    --yb-accent-soft: rgba(95, 247, 250, 0.1);
    --yb-focus: #5ff7fa;
    --yb-link: #5ff7fa;
    --yb-icon: #975a4d; /* terrakota: icons only, never text */
    --yb-card: #151515;
    --yb-card-bar: #60332a;
    --yb-surface: rgba(255, 255, 255, 0.06);
    --yb-border: rgba(255, 255, 255, 0.14);
    --yb-border-strong: rgba(255, 255, 255, 0.24);
    --yb-hr: rgba(255, 255, 255, 0.14);
    --yb-black: #000000;
    --yb-white: #ffffff;
    --yb-text: #ffffff;
    --yb-text-light: rgba(255, 255, 255, 0.64);
    --yb-text-lighter: rgba(255, 255, 255, 0.5);
    --yb-red: #e5484d;
    --yb-green: #5ff7fa; /* no green in the system: success takes the accent */

    --yb-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --yb-font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --yb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --yb-radius-btn: 0;
    --yb-radius-card: 0;
    --yb-radius-control: 0;
    --yb-card-shadow: none;

    --yb-container: 1240px;
    --yb-page-top: 32px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid var(--yb-hr);
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--yb-font);
    background-color: var(--yb-ground);
}

body {
    margin: 0;
    line-height: inherit;
    font-family: var(--yb-font);
    -webkit-font-smoothing: antialiased;
    background-color: var(--yb-ground);
    color: var(--yb-text);
}

/* Every widget view (Tickets, Refund, PaymentResult) renders a single <main> as its root -
   this is also the element widget-frame.js measures (`document.querySelector("main").scrollHeight`)
   for the iframe auto-resize postMessage, so the top gap has to live here rather than on body,
   or the parent iframe would not be told about the extra height. */
main {
    padding-top: var(--yb-page-top);
}

@media (max-width: 480px) {
    main {
        --yb-page-top: 20px;
    }
}

h1,
h2,
h3 {
    font-size: inherit;
    margin: 0;
    font-family: var(--yb-font);
    font-weight: 600;
    letter-spacing: normal;
    color: var(--yb-text);
}

/* Section and step headings in the system's sans at its heading weight; h3 stays lighter so
   a ticket name does not compete with the step title it sits under. */
h1,
h2,
.summary__title {
    font-family: var(--yb-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
}

strong,
b {
    font-weight: 600;
}

button,
input,
select {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

img,
svg {
    display: block;
    vertical-align: middle;
    max-width: 100%;
}

input::placeholder {
    opacity: 1;
    color: var(--yb-text-lighter);
}

[hidden] {
    display: none !important;
}

.font-sans {
    font-family: var(--yb-font);
}

/* ---------------------------------------------------------------- shared bits */

.yb-card,
.card {
    border-radius: var(--yb-radius-card);
    background-color: var(--yb-card);
    box-shadow: var(--yb-card-shadow);
    border: 1px solid var(--yb-border);
    /* The system's card: an anthracite panel with a kahve bar down its left edge. */
    border-left: 6px solid var(--yb-card-bar);
}

.yb-card {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .yb-card {
        padding: 1.75rem;
    }
}

/* Primary action, the system's Button: a filled kahve block with white text, one step darker
   on hover, square corners. */
.gold-btn,
.summary__pay {
    width: 100%;
    border-radius: var(--yb-radius-btn);
    padding: 0.75rem 1.5rem;
    min-height: 48px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--yb-white);
    background: var(--yb-primary);
    border: 1px solid var(--yb-primary);
    transition-property: color, background-color, border-color, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}

.gold-btn:hover:not(:disabled),
.summary__pay:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--yb-primary-hover);
    border-color: var(--yb-primary-hover);
    color: var(--yb-white);
}

.gold-btn:focus-visible,
.summary__pay:focus-visible {
    outline: 2px solid var(--yb-focus);
    outline-offset: 2px;
}

.gold-btn:disabled,
.summary__pay:disabled,
.summary__pay[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.link-primary {
    font-weight: 600;
    color: var(--yb-link);
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

.link-primary:hover {
    opacity: 0.8;
}

.icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
}

.icon--info {
    color: var(--yb-icon);
    margin-top: 0.125rem;
}

.icon--error {
    color: var(--yb-red);
}

/* ------------------------------------------------------------------- tickets */

.widget-main {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--yb-container);
    padding-left: 24px;
    padding-right: 24px;
    background-color: transparent;
    color: var(--yb-text);
}

@media (max-width: 480px) {
    .widget-main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem;
}

.widget-loading__text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--yb-text);
}

.step-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* step 1 - nationality */

.nationality {
    padding: 2.5rem 1.25rem;
}

.nationality__title {
    margin-bottom: 0.75rem;
    font-size: 18px;
}

.nationality__options {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .nationality__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nationality__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    border-radius: var(--yb-radius-card);
    border: 1px solid var(--yb-border-strong);
    background-color: var(--yb-surface);
    padding: 1.25rem;
    text-align: left;
    transition: border-color 0.2s;
}

.nationality__option:hover {
    border-color: var(--yb-accent);
}

.nationality__option-icon {
    width: 44px;
    height: 44px;
    color: var(--yb-icon);
}

.nationality__option-label {
    color: var(--yb-text);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.nationality__option-continue {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--yb-link);
}

.nationality__option-continue span {
    font-size: 14px;
    font-weight: 600;
}

.nationality__option-continue .icon {
    width: 16px;
}

.info-line {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
}

.info-line__text {
    color: var(--yb-text);
    font-size: 14px;
}

/* step 2 - ticket, contact and order summary */

.checkout {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    background-color: transparent;
}

@media (min-width: 1024px) {
    .checkout {
        grid-template-columns: 1fr 380px;
    }
}

.checkout__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.citizenship-summary {
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .citizenship-summary {
        padding: 2.5rem;
    }
}

.citizenship-summary__title {
    font-size: 18px;
    padding-bottom: 1rem;
}

.citizenship-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.citizenship-summary__value {
    font-weight: 600;
    font-size: 16px;
    color: var(--yb-text);
}

.citizenship-summary__change {
    font-size: 14px;
    color: var(--yb-link);
    font-weight: 600;
}

.ticket-block {
    padding: 1rem;
}

@media (min-width: 1024px) {
    .ticket-block {
        padding: 2.5rem;
    }
}

.block-title {
    font-size: 18px;
    padding-bottom: 0.75rem;
}

.session-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .session-tabs {
        flex-direction: row;
    }
}

.session-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--yb-radius-control);
    border: 1px solid var(--yb-border-strong);
    background-color: var(--yb-surface);
    padding: 12px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}

.session-tab:hover {
    background-color: var(--yb-accent-soft);
}

.session-tab.is-selected {
    border-color: var(--yb-accent);
    background-color: var(--yb-accent-soft);
}

.session-tab__radio {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--yb-text-lighter);
    background-color: transparent;
}

.session-tab.is-selected .session-tab__radio {
    border-color: var(--yb-accent);
}

.session-tab__radio-dot {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background-color: var(--yb-accent);
}

.session-tab__label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--yb-text);
}

.ticket-info {
    color: var(--yb-text);
    font-size: 14px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.ticket-row {
    border-radius: var(--yb-radius-card);
    border: 1px solid var(--yb-border);
    background-color: var(--yb-card);
    padding: 1rem;
    margin-top: 1.5rem;
}

.ticket-row__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ticket-row__head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ticket-row__identity {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ticket-row__identity {
        flex-direction: row;
    }
}

.ticket-row__image {
    flex-shrink: 0;
}

/* TODO(evidence): the ticket artwork is served from the vendor CDN and is not ours to reuse,
   so the row keeps the same 200px slot with a neutral placeholder; the slot is filled with an
   image instead when Widget:TicketImages provides a URL for the catalogue number. */
.ticket-row__image-placeholder {
    width: 200px;
    height: 112px;
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-surface);
    border: 1px solid var(--yb-border);
}

.ticket-row__image-img {
    display: block;
    width: 200px;
    height: 112px;
    border-radius: var(--yb-radius-control);
    object-fit: cover;
}

.ticket-row__text {
    flex: 1 1 0%;
    min-width: 0;
}

@media (min-width: 768px) {
    .ticket-row__text {
        margin: auto;
    }
}

.ticket-row__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--yb-text);
    overflow-wrap: break-word;
}

.ticket-row__description {
    margin-top: 0.25rem;
    font-size: 12px;
    color: var(--yb-text-light);
    overflow-wrap: break-word;
}

.ticket-row__buy {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    align-self: flex-start;
}

@media (min-width: 768px) {
    .ticket-row__buy {
        align-self: center;
    }
}

.ticket-row__price {
    border-right: 1px solid var(--yb-hr);
    padding-right: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    color: var(--yb-text);
    white-space: nowrap;
}

/* Quantity stepper: one boxed control on the dark ground, minus and plus around the count. */
.stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--yb-border-strong);
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-surface);
    overflow: hidden;
}

.stepper__button {
    min-width: 2.25rem;
    border: 0;
    background-color: transparent;
    padding: 0.5rem 0.625rem;
    font-family: var(--yb-font);
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: var(--yb-text);
    cursor: pointer;
}

.stepper__button:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08);
}

.stepper__button:focus-visible {
    outline: none;
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px var(--yb-focus);
}

.stepper__button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.stepper__value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    border-left: 1px solid var(--yb-hr);
    border-right: 1px solid var(--yb-hr);
    padding: 0.5rem 0.25rem;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--yb-text);
}

.ticket-row__identities {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* contact */

.contact-block {
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .contact-block {
        padding: 2.5rem;
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid__wide {
        grid-column: span 2 / span 2;
    }
}

.contact-block__note {
    display: flex;
    gap: 0.5rem;
    padding-top: 1.5rem;
}

.submit-error {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--yb-red);
}

/* floating-label field, boxed on the dark ground: translucent field, 1px rule, 4px radius */

.field__box {
    position: relative;
    display: flex;
    height: 3.5rem;
    border: 1px solid var(--yb-border-strong);
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-surface);
    padding: 0 12px;
}

.field.is-invalid .field__box {
    border-color: var(--yb-red);
}

.field__box:focus-within {
    border-color: var(--yb-focus);
}

.field__inner {
    position: relative;
    flex: 1 1 0%;
}

.field__input {
    height: 100%;
    width: 100%;
    background-color: transparent;
    padding: 1.5rem 0 0.5rem;
    font-size: 14px;
    font-family: var(--yb-font);
    color: var(--yb-text);
    outline: none;
    border: 0;
}

.field.is-invalid .field__input {
    color: var(--yb-red);
}

/* Browser autofill paints the field with its own light colour (Chrome's pale blue, Safari's
   yellow), which reads as a pale box on the dark ground. That colour cannot be overridden, and
   painting over it with an inset shadow left a flat rectangle inside the translucent field box
   that never matched its surroundings exactly. Clipping the background to the glyphs hides it
   instead: the text fill covers the only place it is still painted, so an autofilled field shows
   the field box's own surface through it exactly as an empty one does.

   Both spellings are written because WebKit reads the prefixed one and Blink the plain one;
   Firefox knows the state only under the standard pseudo-class, which gets its own rule so a
   browser without it does not drop the whole selector list. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--yb-text);
    caret-color: var(--yb-text);
    transition: background-color 9999s ease-out 0s;
}

input:autofill,
textarea:autofill,
select:autofill {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--yb-text);
    caret-color: var(--yb-text);
}

/* An invalid field keeps its red text when the browser filled it. */
.field.is-invalid .field__input:-webkit-autofill,
.field.is-invalid .phone-field__input:-webkit-autofill {
    -webkit-text-fill-color: var(--yb-red);
}

.field__label {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--yb-text-light);
    font-family: var(--yb-font);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}

.field.is-invalid .field__label {
    color: var(--yb-red);
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
    top: 0.35rem;
    transform: translateY(0);
    font-size: 12px;
}

.field__input:focus + .field__label {
    color: var(--yb-accent);
}

.field__error {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.field__error-text {
    font-size: 14px;
    color: var(--yb-red);
    font-family: var(--yb-font);
}

/* phone field */

.phone-field__box {
    position: relative;
    display: flex;
    border: 1px solid var(--yb-border-strong);
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-surface);
    padding: 0 12px;
}

.field.is-invalid .phone-field__box {
    border-color: var(--yb-red);
}

/* One composite field: the whole border lights up wherever the focus is, the open panel included. */
.phone-field:focus-within .phone-field__box {
    border-color: var(--yb-focus);
}

/*
 * Country picker: a button and the widget's own panel, not a native select. The macOS drop-down
 * of a <select> is a white system list of 78 rows with no search, which is the one thing on this
 * black and gold page that cannot be styled.
 */
.phone-field {
    position: relative;
}

/*
 * order: -1 draws the picker on the left of the number while it sits after the number in the
 * DOM, so Tab from the surname lands on the number itself and the picker keeps its tab stop.
 */
.phone-field__country {
    order: -1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    height: 3.5rem;
    border: 0;
    border-right: 1px solid var(--yb-hr);
    border-radius: 0;
    background-color: transparent;
    padding: 0 0.75rem 0 0;
    font-family: var(--yb-font);
    font-size: 14px;
    color: var(--yb-text);
    cursor: pointer;
}

.phone-field__country:focus {
    outline: none;
}

.phone-field__flag {
    /* The sprite cut-out is centred as a box. */
    display: inline-flex;
    align-items: center;
}

.phone-field__dial {
    font-variant-numeric: tabular-nums;
}

.phone-field__caret {
    color: var(--yb-text-lighter);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-field__country[aria-expanded="true"] .phone-field__caret {
    transform: rotate(180deg);
}

/* The open list, anchored under the whole field and opaque: the card behind it must not show. */
.dial-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 20rem;
    max-width: 100%;
    border: 1px solid var(--yb-border-strong);
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-ground);
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.dial-panel__search {
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--yb-border);
    border-radius: var(--yb-radius-control);
    background-color: var(--yb-surface);
    padding: 0 0.625rem;
    font-family: var(--yb-font);
    font-size: 14px;
    color: var(--yb-text);
    outline: none;
}

.dial-panel__search:focus {
    border-color: var(--yb-focus);
}

/* Around eight rows before it scrolls, which is what fits without swallowing the form below. */
.dial-panel__list {
    max-height: 18rem;
    overflow-y: auto;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.dial-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--yb-radius-control);
    padding: 0.5rem;
    font-size: 14px;
    color: var(--yb-text);
    cursor: pointer;
}

.dial-option__flag {
    /* The sprite cut-out is centred as a box. */
    display: inline-flex;
    align-items: center;
}

.dial-option__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dial-option__dial {
    color: var(--yb-text-light);
    font-variant-numeric: tabular-nums;
}

.dial-option:hover,
.dial-option.is-active {
    background-color: var(--yb-accent-soft);
}

.dial-option.is-selected,
.dial-option.is-selected .dial-option__dial {
    color: var(--yb-accent);
}

.dial-panel__empty {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    font-size: 14px;
    color: var(--yb-text-light);
}

@media (max-width: 480px) {
    .dial-panel {
        width: 100%;
    }
}

/* The label floats over the input alone, so the picker's width never pushes it about. */
.phone-field__inner {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.phone-field__input {
    width: 100%;
    height: 3.5rem;
    border: 0;
    border-radius: 0;
    padding-left: 0.5rem;
    padding-top: 1rem;
    color: var(--yb-text);
    font-size: 14px;
    font-family: var(--yb-font);
    background-color: transparent;
    outline: none;
}

.field.is-invalid .phone-field__input {
    color: var(--yb-red);
}

.phone-field__label {
    pointer-events: none;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yb-text-light);
    font-size: 14px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}

.phone-field.is-filled .phone-field__label,
.phone-field__input:focus ~ .phone-field__label {
    top: 0.35rem;
    transform: translateY(0);
    font-size: 12px;
}

.field.is-invalid .phone-field__label {
    color: var(--yb-red);
}

/* order summary */

.summary {
    padding: 1.25rem;
}

.summary__title {
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    font-size: 18px;
}

.summary__line {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.summary__line-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.summary__line-title {
    flex: 1 1 0%;
    min-width: 0;
    color: var(--yb-text-light);
    overflow-wrap: break-word;
}

.summary__line-amount {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: var(--yb-text);
}

.summary__empty-label {
    color: var(--yb-text-light);
    font-weight: 600;
    font-size: 14px;
}

.summary__empty-value {
    color: var(--yb-text);
    font-weight: 600;
    font-size: 14px;
}

.summary__empty-row {
    display: flex;
    justify-content: space-between;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--yb-text);
}

.summary__total {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--yb-hr);
    border-bottom: 1px solid var(--yb-hr);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.summary__total span {
    color: var(--yb-text);
    font-weight: 600;
    font-size: 16px;
}

.summary__info {
    margin-top: 1.25rem;
    font-size: 14px;
    color: var(--yb-text);
}

.summary__consents {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.25rem;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.consent__input {
    display: none;
}

/* Checkbox: 18px, 2px translucent rule, 2px radius, the site's green tick when checked. */
.consent__box {
    margin-top: 0.1875rem;
    display: flex;
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--yb-text-lighter);
    border-radius: 2px;
    background-color: transparent;
    transition: 0.2s;
}

.consent.is-checked .consent__box {
    border-color: var(--yb-green);
}

.consent__check {
    color: var(--yb-green);
    display: none;
}

.consent.is-checked .consent__check {
    display: block;
}

.consent__text {
    font-size: 14px;
    line-height: 1.25rem;
    color: var(--yb-text);
}

.consent__text a {
    color: var(--yb-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.summary__pay {
    margin-top: 1rem;
}

/* payment hand-off placeholder */

.payment-handoff {
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.payment-handoff__title {
    font-size: 18px;
    margin-bottom: 0.75rem;
}

.payment-handoff__text {
    font-size: 14px;
    color: var(--yb-text);
}

/* ------------------------------------------------------------------- refund */

.page-refund {
    background-color: var(--yb-ground);
    padding: 2.5rem 24px;
}

@media (max-width: 480px) {
    .page-refund {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 640px) {
    .page-refund {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

.page-refund__container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 36rem;
}

.page-refund__title {
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
}

.page-refund__intro {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--yb-text);
}

.page-refund__submit {
    margin-top: 1.25rem;
}

.page-refund__notes {
    margin-top: 1rem;
}

.page-refund__notes-title {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.page-refund__list {
    list-style-type: disc;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--yb-text);
}

.page-refund__list > li + li {
    margin-top: 0.5rem;
}

.page-refund__list .is-strong {
    font-weight: 600;
    color: var(--yb-text);
}

.page-refund__back {
    margin-top: 1.5rem;
    text-align: center;
}

.page-refund__back .link-primary {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* ----------------------------------------------------------- payment result */

.page-result {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--yb-ground);
}

@media (max-width: 480px) {
    .page-result {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.page-result__text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--yb-text);
}

/* A flex item's automatic minimum size is its content: min-width 0 keeps an unbreakable
   run inside the card from widening the centred block past the frame. */
.page-result__container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 0;
    max-width: 36rem;
}

/* Centred text that cannot wrap overflows the card on BOTH sides, and the left half of it
   is off the origin, unreachable and clipped. Wrapping is what keeps it inside. */
.page-result__card {
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
}

.page-result__card.is-success {
    border-color: var(--yb-green);
}

.page-result__card.is-failure {
    border-color: var(--yb-red);
}

.page-result__title {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
}

/* The pending explanation, under the waiting title. */
.page-result__pending {
    margin-top: 0.75rem;
    color: var(--yb-text-light);
}

.page-result__reference {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.page-result__reference-label {
    color: var(--yb-text-light);
}

/* A reference number is data: the system sets data in its mono face. */
.page-result__reference-value {
    font-family: var(--yb-font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.page-result__retry {
    margin-top: 1.5rem;
    display: inline-block;
    width: auto;
    text-align: center;
}

/* The way back to the museum site, under the card in every result state. */
.page-result__back {
    margin-top: 1.5rem;
    text-align: center;
}

/* The refund's own result line, in the card under the submit button. */
.page-refund__status {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--yb-text);
}

.page-refund__status.is-success {
    color: var(--yb-green);
}

.page-refund__status.is-error {
    color: var(--yb-red);
}

.page-refund__status-title {
    font-weight: 600;
}

/* ------------------------------------------------- phone-width fit (max-width: 480px)
 *
 * Measured on a 390x844 viewport against the test deployment, both standalone and inside
 * the museum site's iframe. Everything above keeps its desktop and tablet shape; this block
 * only narrows what the vendor layout sized for a mouse and a wide row.
 */
@media (max-width: 480px) {
    /* The artwork keeps a fixed 200x112 slot because a wide row puts it beside the text.
       Stacked above the text on a phone that leaves 90px of the row empty, so the slot
       spans the row and holds the same shape by ratio instead of by pixels. */
    .ticket-row__image-placeholder,
    .ticket-row__image-img {
        width: 100%;
        height: auto;
        aspect-ratio: 200 / 112;
    }

    /* Touch targets. A stepper button measured 36x37 and a dial row 37px high - under a
       finger both are a miss, so every repeatedly tapped control gets a 44px square. */
    .stepper__button,
    .stepper__value {
        min-width: 44px;
    }

    .stepper__button {
        min-height: 44px;
    }

    .dial-option {
        min-height: 44px;
    }

    /* The standalone links ("Müze sitesine dön", "Önceki bir satışınızı iptal etmek için
       tıklayın", "Bilet satın alma sayfasına dön") and the citizenship "Değiştir" are text
       19-22px tall; the box around the text is what grows, the type stays put. */
    .citizenship-summary__change,
    .link-primary {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The result page centres its card in a 100vh box. Inside the frame that height is the
       very number widget-frame.js reports back to the museum site, so 100vh both pins the
       iframe open to the phone's full height and leaves the card adrift in the middle of
       it - measured 844px reported for 286px of content. Content height is the honest one. */
    .page-result {
        min-height: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Card action and the way back below it read as one stacked pair, the button full width
       like every other primary action on the phone layout. */
    .page-result__retry {
        display: block;
        width: 100%;
    }

    .page-result__back {
        margin-top: 1rem;
    }

    /* Reading boxes give back the padding a phone cannot spare. Only the result and refund
       cards: the ticket, contact and summary blocks already set their own. */
    .page-result__card,
    .page-refund .yb-card {
        padding: 1.25rem;
    }

    .page-refund {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .nationality {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}