/* ===========================================================================
   AHN Booking - traveller-facing booking, payment and confirmation screens.

   The palette is inherited from the active theme (--brand, --brand-dark,
   --hairline ...) with hard-coded fallbacks, so the plugin matches the site it
   is installed in but still renders correctly on a theme that defines none of
   them. Every rule is scoped under .ahn-booking-root to keep the plugin from
   leaking styles into the rest of the page.
   ======================================================================== */

.ahn-booking-root {
    /* Brand ------------------------------------------------------------- */
    --ahn-brand: var(--brand, #2596be);
    --ahn-brand-dark: var(--brand-dark, #1f7c9e);
    --ahn-brand-darker: var(--brand-darker, #196480);

    --ahn-tint: rgba(37, 150, 190, .09);
    --ahn-tint: color-mix(in srgb, var(--ahn-brand) 9%, transparent);
    --ahn-tint-soft: rgba(37, 150, 190, .05);
    --ahn-tint-soft: color-mix(in srgb, var(--ahn-brand) 5%, transparent);
    --ahn-ring: rgba(37, 150, 190, .22);
    --ahn-ring: color-mix(in srgb, var(--ahn-brand) 22%, transparent);

    /* Ink & surfaces ---------------------------------------------------- */
    --ahn-ink: var(--title-color, #111);
    --ahn-ink-2: #3f474d;
    --ahn-muted: #6d767d;
    --ahn-line: var(--hairline, rgba(17, 17, 17, .10));
    --ahn-line-soft: rgba(17, 17, 17, .06);
    --ahn-surface: #fff;
    --ahn-surface-2: #f4f8fa;

    --ahn-ok: #14795d;
    --ahn-ok-bg: #eaf6f1;
    --ahn-err: #c4362e;
    --ahn-err-bg: #fdf1f0;

    /* Shape & motion ---------------------------------------------------- */
    --ahn-r: 16px;
    --ahn-r-sm: 11px;
    --ahn-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 30px rgba(17, 17, 17, .055);
    --ahn-shadow-lift: 0 2px 6px rgba(17, 17, 17, .05), 0 18px 44px rgba(17, 17, 17, .09);
    --ahn-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));

    /* The booking screens need more room than a prose column, and themes
       commonly cap .entry-content at ~70ch. Re-centre on the parent with pure
       margin maths rather than a transform, which would otherwise become the
       containing block for any fixed-position descendant. */
    --ahn-w: 1080px;
    --ahn-shell: min(var(--ahn-w), calc(100vw - 2.5rem));
    width: var(--ahn-shell);
    max-width: none;
    margin-left: calc(50% - var(--ahn-shell) / 2);
    margin-right: 0;

    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ahn-ink-2);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.ahn-booking-root--narrow {
    --ahn-w: 720px;
}

.ahn-booking-root *,
.ahn-booking-root *::before,
.ahn-booking-root *::after {
    box-sizing: border-box;
}

.ahn-booking-root :where(p) {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.ahn-i {
    flex: none;
    display: block;
}

/* ---------------------------------------------------------------------------
   Progress steps
   ------------------------------------------------------------------------ */

.ahn-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ahn-booking-root .ahn-steps__item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
    color: var(--ahn-muted);
    font-size: 13.5px;
    font-weight: 500;
}

/* The connector is drawn on the item so it stretches to fill the gap between
   one step and the next, whatever the label lengths turn out to be. */
.ahn-steps__item::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    min-width: 12px;
    border-radius: 2px;
    background: var(--ahn-line);
}

.ahn-steps__item:last-child::after {
    display: none;
}

.ahn-steps__item.is-done::after {
    background: var(--ahn-brand);
}

.ahn-steps__dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--ahn-line);
    background: var(--ahn-surface);
    color: var(--ahn-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
}

.ahn-steps__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ahn-steps__item.is-active {
    color: var(--ahn-ink);
    font-weight: 600;
}

.ahn-steps__item.is-active .ahn-steps__dot {
    border-color: var(--ahn-brand);
    background: var(--ahn-brand);
    color: #fff;
    box-shadow: 0 0 0 4px var(--ahn-ring);
}

.ahn-steps__item.is-done {
    color: var(--ahn-ink-2);
}

.ahn-steps__item.is-done .ahn-steps__dot {
    border-color: var(--ahn-brand);
    background: var(--ahn-brand);
    color: #fff;
}

@media (max-width: 560px) {
    .ahn-steps__item:not(.is-active) .ahn-steps__text {
        display: none;
    }

    /* With every step sharing the width equally the one visible label was the
       only thing left to squeeze, so it ellipsised. Size the current step to
       its text and let the others - now just a dot - absorb the remainder. */
    .ahn-booking-root .ahn-steps__item.is-active {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.ahn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 26px;
    align-items: start;
}

.ahn-main {
    min-width: 0;
    background: var(--ahn-surface);
    border: 1px solid var(--ahn-line);
    border-radius: var(--ahn-r);
    box-shadow: var(--ahn-shadow);
    padding: clamp(20px, 3.2vw, 34px);
}

@media (max-width: 900px) {
    .ahn-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Trip and price land above the form on narrow screens, so the traveller
       sees what they are booking before filling anything in. */
    .ahn-rail {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------
   Headings
   ------------------------------------------------------------------------ */

.ahn-head {
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ahn-line-soft);
}

.ahn-booking-root .ahn-head__title {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ahn-ink);
}

.ahn-head__sub {
    color: var(--ahn-muted);
    font-size: 14.5px;
}

.ahn-head__sub strong {
    color: var(--ahn-ink-2);
    font-weight: 600;
}

.ahn-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ahn-tint);
    color: var(--ahn-brand-darker);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

.ahn-block {
    margin-bottom: 30px;
}

.ahn-block:last-of-type {
    margin-bottom: 24px;
}

.ahn-booking-root .ahn-block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ahn-ink);
}

.ahn-block__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--ahn-tint);
    color: var(--ahn-brand-darker);
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Fields
   ------------------------------------------------------------------------ */

.ahn-grid {
    display: grid;
    gap: 16px 18px;
}

.ahn-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.ahn-field {
    min-width: 0;
}

.ahn-field > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--ahn-ink);
}

.ahn-input {
    position: relative;
    display: flex;
    align-items: center;
}

.ahn-input__ico {
    position: absolute;
    left: 13px;
    display: grid;
    place-items: center;
    color: var(--ahn-muted);
    pointer-events: none;
    transition: color .18s var(--ahn-ease);
}

.ahn-booking-root input[type="text"],
.ahn-booking-root input[type="email"],
.ahn-booking-root input[type="tel"],
.ahn-booking-root input[type="date"],
.ahn-booking-root input[type="number"] {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1.5px solid var(--ahn-line);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface);
    color: var(--ahn-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    transition: border-color .18s var(--ahn-ease), box-shadow .18s var(--ahn-ease), background-color .18s var(--ahn-ease);
    appearance: none;
    -webkit-appearance: none;
}

/* The base rule above is input[type="..."], which out-specifies a plain
   .ahn-input input - without matching the attribute here the text ran under
   the icon. */
.ahn-booking-root .ahn-input input[type] {
    padding-left: 42px;
}

.ahn-booking-root input::placeholder {
    color: #a6aeb4;
}

.ahn-booking-root input:hover:not(:focus) {
    border-color: rgba(17, 17, 17, .2);
}

.ahn-booking-root input:focus {
    outline: none;
    border-color: var(--ahn-brand);
    box-shadow: 0 0 0 4px var(--ahn-ring);
    background: var(--ahn-surface);
}

.ahn-input:focus-within .ahn-input__ico {
    color: var(--ahn-brand);
}

/* Date inputs render a native picker button; nudge it clear of the border. */
.ahn-booking-root input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
}

.ahn-booking-root input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.ahn-hint {
    display: block;
    margin-top: 6px;
    color: var(--ahn-muted);
    font-size: 12.5px;
}

.ahn-err {
    display: none;
    margin-top: 6px;
    color: var(--ahn-err);
    font-size: 12.5px;
    font-weight: 500;
}

.ahn-field.is-invalid .ahn-err,
.ahn-err.is-shown {
    display: block;
}

.ahn-field.is-invalid .ahn-hint {
    display: none;
}

.ahn-booking-root input.invalid {
    border-color: var(--ahn-err);
    background: var(--ahn-err-bg);
}

.ahn-booking-root input.invalid:focus {
    box-shadow: 0 0 0 4px rgba(196, 54, 46, .16);
}

.ahn-field.is-invalid .ahn-input__ico {
    color: var(--ahn-err);
}

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

.ahn-stepper {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1.5px solid var(--ahn-line);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface);
    overflow: hidden;
    transition: border-color .18s var(--ahn-ease), box-shadow .18s var(--ahn-ease);
}

.ahn-stepper:focus-within {
    border-color: var(--ahn-brand);
    box-shadow: 0 0 0 4px var(--ahn-ring);
}

.ahn-stepper__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ahn-surface-2);
    color: var(--ahn-ink-2);
    cursor: pointer;
    transition: background-color .16s var(--ahn-ease), color .16s var(--ahn-ease);
}

.ahn-stepper__btn:hover {
    background: var(--ahn-tint);
    color: var(--ahn-brand-darker);
}

.ahn-stepper__btn:disabled {
    color: #c2c8cc;
    cursor: not-allowed;
    background: var(--ahn-surface-2);
}

.ahn-booking-root .ahn-stepper input[type="number"] {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--ahn-ink);
    -moz-appearance: textfield;
}

.ahn-booking-root .ahn-stepper input[type="number"]::-webkit-outer-spin-button,
.ahn-booking-root .ahn-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ahn-booking-root .ahn-stepper input[type="number"]:focus {
    box-shadow: none;
}

/* Fixed departure ---------------------------------------------------------

   Shown in place of the date picker when the traveller arrived from a row in
   the Dates & Prices table. The date is not editable here: the server re-reads
   it from the package on submit. */

.ahn-fixed {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 15px;
    border: 1.5px solid var(--ahn-line);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface-2);
}

.ahn-fixed__ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--ahn-brand-dark);
}

.ahn-fixed__value {
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--ahn-ink);
}

.ahn-fixed__value small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--ahn-muted);
}

.ahn-booking-root .ahn-hint a {
    color: var(--ahn-brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Group rate summary ------------------------------------------------------ */

.ahn-booking-root .ahn-tierhint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ahn-ring);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-tint-soft);
    color: var(--ahn-ink-2);
    font-size: 12.5px;
    line-height: 1.55;
}

.ahn-tierhint .ahn-i {
    margin-top: 2px;
    color: var(--ahn-brand-dark);
}

/* ---------------------------------------------------------------------------
   Payment plans
   ------------------------------------------------------------------------ */

.ahn-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .ahn-plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ahn-plan {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.ahn-plan input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ahn-plan__box {
    display: grid;
    gap: 3px;
    height: 100%;
    padding: 16px 44px 16px 17px;
    border: 1.5px solid var(--ahn-line);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface);
    transition: border-color .18s var(--ahn-ease), background-color .18s var(--ahn-ease), box-shadow .18s var(--ahn-ease);
}

.ahn-plan:hover .ahn-plan__box {
    border-color: var(--ahn-ring);
    background: var(--ahn-tint-soft);
}

.ahn-plan__mark {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ahn-line);
    border-radius: 50%;
    background: var(--ahn-surface);
    color: transparent;
    transition: all .18s var(--ahn-ease);
}

.ahn-plan__name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ahn-ink);
}

.ahn-plan__amount {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ahn-brand-darker);
    font-variant-numeric: tabular-nums;
}

.ahn-plan__desc {
    color: var(--ahn-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.ahn-plan input:checked + .ahn-plan__box {
    border-color: var(--ahn-brand);
    background: var(--ahn-tint-soft);
    box-shadow: 0 0 0 3px var(--ahn-ring);
}

.ahn-plan input:checked + .ahn-plan__box .ahn-plan__mark {
    border-color: var(--ahn-brand);
    background: var(--ahn-brand);
    color: #fff;
}

.ahn-plan input:focus-visible + .ahn-plan__box {
    outline: 2px solid var(--ahn-brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Terms, due-now and submit
   ------------------------------------------------------------------------ */

.ahn-action-footer {
    padding-top: 22px;
    border-top: 1px solid var(--ahn-line-soft);
}

.ahn-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ahn-ink-2);
}

.ahn-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ahn-check__box {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--ahn-line);
    border-radius: 6px;
    background: var(--ahn-surface);
    color: transparent;
    transition: all .16s var(--ahn-ease);
}

.ahn-check input:checked + .ahn-check__box {
    border-color: var(--ahn-brand);
    background: var(--ahn-brand);
    color: #fff;
}

.ahn-check input:focus-visible + .ahn-check__box {
    outline: 2px solid var(--ahn-brand);
    outline-offset: 2px;
}

.ahn-check.is-invalid .ahn-check__box {
    border-color: var(--ahn-err);
    background: var(--ahn-err-bg);
}

.ahn-booking-root .ahn-check__text a {
    color: var(--ahn-brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#agree_err {
    margin-top: 8px;
}

.ahn-duenow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 14px;
    padding: 14px 17px;
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface-2);
}

.ahn-duenow__label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ahn-ink-2);
}

.ahn-duenow__value {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ahn-brand-darker);
    font-variant-numeric: tabular-nums;
}

.ahn-booking-root .ahn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 15px 26px;
    border: 1.5px solid var(--ahn-brand);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-brand);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--ahn-ease), border-color .2s var(--ahn-ease), box-shadow .2s var(--ahn-ease), transform .2s var(--ahn-ease);
}

.ahn-booking-root .ahn-btn:hover,
.ahn-booking-root .ahn-btn:focus-visible {
    background: var(--ahn-brand-dark);
    border-color: var(--ahn-brand-dark);
    color: #fff;
    box-shadow: 0 8px 22px var(--ahn-ring);
    transform: translateY(-1px);
}

.ahn-booking-root .ahn-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ahn-btn__ico {
    display: grid;
    place-items: center;
    transition: transform .2s var(--ahn-ease);
}

.ahn-booking-root .ahn-btn:hover .ahn-btn__ico {
    transform: translateX(3px);
}

.ahn-booking-root .ahn-btn.is-busy {
    pointer-events: none;
    opacity: .78;
    transform: none;
    box-shadow: none;
}

.ahn-booking-root .ahn-btn--ghost {
    display: inline-flex;
    width: auto;
    min-height: 46px;
    padding: 12px 24px;
    background: transparent;
    color: var(--ahn-brand-dark);
    font-size: 15px;
}

.ahn-booking-root .ahn-btn--ghost:hover,
.ahn-booking-root .ahn-btn--ghost:focus-visible {
    background: var(--ahn-brand);
    border-color: var(--ahn-brand);
    color: #fff;
}

.ahn-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--ahn-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Trip summary rail
   ------------------------------------------------------------------------ */

.ahn-rail {
    min-width: 0;
}

.ahn-rail__inner {
    display: grid;
    gap: 14px;
    /* Clears the theme's sticky header, which sits at roughly 78px. */
    position: sticky;
    top: 96px;
}

@media (max-width: 900px) {
    .ahn-rail__inner {
        position: static;
    }
}

.ahn-tripcard {
    overflow: hidden;
    border: 1px solid var(--ahn-line);
    border-radius: var(--ahn-r);
    background: var(--ahn-surface);
    box-shadow: var(--ahn-shadow);
}

.ahn-tripcard__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ahn-surface-2);
}

.ahn-booking-root .ahn-tripcard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ahn-tripcard__body {
    padding: 16px 17px 17px;
}

.ahn-tripcard__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ahn-brand-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ahn-booking-root .ahn-tripcard__title {
    margin: 0;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ahn-ink);
}

.ahn-tripcard__meta {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--ahn-line-soft);
    list-style: none;
    display: grid;
    gap: 9px;
}

.ahn-booking-root .ahn-tripcard__meta li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px;
}

.ahn-tripcard__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ahn-tint);
    color: var(--ahn-brand-dark);
}

.ahn-tripcard__label {
    color: var(--ahn-muted);
}

.ahn-tripcard__value {
    margin-left: auto;
    padding-left: 8px;
    font-weight: 500;
    color: var(--ahn-ink);
    text-align: right;
}

/* Price card ------------------------------------------------------------- */

.ahn-pricecard {
    padding: 17px;
    border: 1px solid var(--ahn-line);
    border-radius: var(--ahn-r);
    background: var(--ahn-surface);
    box-shadow: var(--ahn-shadow);
}

.ahn-booking-root .ahn-pricecard__title {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ahn-muted);
}

.ahn-pricecard__rows {
    display: grid;
    gap: 9px;
    margin: 0;
}

.ahn-pricecard__rule {
    height: 1px;
    margin: 3px 0;
    background: var(--ahn-line-soft);
}

.ahn-booking-root .ahn-pricerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

.ahn-pricerow dt {
    margin: 0;
    font-weight: 400;
    color: var(--ahn-ink-2);
}

.ahn-pricerow dd {
    margin: 0;
    font-weight: 500;
    color: var(--ahn-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ahn-booking-root .ahn-pricerow.is-collapsed {
    display: none;
}

.ahn-pricerow.is-muted dt,
.ahn-pricerow.is-muted dd {
    color: var(--ahn-muted);
    font-weight: 400;
}

.ahn-pricerow.is-strong dt {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ahn-ink);
}

.ahn-pricerow.is-strong dd {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ahn-brand-darker);
}

.ahn-pricecard__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--ahn-line-soft);
    color: var(--ahn-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ahn-pricecard__note .ahn-i {
    margin-top: 1px;
}

/* Trust list ------------------------------------------------------------- */

.ahn-trust {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 15px 17px;
    list-style: none;
    border: 1px solid var(--ahn-line-soft);
    border-radius: var(--ahn-r);
    background: var(--ahn-surface-2);
}

.ahn-booking-root .ahn-trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ahn-muted);
    font-size: 12.5px;
}

.ahn-trust .ahn-i {
    color: var(--ahn-brand-dark);
}

/* ---------------------------------------------------------------------------
   Panels: confirmation, cancelled, status messages
   ------------------------------------------------------------------------ */

.ahn-panel {
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--ahn-line);
    border-radius: var(--ahn-r);
    background: var(--ahn-surface);
    box-shadow: var(--ahn-shadow);
}

.ahn-panel--center {
    text-align: center;
}

.ahn-booking-root .ahn-panel__title {
    margin: 16px 0 8px;
    font-family: inherit;
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ahn-ink);
}

.ahn-booking-root .ahn-panel__text {
    color: var(--ahn-muted);
    font-size: 15px;
}

.ahn-panel__actions {
    margin-top: 22px;
}

.ahn-statusmark {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
}

.ahn-statusmark--notice {
    background: var(--ahn-tint);
    color: var(--ahn-brand-dark);
}

.ahn-statusmark--error {
    background: var(--ahn-err-bg);
    color: var(--ahn-err);
}

.ahn-statusmark--success {
    background: var(--ahn-ok-bg);
    color: var(--ahn-ok);
}

/* Confirmation ----------------------------------------------------------- */

.ahn-success {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ahn-line-soft);
}

.ahn-success__badge {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--ahn-ok-bg);
    color: var(--ahn-ok);
    box-shadow: 0 0 0 8px rgba(20, 121, 93, .06);
}

.ahn-booking-root .ahn-success__title {
    margin: 18px 0 8px;
    font-family: inherit;
    font-size: clamp(22px, 2.6vw, 27px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ahn-ink);
}

.ahn-success__sub {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--ahn-muted);
    font-size: 14.5px;
}

.ahn-success__sub strong {
    color: var(--ahn-ink-2);
    font-weight: 500;
}

.ahn-success__amount {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 20px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--ahn-surface-2);
}

.ahn-success__amount-label {
    font-size: 13px;
    color: var(--ahn-muted);
}

.ahn-success__amount-value {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ahn-brand-darker);
    font-variant-numeric: tabular-nums;
}

.ahn-callout {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--ahn-ring);
    border-left-width: 3px;
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-tint-soft);
    color: var(--ahn-ink-2);
    font-size: 13.5px;
    line-height: 1.55;
}

.ahn-callout .ahn-i {
    margin-top: 2px;
    color: var(--ahn-brand-dark);
}

.ahn-details {
    display: grid;
    gap: 0;
    margin: 24px 0 0;
}

.ahn-booking-root .ahn-details__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ahn-line-soft);
    font-size: 14px;
}

.ahn-details__row:last-child {
    border-bottom: 0;
}

.ahn-details dt {
    margin: 0;
    font-weight: 400;
    color: var(--ahn-muted);
}

.ahn-details dd {
    margin: 0;
    font-weight: 500;
    color: var(--ahn-ink);
    text-align: right;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Unified Checkout
   ------------------------------------------------------------------------ */

.ahn-block--pay {
    margin-bottom: 20px;
}

/* The payment frame -------------------------------------------------------

   The embedded Cybersource widget is deliberately plain, so the surrounding
   frame carries the reassurance: who is taking the money, how much, what is
   accepted, and what happens to the card details. */

.ahn-pay {
    border: 1px solid var(--ahn-line);
    border-radius: var(--ahn-r);
    background: var(--ahn-surface);
    overflow: hidden;
}

.ahn-pay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--ahn-tint-soft);
    border-bottom: 1px solid var(--ahn-line-soft);
}

.ahn-pay__secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ahn-brand-darker);
    font-size: 13.5px;
    font-weight: 600;
}

.ahn-pay__by {
    color: var(--ahn-muted);
    font-size: 12.5px;
}

.ahn-pay__by strong {
    color: var(--ahn-ink-2);
    font-weight: 600;
}

.ahn-pay__amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
}

.ahn-pay__amount-label {
    color: var(--ahn-muted);
    font-size: 13.5px;
}

.ahn-pay__amount-value {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ahn-brand-darker);
    font-variant-numeric: tabular-nums;
}

.ahn-uc-wrap {
    min-height: 120px;
    margin: 0 18px;
    padding: 6px;
    border: 1px solid var(--ahn-line-soft);
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-surface-2);
}

/* Accepted networks ------------------------------------------------------- */

.ahn-pay__networks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 16px 18px 4px;
}

.ahn-pay__networks-label {
    margin-right: 3px;
    color: var(--ahn-muted);
    font-size: 12.5px;
}

.ahn-pay__network {
    padding: 4px 9px;
    border: 1px solid var(--ahn-line);
    border-radius: 6px;
    background: var(--ahn-surface);
    color: var(--ahn-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Assurances -------------------------------------------------------------- */

.ahn-pay__assurances {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 16px 18px 18px;
    list-style: none;
}

.ahn-pay__assurances li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--ahn-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.ahn-pay__assurances .ahn-i {
    margin-top: 1px;
    color: var(--ahn-brand-dark);
}

/* Loading skeleton -------------------------------------------------------- */

.ahn-skel {
    display: grid;
    gap: 11px;
    padding: 6px 4px 2px;
}

.ahn-skel__btn {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(17, 17, 17, .055) 25%, rgba(17, 17, 17, .09) 37%, rgba(17, 17, 17, .055) 63%);
    background-size: 400% 100%;
    animation: ahn-skel-shimmer 1.4s ease infinite;
}

.ahn-skel__btn { height: 52px; border-radius: 8px; }

/* The row of card marks Unified Checkout draws under its button. */
.ahn-skel__marks {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ahn-skel__marks i {
    width: 34px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(17, 17, 17, .055) 25%, rgba(17, 17, 17, .09) 37%, rgba(17, 17, 17, .055) 63%);
    background-size: 400% 100%;
    animation: ahn-skel-shimmer 1.4s ease infinite;
}

@keyframes ahn-skel-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.ahn-uc-loading__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px !important;
    color: var(--ahn-muted);
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .ahn-skel__btn,
    .ahn-skel__marks i {
        animation: none;
    }
}

.ahn-uc-container {
    min-height: 60px;
}

/* Cybersource injects its own iframe here. It sizes itself, but without a
   floor the container collapses for a frame as the card screen swaps in. */
.ahn-uc-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

.ahn-uc-loading {
    padding: 14px 12px 18px;
}

.ahn-uc-loading[hidden] {
    display: none;
}

.ahn-uc-spinner {
    flex: none;
    width: 19px;
    height: 19px;
    border: 2px solid var(--ahn-line);
    border-top-color: var(--ahn-brand);
    border-radius: 50%;
    animation: ahn-uc-spin .8s linear infinite;
}

@keyframes ahn-uc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ahn-uc-spinner {
        animation-duration: 2.4s;
    }

    .ahn-booking-root *,
    .ahn-booking-root *::before,
    .ahn-booking-root *::after {
        transition-duration: .01ms !important;
    }
}

.ahn-uc-error {
    display: flex;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(196, 54, 46, .3);
    border-left-width: 3px;
    border-radius: var(--ahn-r-sm);
    background: var(--ahn-err-bg);
    color: #93231d;
    font-size: 14px;
    line-height: 1.5;
}

.ahn-uc-error[hidden] {
    display: none;
}

.ahn-uc-cancel {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}

.ahn-booking-root .ahn-uc-cancel a {
    color: var(--ahn-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ahn-booking-root .ahn-uc-cancel a:hover {
    color: var(--ahn-err);
}

/* 3-D Secure ------------------------------------------------------------- */

/* Device fingerprinting runs in an invisible frame; it must stay in the
   layout (not display:none) or some issuers will not execute it. */
.ahn-3ds-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.ahn-3ds-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(11, 22, 28, .62);
    backdrop-filter: blur(2px);
}

.ahn-3ds-modal[hidden] {
    display: none;
}

.ahn-3ds-dialog {
    width: 440px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.ahn-3ds-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(17, 17, 17, .09);
    font-family: "Rubik", -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.ahn-3ds-header .ahn-i {
    color: #2596be;
    color: var(--brand, #2596be);
}

.ahn-3ds-body {
    height: 460px;
    max-height: 70vh;
}

.ahn-3ds-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}