/* Full-width customer journeys: brand accents with high-contrast reading surfaces. */

.dok-flow-c-page { --dok-canvas: var(--theme-canvas); --dok-display-font: 'Semplicita Pro', 'semplicita-pro', 'SemplicitaPro-Light', 'Josefin Sans', 'Gill Sans MT', Calibri, sans-serif; background: var(--dok-canvas); }
.dok-flow-c-page .dok-c-header { background: var(--theme-surface); border-bottom-color: var(--theme-border); }
.dok-flow-c-page .dok-c-brand img { filter: none; }
.dok-flow-c-page :is(.dok-c-nav a, .dok-c-mobile-nav summary) { color: var(--theme-secondary); font-weight: 400; }
.dok-flow-c-page .dok-c-nav a:hover { color: var(--theme-text); text-decoration: underline; }
.dok-flow-c-page .dok-c-mobile-nav[open] a { background: var(--theme-surface); color: var(--theme-text); }

#flowC, #welcomeC {
    --dok-body-font: 'Segoe UI', system-ui, sans-serif;
    --dok-button-font: 'Segoe UI', system-ui, sans-serif;
    font: 400 16px/1.6 var(--dok-body-font);
}
#flowC, .w-flow-open #welcomeC {
    width: 100%; max-width: none; margin: 0;
    min-height: 0; height: auto; background: var(--dok-canvas); color: var(--theme-text);
    border: 0; border-radius: 0; box-shadow: none;
    overflow: hidden;
}
:is(#flowC, #welcomeC) .dok-step { color: var(--theme-text); }
:is(#flowC, #welcomeC) .dok-step-content { max-width: 1160px; padding: clamp(28px,4vw,56px) 32px; gap: 28px; }
:is(#flowC, #welcomeC) .dok-step-scroll { scrollbar-color: var(--theme-input-border) var(--theme-soft); }
:is(#flowC, #welcomeC) .dok-step :is(h1, h2, h3) { color: var(--theme-text); font-weight: 600; }
:is(#flowC, #welcomeC) .dok-step h1 { font-family: var(--dok-display-font); font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.8rem); line-height: 1.2; letter-spacing: -.025em; }
:is(#flowC, #welcomeC) .dok-step-actions { background: var(--theme-surface); border-color: var(--theme-border); padding: 18px 32px max(18px,env(safe-area-inset-bottom)); }
:is(#flowC, #welcomeC) .dok-step .c-button { border-radius: 8px; font-size: 1rem; text-transform: none; letter-spacing: 0; }
:is(#flowC, #welcomeC) .c-button-secondary { background: var(--theme-surface); color: var(--theme-secondary); border-color: var(--theme-input-border); }
:is(#flowC, #welcomeC) .dok-step .c-button-secondary:hover:not(:disabled) { background: var(--theme-soft); color: var(--theme-text); border-color: #37565f; }
:is(#flowC, #welcomeC) .c-button-primary:disabled { background: var(--theme-soft); color: var(--theme-muted); }
:is(#flowC, #welcomeC) .dok-step .c-button-link { color: var(--theme-secondary); }
:is(#flowC, #welcomeC) .dok-step .c-button-link:hover { color: var(--theme-text); background: var(--theme-hover); }
:is(#flowC, #welcomeC) .dok-add-another { color: var(--theme-secondary); border-color: var(--theme-input-border); }
:is(#flowC, #welcomeC) .dok-add-another:hover:not(:disabled) { background: var(--theme-soft); color: var(--theme-text); border-color: #37565f; }
:is(#flowC, #welcomeC) .dok-step :is(.dok-intro, .dok-field-help, .dok-policy-summary, .dok-terms, .dok-secure-note, .dok-payment-loading, .dok-document-help, .w-summary-note, .c-empty-state, .dok-search-loading-copy p) { color: var(--theme-muted); font-size: 1rem; font-weight: 400; line-height: 1.6; }
:is(#flowC, #welcomeC) :is(.dok-eyebrow, .dok-label, .w-passenger-heading) { color: var(--theme-muted); font-size: .875rem; font-weight: 600; letter-spacing: .035em; }
:is(#flowC, #welcomeC) :is(.dok-question, .dok-prompt) { color: var(--theme-text); font-weight: 500; }
:is(#flowC, #welcomeC) :is(.c-option-card, .c-flight-card, .dok-summary-panel, .dok-payment-panel, .w-passenger-card, .w-policy-reference) { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-border); box-shadow: 0 3px 12px #203b4506; }
:is(#flowC, #welcomeC) .c-option-card.is-selected { background: var(--theme-selected); color: var(--theme-text); border-color: var(--theme-green-border); box-shadow: inset 0 4px 0 var(--theme-green-border); }
:is(#flowC, #welcomeC) .c-option-card:hover:not(:disabled):not(.is-selected) { background: var(--theme-hover); border-color: var(--theme-input-border); }
:is(#flowC, #welcomeC) :is(.c-option-description, .c-option-price-label, .c-option-price-note, .c-option-price small) { color: var(--theme-muted); opacity: 1; font-size: .875rem; font-weight: 400; }
:is(#flowC, #welcomeC) :is(.c-option-price, .c-option-price-label) { border-color: var(--theme-border); }
:is(#flowC, #welcomeC) :is(.c-flight-meta, .c-flight-airport, .c-flight-actions > span, .c-flight-connector, .dok-history > summary) { color: var(--theme-muted); font-size: .95rem; }
:is(#flowC, #welcomeC) :is(.c-flight-code, .c-flight-time, .c-flight-meta > strong, .c-summary-row, .dok-payment-heading) { color: var(--theme-text); }
:is(#flowC, #welcomeC) .c-status-badge { color: var(--theme-secondary); background: var(--theme-soft); font-size: .875rem; }
:is(#flowC, #welcomeC) .dok-results-list .c-flight-card { border: 1px solid var(--theme-border); }
:is(#flowC, #welcomeC) .dok-results-list .c-flight-card.is-selected { background: var(--theme-selected); border-color: var(--theme-green-border); transform: none; }
:is(#flowC, #welcomeC) .dok-results-list .c-flight-card.is-unavailable { opacity: 1; background: #fff3e8; border-color: #d3a077; }
:is(#flowC, #welcomeC) .is-unavailable :is(.c-status-badge, .c-flight-unavailable-reason) { color: #7d361a; }
:is(#flowC, #welcomeC) .dok-premium-box { background: var(--theme-soft); border-color: var(--theme-green-border); }
:is(#flowC, #welcomeC) .dok-premium-box::before { color: var(--theme-green); font-size: .875rem; }
:is(#flowC, #welcomeC) .dok-policy-documents .c-button-link { background: var(--theme-surface); color: var(--theme-text); border: 1px solid var(--theme-input-border); border-radius: 8px; text-align: left; }
:is(#flowC, #welcomeC) .dok-policy-documents .dok-eyebrow { color: var(--theme-text); }
:is(#flowC, #welcomeC) :is(.dok-input, .dok-airport-input, .dok-date-trigger, .dok-code-digit) { color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-input-border); font-weight: 400; }
:is(#flowC, #welcomeC) .dok-input::placeholder { color: var(--theme-muted); opacity: 1; }
:is(#flowC, #welcomeC) .dok-airport-input input { color: var(--theme-text); font-weight: 400; }
:is(#flowC, #welcomeC) .dok-airport-input input::placeholder { color: var(--theme-muted); }
:is(#flowC, #welcomeC) :is(.dok-input, .dok-code-digit):focus { border-color: #37565f; }
:is(#flowC, #welcomeC) .dok-code-digit.is-filled { border-color: var(--theme-green-border); }
:is(#flowC, #welcomeC) .w-field > label, #welcomeC label.w-field > span { color: var(--theme-text); font-size: 1rem; font-weight: 500; }
#welcomeC .w-field > label span { color: var(--theme-muted); }
#welcomeC .w-field .dok-input { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-input-border); }
#welcomeC .w-field .dok-input::placeholder { color: var(--theme-muted); }
#welcomeC .w-field .dok-input:focus { border-color: #37565f; }
#welcomeC :is(select.dok-input, input[data-w-field="start-date"]) { color-scheme: light; }
#welcomeC .w-field select.dok-input option { background: var(--theme-surface); color: var(--theme-text); }
#welcomeC [aria-invalid="true"] { border-color: #b42318 !important; }
:is(#flowC, #welcomeC) :is(.dok-payment-amount strong, .w-policy-reference > strong) { color: var(--theme-green); }
:is(#flowC, #welcomeC) .dok-cart { background: #2b4851; color: #fff; border-color: #9fca7a; }
:is(#flowC, #welcomeC) :is(.dok-cart-label, .dok-cart-price, .dok-cart-price small, .dok-cart-items .c-summary-row > :last-child, .dok-cost-tag) { color: #fff; }
:is(#flowC, #welcomeC) .dok-cart-price small { font-size: .8rem; }
:is(#flowC, #welcomeC) .dok-cart-chevron path { stroke: #fff; }
:is(#flowC, #welcomeC) .dok-history { border-color: var(--theme-border); }
:is(#flowC, #welcomeC) .dok-message { color: #713f12; background: #fffbeb; border-color: #e7c77c; font-size: 1rem; }
:is(#flowC, #welcomeC) :is(.dok-message.is-error, .c-error) { color: #912018; background: #fff1f0; border-color: #d88d87; }
:is(#flowC, #welcomeC) .dok-search-loader-ring { border-color: var(--theme-border); border-top-color: var(--theme-green-border); }
:is(#flowC, #welcomeC) .dok-feature-icon { color: var(--theme-green); background: var(--theme-selected); border-color: #9aaf8a; }
:is(#flowC, #welcomeC) :focus-visible { outline: 2px solid #37565f; outline-offset: 3px; box-shadow: none; }
:is(#flowC, #welcomeC) input:focus-visible { outline: none; box-shadow: none; }

/* Limit reading width, while the canvas, premium bar and action bar fill the viewport. */
:is(#flowC, #welcomeC) .dok-intro { max-width: 720px; }
:is(#flowC, #welcomeC) .dok-cart > summary,
:is(#flowC, #welcomeC) .dok-cart-items { max-width: 1100px; margin-inline: auto; }
:is(#flowC, #welcomeC) .dok-cart > summary { min-height: 58px; }
:is(#flowC, #welcomeC) .dok-step-actions { box-shadow: 0 -4px 20px #203b4505; }
:is(#flowC, #welcomeC) .dok-step .c-button-primary { font-weight: 700; }
:is(#flowC, #welcomeC) .c-option-card { border-radius: 12px; }
:is(#flowC, #welcomeC) .dok-search-loader-centre { color: var(--theme-green); }

/* Landing copy remains on the brand background, with solid, readable text. */
#welcomeC .w-landing { font-weight: 400; }
#welcomeC .w-landing :is(.w-hero-benefit p, .w-section-heading p, .w-feature-card p, .w-how-copy p, .w-footer-grid a, .w-footer-grid button, .w-footer-brand p, .w-footer-bottom) { color: #fff; font-weight: 400; font-size: 1rem; }
#welcomeC .w-landing :is(.w-hero h1, .w-hero-benefit h2, .w-how-container h2, .w-how-pill span) { font-weight: 400; }

@media (max-width: 640px) {
    #flowC, .w-flow-open #welcomeC { width: 100%; margin: 0; border-radius: 0; }
    :is(#flowC, #welcomeC) .dok-step-content { padding: 24px 16px; }
    :is(#flowC, #welcomeC) .dok-step-actions { padding: 14px 16px max(14px,env(safe-area-inset-bottom)); }
    :is(#flowC, #welcomeC) .dok-code-digit { flex-shrink: 1; }
    :is(#flowC, #welcomeC) .dok-document-row .c-button { font-size: .95rem; }
}

/* Programmatically focused headings are reading anchors, not input controls. */
:is(#flowC, #welcomeC) :is(h1, h2)[tabindex="-1"]:focus { outline: none; }
:is(#flowC, #welcomeC) .dok-feature-icon svg :is(path, rect) { stroke: var(--theme-green-border); }

:is(#flowC, #welcomeC) .dok-cart-items .c-summary-row { color: #fff; font-size: .95rem; }
.dok-flow-c-page .dok-c-mobile-nav summary i { color: var(--theme-secondary); }
@media (max-width: 640px) {
    :is(#flowC, #welcomeC) .dok-cart > summary { padding: 12px 16px; gap: 8px; }
    :is(#flowC, #welcomeC) .dok-cart-label { flex-shrink: 0; }
    :is(#flowC, #welcomeC) .dok-cart-label > :last-child { max-width: 105px; }
    :is(#flowC, #welcomeC) .dok-cart-price small { max-width: 145px; font-size: .8rem; line-height: 1.4; }
}

/* Keep the decision and its context together instead of separating loose paragraphs. */
.dok-flow-c .dok-cover-context { width: 100%; max-width: 900px; padding: 18px 24px; border: 1px solid var(--theme-border); border-left: 4px solid var(--theme-green-border); border-radius: 10px; background: var(--theme-surface); color: var(--theme-text); text-align: left; }
.dok-flow-c .dok-cover-context h2 { font: 600 1rem/1.4 'Segoe UI',system-ui,sans-serif; margin: 0 0 8px; color: var(--theme-text); }
.dok-flow-c .dok-cover-context p { font: 400 1rem/1.6 'Segoe UI',system-ui,sans-serif; color: var(--theme-secondary); max-width: none; text-align: left; margin: 0; }
.dok-flow-c .dok-cover-context strong { color: var(--theme-text); }
.dok-flow-c .dok-cover-context .dok-policy-summary { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 32px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--theme-border); }
.dok-flow-c .dok-cover-context .c-summary-row { padding: 0; gap: 12px; font-size: .95rem; }
:is(#flowC,#myPolicyFlights) :is([data-c-step="flight-count"],[data-c-step="upgrade"]) .dok-step-content { gap: 22px; padding-top: 32px; padding-bottom: 32px; }
:is(#flowC,#myPolicyFlights) :is([data-c-step="flight-count"],[data-c-step="upgrade"]) h1 { font-size: clamp(2.25rem,4vw,3.3rem); }
.dok-flow-c .dok-card-row { align-items: stretch; }
.dok-flow-c .c-option-description { min-height: 1.5em; }
.dok-flow-c .c-option-price-label { margin-top: 8px; }
.dok-flow-c .dok-cart { box-sizing: border-box; min-height: 0; }
.dok-flow-c .dok-cart summary:focus-visible { outline: 2px solid #9fca7a; outline-offset: -4px; }

/* Policy-specific welcome, using the exported hero's two-column composition. */
#flowC .dok-activation { background: var(--theme-canvas); }
.dok-activation-layout { width: 100%; max-width: 1160px; margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(32px,6vw,80px); padding: 48px 32px; }
.dok-activation-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
#flowC .dok-activation h1 { text-align: left; font-size: clamp(2.5rem,4.5vw,4rem); }
.dok-activation-copy > p { font-size: 1.15rem; line-height: 1.65; color: var(--theme-secondary); }
#flowC .dok-activation .dok-activation-note { font-size: .95rem; line-height: 1.6; }
#flowC .dok-activation-cover { background: #2b4851; color: #fff; border-top: 4px solid #9fca7a; border-radius: 16px; padding: clamp(24px,3vw,40px); }
#flowC .dok-activation-cover h2 { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 20px; }
#flowC .dok-activation-cover p { color: #fff; line-height: 1.65; }
#flowC .dok-activation-benefit { display: block; color: #bfe39e; font-size: clamp(2.8rem,5vw,4rem); line-height: 1.2; }
.dok-activation-allowance { margin-top: 24px; padding-top: 20px; border-top: 1px solid #769298; font-size: 1.2rem; font-weight: 600; }
.dok-activation-cover .dok-activation-note { margin-top: 24px; }
@media(max-width:640px) {
 .dok-flow-c .dok-cover-context { padding: 16px; }
 .dok-flow-c .dok-cover-context .dok-policy-summary { flex-direction: column; gap: 8px; }
 .dok-activation-layout { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
 .dok-activation-copy { gap: 18px; }
 .dok-activation-copy .c-button { width: 100%; }
}


/* Consistent action bars across registration, purchase and embedded journeys. */
.dok-flow-c .dok-flight-guidance { max-width: 900px; }
.dok-flow-c .dok-flight-guidance h2 { font-size: 1.15rem; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-step-actions { padding: 16px 32px max(16px,env(safe-area-inset-bottom)); border-top: 1px solid var(--theme-border); background: var(--theme-surface); box-shadow: 0 -4px 18px #203b4505; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row { display: flex; align-items: stretch; gap: 12px; max-width: 1100px; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button { flex: 0 1 auto; min-height: 48px; min-width: 0; padding: 12px 22px; border-radius: 8px; font: 600 1rem/1.4 'Segoe UI',system-ui,sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; text-align: center; transition: background-color .16s,border-color .16s,box-shadow .16s; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button-primary { margin-left: auto; min-width: 220px; color: #203b30; background: #9fca7a; border: 1px solid #9fca7a; box-shadow: 0 2px 3px #203b4508; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: #aed38f; border-color: #83ae61; box-shadow: 0 3px 8px #203b4510; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button-secondary { background: var(--theme-surface); color: var(--theme-secondary); border: 1px solid var(--theme-border); box-shadow: none; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > :is([data-c-action="back"],[data-w-action="back"],[data-c-action="navigate"],[data-c-action="search-back"],[data-c-action="cancel-search"],.dok-action-quiet) { border-color: transparent; padding-inline: 14px; background: transparent; }
:is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > :is(.c-button:disabled,[aria-disabled="true"]) { color: var(--theme-muted); background: var(--theme-soft); border-color: #d5dfd7; box-shadow: none; cursor: not-allowed; }
:is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="add-flight"] { margin-left: auto; max-width: 320px; }
:is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="review"] { margin-left: 0; max-width: 280px; }
@media(max-width:800px) {
 :is(#flowC,#welcomeC,#myPolicyFlights) .dok-step-actions { padding: 12px 16px max(12px,env(safe-area-inset-bottom)); }
 :is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
 :is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button { margin: 0; min-width: 0; padding: 10px 14px; font-size: .95rem; }
 :is(#flowC,#welcomeC,#myPolicyFlights) .dok-button-row > .c-button:only-child { grid-column: 1 / -1; }
 :is(#flowC,#myPolicyFlights) .dok-cover-actions { grid-template-columns: auto minmax(0,1fr); }
 :is(#flowC,#myPolicyFlights) .dok-cover-actions > .c-button-primary { grid-column: 1 / -1; }
 :is(#flowC,#myPolicyFlights) .dok-flight-actions .dok-button-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 :is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="navigate"] { justify-self: start; }
 :is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="upgrade"] { justify-self: end; }
 :is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="add-flight"],
 :is(#flowC,#myPolicyFlights) .dok-flight-actions [data-c-action="review"] { margin: 0; max-width: none; }
 :is(#flowC,#myPolicyFlights) .dok-flight-actions .dok-button-row:has([data-c-action="upgrade"][hidden]) [data-c-action="review"] { grid-column: 1 / -1; }
}

/* Give both ways to find a flight equal emphasis beside the question. */
:is(#flowC,#myPolicyFlights) .dok-search-stage[data-c-search-step="question"] { width: 100%; max-width: 760px; }
:is(#flowC,#myPolicyFlights) .dok-search-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 28px; }
:is(#flowC,#myPolicyFlights) .dok-search-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 24px; border: 2px solid var(--theme-border); border-radius: 12px; background: var(--theme-surface); color: var(--theme-text); cursor: pointer; text-align: center; font: 400 1rem/1.5 'Segoe UI',system-ui,sans-serif; box-shadow: 0 3px 12px #203b4506; transition: background-color .16s,border-color .16s; }
:is(#flowC,#myPolicyFlights) .dok-search-choice strong { color: var(--theme-text); font-size: 1.75rem; font-weight: 600; }
:is(#flowC,#myPolicyFlights) .dok-search-choice span { color: var(--theme-secondary); }
:is(#flowC,#myPolicyFlights) .dok-search-choice:hover { background: var(--theme-hover); border-color: var(--theme-green-border); }
:is(#flowC,#myPolicyFlights) .dok-search-choice:focus-visible { outline: 3px solid #37565f; outline-offset: 4px; }
:is(#flowC,#myPolicyFlights) .dok-search-back-row { display: flex; justify-content: flex-start; }
@media(max-width:640px) {
 :is(#flowC,#myPolicyFlights) .dok-search-choices { gap: 12px; margin-top: 24px; }
 :is(#flowC,#myPolicyFlights) .dok-search-choice { padding: 20px 12px; min-height: 160px; font-size: .95rem; }
}

/* Carry the home-page airport artwork into the pre-verification welcome. */
#flowC .dok-activation { position: relative; isolation: isolate; }
#flowC .dok-activation::before {
 content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
 background-color: #375b4b; opacity: .18;
 -webkit-mask: url('/Styles/BackgroundImages/Background_for_landing.svg') right bottom / auto 90% no-repeat;
 mask: url('/Styles/BackgroundImages/Background_for_landing.svg') right bottom / auto 90% no-repeat;
}
@media(max-width:640px) {
 #flowC .dok-activation::before { -webkit-mask-size: auto 75%; mask-size: auto 75%; opacity: .12; }
}