/* CreteTours – Tour Booking v1.0.0 */
/* Design System: Crete Tours (parasiristransfer.com)  */

/* ── Google Fonts — MUST be first ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@400;500;700&family=Lato:wght@700&display=swap');

/* ── Variables ── */
.welcome-booking-wrap {
    --wt-navy:         #0A0A0A;
    --wt-navy-dark:    #000000;
    --wt-green:        #D5AD2F;
    --wt-blue:         #D5AD2F;
    --wt-blue-hover:   #C39A22;
    --wt-blue-active:  #A77F16;
    --wt-text:         #171717;
    --wt-text-sec:     #2A2D35;
    --wt-text-muted:   #858B98;
    --wt-white:        #FFFFFF;
    --wt-bg-page:      #F7F5EF;
    --wt-bg-light:     #F5F2EA;
    --wt-bg-off:       #FBFAF7;
    --wt-border:       #E6E0D2;
    --wt-border-mid:   #CFC7B5;
    --wt-font-head:    'Montserrat', sans-serif;
    --wt-font-body:    'Roboto', sans-serif;
    --wt-font-label:   'Lato', sans-serif;

    max-width: 640px;
    margin: 0 auto;
    font-family: var(--wt-font-body);
    color: var(--wt-text);
    background: var(--wt-bg-page);
    padding: 36px 20px 52px;
    border-radius: 12px;
}

/* ── Header ── */
.welcome-booking-wrap .welcome-header-ornament {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding: 28px 24px 28px;
    background: var(--wt-navy);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
/* subtle radial glow */
.welcome-booking-wrap .welcome-header-ornament::before {
    content: '';
    position: absolute;
    top: -40px; left: 50%;
    transform: translateX(-50%);
    width: 280px; height: 140px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}
/* decorative bottom wave line */
.welcome-booking-wrap .welcome-header-ornament::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--wt-green) 40%, var(--wt-blue) 70%, transparent 100%);
}
.welcome-booking-wrap .welcome-header-ornament svg circle,
.welcome-booking-wrap .welcome-header-ornament svg line {
    stroke: rgba(255,255,255,0.9);
}
.welcome-booking-wrap .welcome-header-ornament svg circle[fill="#0A0A0A"] {
    fill: rgba(255,255,255,0.9);
    stroke: none;
}
.welcome-booking-wrap .welcome-header-ornament svg circle[fill="#D5AD2F"] {
    fill: var(--wt-green);
    stroke: none;
}
.welcome-booking-wrap .welcome-header-ornament svg line[stroke="#EBEBEB"] {
    stroke: rgba(255,255,255,0.2);
}
.welcome-booking-wrap .welcome-header-label {
    font-family: var(--wt-font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--wt-white);
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1.2;
    position: relative;
}

/* ── Cards ── */
.welcome-booking-wrap .ec-card {
    background: var(--wt-white);
    border: 1px solid rgba(10,10,10,0.10);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(10,10,10,0.07), 0 1px 2px rgba(10,10,10,0.05);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    position: relative;
    overflow: hidden;
}
/* top accent line per card */
.welcome-booking-wrap .ec-card::before {
    content: '';
    position: absolute;
    left: 20px; right: 20px; top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--wt-navy) 0%, rgba(10,10,10,0) 100%);
    border-radius: 0 0 2px 2px;
    opacity: 0.18;
    transition: opacity 0.2s, left 0.2s, right 0.2s;
}
.welcome-booking-wrap .ec-card:hover {
    border-color: rgba(10,10,10,0.18);
    box-shadow: 0 6px 20px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.06);
    transform: translateY(-1px);
}
.welcome-booking-wrap .ec-card:hover::before {
    opacity: 0.5;
    left: 0; right: 0;
}

/* ── Section label ── */
.welcome-booking-wrap .ec-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wt-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wt-navy);
    margin-bottom: 16px;
}
/* label leading dot */
.welcome-booking-wrap .ec-label::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wt-green);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(213,173,47,0.25);
}

/* ── Pre-select badge ── */
.welcome-booking-wrap .ec-preselect-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wt-green);
    margin-bottom: 12px;
    font-family: var(--wt-font-body);
    font-weight: 500;
    background: rgba(213,173,47,0.07);
    border: 1px solid rgba(213,173,47,0.25);
    border-radius: 20px;
    padding: 4px 10px;
}

/* ── Select ── */
.welcome-booking-wrap .ec-select-wrap { position: relative; }
.welcome-booking-wrap .ec-select {
    display: block;
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1.5px solid var(--wt-border);
    border-radius: 6px;
    background: var(--wt-bg-off);
    color: var(--wt-text-sec);
    font-family: var(--wt-font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.welcome-booking-wrap .ec-select:hover {
    background: var(--wt-white);
    border-color: var(--wt-border-mid);
}
.welcome-booking-wrap .ec-select:focus {
    background: var(--wt-white);
    border-color: var(--wt-blue);
    box-shadow: 0 0 0 3px rgba(213,173,47,0.1);
}
.welcome-booking-wrap .ec-select option {
    background: var(--wt-white);
    font-family: var(--wt-font-body);
    font-size: 14px;
    color: var(--wt-text);
}
.welcome-booking-wrap .ec-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
}

/* ── Tour info strip ── */
.welcome-booking-wrap .ec-tour-info {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(10,10,10,0.04);
    border: 1px solid rgba(10,10,10,0.12);
    border-radius: 6px;
    font-size: 12px;
    color: var(--wt-text-muted);
    font-family: var(--wt-font-body);
    line-height: 1.6;
}
.welcome-booking-wrap .ec-tour-info strong {
    color: var(--wt-navy);
    font-weight: 600;
}

/* ── 2-col layout ── */
.welcome-booking-wrap .ec-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.welcome-booking-wrap .ec-row2 .ec-card { margin-bottom: 0; }
@media (max-width: 520px) {
    .welcome-booking-wrap .ec-row2 { grid-template-columns: 1fr; }
}

/* ── Date input ── */
.welcome-booking-wrap .ec-date-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--wt-border);
    border-radius: 6px;
    background: var(--wt-bg-off);
    color: var(--wt-text-sec);
    font-family: var(--wt-font-body);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    color-scheme: light;
}
.welcome-booking-wrap .ec-date-input:focus {
    background: var(--wt-white);
    border-color: var(--wt-blue);
    box-shadow: 0 0 0 3px rgba(213,173,47,0.1);
}
.welcome-booking-wrap .ec-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
    filter: invert(25%) sepia(80%) saturate(600%) hue-rotate(210deg);
}

/* ── Date selected label ── */
.welcome-booking-wrap .ec-date-sel-lbl {
    margin-top: 8px;
    min-height: 18px;
    font-family: var(--wt-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--wt-navy);
    letter-spacing: .01em;
}

/* ── Guest stepper ── */
.welcome-booking-wrap .ec-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
}
.welcome-booking-wrap .ec-pax-center { text-align: center; }
.welcome-booking-wrap .ec-step-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--wt-border-mid);
    border-radius: 50%;
    color: var(--wt-blue);
    font-size: 20px;
    cursor: pointer;
    background: var(--wt-white);
    user-select: none;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
    font-weight: 400;
}
.welcome-booking-wrap .ec-step-btn:hover {
    background: var(--wt-navy);
    border-color: var(--wt-navy);
    color: var(--wt-white);
}
.welcome-booking-wrap .ec-pax-val {
    display: block;
    font-family: var(--wt-font-head);
    font-size: 44px;
    font-weight: 800;
    color: var(--wt-navy);
    line-height: 1;
    min-width: 52px;
}
.welcome-booking-wrap .ec-pax-lbl {
    display: block;
    font-size: 11px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.welcome-booking-wrap .ec-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--wt-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--wt-navy);
    background: rgba(10,10,10,0.06);
    border: 1px solid rgba(10,10,10,0.15);
    border-radius: 20px;
    padding: 4px 10px;
    margin-top: 12px;
    letter-spacing: .02em;
}

/* ── Textarea ── */
.welcome-booking-wrap .ec-textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--wt-border);
    border-radius: 6px;
    background: var(--wt-bg-off);
    color: var(--wt-text-sec);
    font-family: var(--wt-font-body);
    font-size: 13px;
    outline: none;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box;
    min-height: 80px;
}
.welcome-booking-wrap .ec-textarea:focus {
    background: var(--wt-white);
    border-color: var(--wt-blue);
    box-shadow: 0 0 0 3px rgba(213,173,47,0.1);
}
.welcome-booking-wrap .ec-textarea::placeholder { color: var(--wt-text-muted); }

.welcome-booking-wrap .ec-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.welcome-booking-wrap .ec-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}
.welcome-booking-wrap .ec-field span {
    font-family: var(--wt-font-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wt-navy);
}
.welcome-booking-wrap .ec-text-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--wt-border);
    border-radius: 6px;
    background: var(--wt-bg-off);
    color: var(--wt-text-sec);
    font-family: var(--wt-font-body);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.welcome-booking-wrap .ec-text-input:focus {
    background: var(--wt-white);
    border-color: var(--wt-blue);
    box-shadow: 0 0 0 3px rgba(213,173,47,0.18);
}
.welcome-booking-wrap .ec-confirmation-card {
    border-color: rgba(213,173,47,0.45);
    background: #fff;
}
.welcome-booking-wrap .ec-confirm-title {
    font-family: var(--wt-font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--wt-navy);
    margin-bottom: 14px;
    line-height: 1.35;
}
@media (max-width: 520px) {
    .welcome-booking-wrap .ec-field-grid { grid-template-columns: 1fr; }
}

/* ── Summary card override — navy tint background ── */
.welcome-booking-wrap .ec-summary-card::before { display: none; }
.welcome-booking-wrap .ec-summary-card {
    background: rgba(10,10,10,0.04);
    border-color: rgba(10,10,10,0.14);
}

.welcome-booking-wrap .ec-srow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.welcome-booking-wrap .ec-slbl {
    font-size: 12px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
}
.welcome-booking-wrap .ec-sval {
    font-size: 13px;
    font-family: var(--wt-font-body);
    color: var(--wt-text);
    font-weight: 600;
    text-align: right;
}
.welcome-booking-wrap .ec-sval.ec-gold { color: var(--wt-navy); }
.welcome-booking-wrap .ec-divider {
    height: 1px;
    background: var(--wt-border);
    margin: 10px 0;
}
.welcome-booking-wrap .ec-deposit-block {
    background: rgba(10,10,10,0.04);
    border: 1px solid rgba(10,10,10,0.12);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
}
.welcome-booking-wrap .ec-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 12px;
    margin-top: 12px;
    background: var(--wt-navy);
    border-radius: 6px;
}
.welcome-booking-wrap .ec-total-lbl {
    font-family: var(--wt-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}
.welcome-booking-wrap .ec-total-val {
    font-family: var(--wt-font-head);
    font-size: 30px;
    font-weight: 700;
    color: var(--wt-white);
    line-height: 1;
}
.welcome-booking-wrap .ec-note {
    font-size: 11px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
    margin: 10px 0 0;
    line-height: 1.6;
}

/* ── Book button ── */
.welcome-booking-wrap .ec-book-btn {
    display: block;
    width: 100%;
    padding: 17px 24px;
    margin-top: 14px;
    border: none;
    border-radius: 6px;
    background: var(--wt-blue);
    color: var(--wt-white);
    font-family: var(--wt-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(213,173,47,0.30);
    -webkit-appearance: none;
    appearance: none;
}
.welcome-booking-wrap .ec-book-btn:hover:not(:disabled) {
    background: var(--wt-blue-hover);
    box-shadow: 0 6px 20px rgba(213,173,47,0.38);
    transform: translateY(-1px);
}
.welcome-booking-wrap .ec-book-btn:active:not(:disabled) {
    background: var(--wt-blue-active);
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(213,173,47,0.25);
}
.welcome-booking-wrap .ec-book-btn:disabled {
    background: #C8CDD4;
    color: #8E97A2;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* ── Error ── */
.welcome-booking-wrap .ec-error-msg {
    background: rgba(220,38,38,.05);
    border: 1px solid rgba(220,38,38,.25);
    border-radius: 6px;
    color: #c81e1e;
    padding: 12px 16px;
    font-size: 12px;
    font-family: var(--wt-font-body);
    margin-bottom: 10px;
}

/* ── Contact strip ── */
.welcome-booking-wrap .ec-contact-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--wt-border);
    font-size: 12px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
}
.welcome-booking-wrap .ec-contact-strip a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--wt-text-sec);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.welcome-booking-wrap .ec-contact-strip a:hover { color: var(--wt-blue); }
.welcome-booking-wrap .ec-contact-strip svg { opacity: 0.6; }

/* ── No tours ── */
.welcome-booking-wrap .ec-no-tours {
    text-align: center;
    padding: 40px;
    color: var(--wt-text-muted);
    font-family: var(--wt-font-body);
    font-size: 14px;
}

/* ── Single product page ── */
.welcome-single-booking .ec-field { margin-bottom: 18px; }
.welcome-single-booking .ec-field label {
    display: block;
    font-family: var(--wt-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wt-navy);
    margin-bottom: 8px;
}
.welcome-single-booking .ec-price-breakdown {
    margin-top: 8px;
    font-size: 12px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
}
.welcome-single-booking .ec-price-breakdown strong { color: var(--wt-navy); }

/* ── Checkout deposit notice ── */
.welcome-deposit-notice {
    background: rgba(10,10,10,.05) !important;
    border-color: rgba(10,10,10,.2) !important;
    color: var(--wt-navy) !important;
}

/* ── Thank-you balance section ── */
.welcome-thankyou-balance {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--wt-bg-light);
    border: 1px solid var(--wt-border);
    border-radius: 8px;
}
.welcome-thankyou-balance h2 {
    font-family: var(--wt-font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--wt-navy);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

/* ── Add-ons ── */
.welcome-booking-wrap .ec-addons-list { display: flex; flex-direction: column; gap: 8px; }
.welcome-booking-wrap .ec-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid var(--wt-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}
.welcome-booking-wrap .ec-addon-item:hover {
    background: rgba(213,173,47,0.04);
    border-color: var(--wt-blue);
}
.welcome-booking-wrap .ec-addon-item.ec-addon-selected {
    background: rgba(213,173,47,0.06);
    border-color: var(--wt-green);
}
.welcome-booking-wrap .ec-addon-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--wt-border-mid);
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    color: transparent;
    font-size: 12px;
}
.welcome-booking-wrap .ec-addon-item.ec-addon-selected .ec-addon-check {
    background: var(--wt-green);
    border-color: var(--wt-green);
    color: var(--wt-white);
}
.welcome-booking-wrap .ec-addon-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--wt-font-body);
    color: var(--wt-text);
}
.welcome-booking-wrap .ec-addon-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}
.welcome-booking-wrap .ec-addon-total {
    font-family: var(--wt-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--wt-navy);
    line-height: 1;
}
.welcome-booking-wrap .ec-addon-pp {
    font-size: 10px;
    font-family: var(--wt-font-body);
    color: var(--wt-text-muted);
    letter-spacing: .04em;
    text-align: right;
}

/* ── Free add-on label ── */
.welcome-booking-wrap .ec-addon-free {
    font-family: var(--wt-font-label) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: var(--wt-green) !important;
}

/* ── Add-on quantity stepper ── */
.welcome-booking-wrap .ec-addon-qty-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-left: 2px;
}
.welcome-booking-wrap .ec-addon-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--wt-border-mid);
    border-radius: 50%;
    color: var(--wt-blue);
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    transition: background .12s, border-color .12s;
    line-height: 1;
}
.welcome-booking-wrap .ec-addon-qty-btn:hover {
    background: var(--wt-navy);
    border-color: var(--wt-navy);
    color: var(--wt-white);
}
.welcome-booking-wrap .ec-addon-qty-val {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--wt-font-body);
    color: var(--wt-text);
    min-width: 16px;
    text-align: center;
}