/*
 * 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, radii) comes from the Yerebatan
 *     Sarnici site itself: the ticket page's own stylesheet buyticket.css of
 *     yerebatansarnici.gov.tr, measured 09.09.2026. The widget is framed inside that page's
 *     black section, so its own ground is black rather than white.
 *
 * Yerebatan values read off buyticket.css:
 *   ground #000            text #fff                 border rgba(255,255,255,.2)
 *   secondary rgba(255,255,255,.5)                   icon rgba(255,255,255,.45)
 *   gold #C3954B           gold 10% rgba(195,149,75,.10)
 *   green #009222          green hover #009B2F
 *   headings "Playfair Display" 400-700              body "Manrope" 300-700
 *   radius 4px (controls, info boxes) / 12px (cards) / 999px (pill buttons)
 *   container 1170px, side padding 24px (16px on small screens)
 *
 * Fallbacks and adaptations, because the source does not cover them:
 *   - error red: the site defines none, so #E5484D is used.
 *   - primary button: the site's .buyticket-info__button inverts white border -> white fill
 *     with green text on hover; here it is a gold border -> gold fill with black text, so the
 *     gold accent stays the single call to action colour.
 *   - card surface rgba(255,255,255,.04) and card border rgba(255,255,255,.12): the site has no
 *     card component on a black ground, only the gold 10% FAQ tint; these are the same family,
 *     one step quieter, so ticket rows and the order summary read as surfaces and not as panels.
 *   - input field rgba(255,255,255,.06): same reasoning, one step above the card so a field
 *     reads as editable.
 */

:root {
    /* Yerebatan palette (buyticket.css, yerebatansarnici.gov.tr) */
    --yb-ground: #000000;
    --yb-primary: #c3954b;
    --yb-primary-hover: #c3954b; /* the button fills with the same gold; the site has no second tone */
    --yb-accent: #c3954b;
    --yb-accent-soft: rgba(195, 149, 75, 0.1);
    --yb-focus: #c3954b;
    --yb-link: #c3954b;
    --yb-card: rgba(255, 255, 255, 0.04);
    --yb-surface: rgba(255, 255, 255, 0.06);
    --yb-border: rgba(255, 255, 255, 0.12);
    --yb-border-strong: rgba(255, 255, 255, 0.2);
    --yb-hr: rgba(255, 255, 255, 0.2);
    --yb-black: #000000;
    --yb-white: #ffffff;
    --yb-text: #ffffff;
    --yb-text-light: rgba(255, 255, 255, 0.5);
    --yb-text-lighter: rgba(255, 255, 255, 0.45);
    --yb-red: #e5484d;
    --yb-green: #009b2f;

    --yb-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --yb-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

    --yb-radius-btn: 999px;
    --yb-radius-card: 12px;
    --yb-radius-control: 4px;
    --yb-card-shadow: none;

    --yb-container: 1170px;
    --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 take the site's Playfair Display; h3 stays in Manrope 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: 400;
}

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);
}

.yb-card {
    padding: 1.5rem;
}

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

/* Site primary action (.buyticket-info__button): pill, transparent ground, 1px accent border,
   inverting to a filled pill on hover. */
.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: transparent;
    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);
    color: var(--yb-black);
}

.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-primary);
    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-primary);
}

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

.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);
}

.page-result__reference-value {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.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;
    }
}