/* JMTL Easy Booking — wizard mobile-first */

.jmtl-easy {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px;
    font-family: inherit;
    color: #0e0a33;
    box-sizing: border-box;
}
.jmtl-easy *, .jmtl-easy *::before, .jmtl-easy *::after { box-sizing: border-box; }

/* Progress bar */
.jmtl-easy-progress {
    margin-bottom: 24px;
}
.jmtl-easy-progress-bar {
    height: 6px;
    background: rgba(14, 10, 51, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.jmtl-easy-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff5b0c, #af1616);
    transition: width .35s ease;
}
.jmtl-easy-progress-step {
    margin-top: 8px;
    font-size: 13px;
    color: #64748b;
    text-align: right;
    letter-spacing: .5px;
}

/* Steps */
.jmtl-easy-step {
    display: none;
    animation: jmtl-easy-fadeIn .35s ease;
}
.jmtl-easy-step.is-active { display: block; }

@keyframes jmtl-easy-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.jmtl-easy-question {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 8px;
    color: #0e0a33;
}
.jmtl-easy-subquestion {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: #0e0a33;
}
.jmtl-easy-help {
    font-size: 15px;
    color: #475569;
    margin: 0 0 20px;
    line-height: 1.5;
}
.jmtl-easy-label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #64748b;
    margin: 12px 0 6px;
    font-weight: 600;
}

/* Inputs */
.jmtl-easy-input {
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #0e0a33;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}
.jmtl-easy-input:focus {
    outline: none;
    border-color: #ff5b0c;
    box-shadow: 0 0 0 4px rgba(255, 91, 12, 0.15);
}

.jmtl-easy-help-mini {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 8px;
    font-style: italic;
}
.jmtl-easy-help-mini em { font-style: normal; font-weight: 600; color: #0e0a33; }

/* Confirmation line under inputs */
.jmtl-easy-confirm-line {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 14px;
    color: #166534;
    font-weight: 600;
}
.jmtl-easy-confirm-line.is-error {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    font-weight: 500;
}

/* Quick chips */
.jmtl-easy-quick-dates,
.jmtl-easy-quick-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.jmtl-easy-chip {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #0e0a33;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
}
.jmtl-easy-chip:hover { border-color: #cbd5e1; }
.jmtl-easy-chip.is-selected {
    background: #0e0a33;
    border-color: #0e0a33;
    color: #fff;
}

/* Availability box */
.jmtl-easy-availability {
    margin-top: 20px;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.jmtl-easy-availability.is-available {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.jmtl-easy-availability.is-unavailable {
    background: #fff7ed;
    border-color: #fed7aa;
}
.jmtl-easy-availability-msg {
    font-size: 15px;
    line-height: 1.5;
    color: #0e0a33;
}
.jmtl-easy-availability.is-available .jmtl-easy-availability-msg::before {
    content: "✅ ";
}
.jmtl-easy-availability.is-unavailable .jmtl-easy-availability-msg::before {
    content: "🙏 ";
}
.jmtl-easy-alternatives { margin-top: 14px; }
.jmtl-easy-alt-intro {
    margin: 0 0 8px;
    font-size: 14px;
    color: #475569;
    font-weight: 600;
}
.jmtl-easy-alt-list { display: flex; flex-direction: column; gap: 8px; }
.jmtl-easy-alt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    color: #0e0a33;
    font-weight: 500;
    width: 100%;
    min-height: 48px;
}
.jmtl-easy-alt-item:hover {
    border-color: #ff5b0c;
    background: #fff7ed;
}
.jmtl-easy-alt-item-cta { color: #ff5b0c; font-size: 13px; font-weight: 600; }

.jmtl-easy-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 14px 16px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    min-height: 56px;
    transition: background .2s;
}
.jmtl-easy-whatsapp:hover { background: #1ebe57; color: #fff !important; }
.jmtl-easy-wa-icon { font-size: 20px; }

/* Autocomplete */
.jmtl-easy-autocomplete { position: relative; }
.jmtl-easy-suggestions {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.jmtl-easy-suggestions li {
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: #0e0a33;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background .15s;
}
.jmtl-easy-suggestions li:hover { background: #f1f5f9; }
.jmtl-easy-suggestions li.is-loading {
    color: #64748b;
    font-style: italic;
    cursor: default;
}

/* Recap */
.jmtl-easy-recap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    margin: 16px 0;
}
.jmtl-easy-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}
.jmtl-easy-recap-row:last-of-type { border-bottom: none; }
.jmtl-easy-recap-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}
.jmtl-easy-recap-val {
    font-size: 15px;
    color: #0e0a33;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.jmtl-easy-recap-price .jmtl-easy-recap-val {
    font-size: 22px;
    font-weight: 700;
    color: #af1616;
}
.jmtl-easy-recap-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

/* Buttons */
.jmtl-easy-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.jmtl-easy-btn {
    flex: 1;
    min-height: 56px;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
}
.jmtl-easy-btn-primary {
    background: #0e0a33;
    color: #fff;
    border: 2px solid #0e0a33;
}
.jmtl-easy-btn-primary:hover:not(:disabled) {
    background: #1c1654;
    border-color: #1c1654;
}
.jmtl-easy-btn-primary:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}
/* Use the red variant only for error / blocked states */
.jmtl-easy-btn-primary.is-error {
    background: #af1616;
    border-color: #af1616;
    color: #fff;
}
.jmtl-easy-btn-ghost {
    background: transparent;
    color: #475569;
    border: 2px solid #e2e8f0;
    flex: 0 0 auto;
    min-width: 100px;
}
.jmtl-easy-btn-ghost:hover { background: #f1f5f9; border-color: #cbd5e1; }
.jmtl-easy-btn.is-loading { opacity: .7; cursor: wait; }

/* Error */
.jmtl-easy-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-top: 12px;
}

.jmtl-easy-fallback {
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    color: #475569;
}
.jmtl-easy-whatsapp-inline {
    color: #25D366 !important;
    font-weight: 600;
    text-decoration: none !important;
}
.jmtl-easy-whatsapp-inline:hover { text-decoration: underline !important; }

/* Mobile tweaks */
@media (max-width: 480px) {
    .jmtl-easy { padding: 12px; }
    .jmtl-easy-question { font-size: 21px; }
    .jmtl-easy-subquestion { font-size: 17px; }
    .jmtl-easy-input { font-size: 16px; min-height: 52px; }
    .jmtl-easy-btn { font-size: 16px; min-height: 52px; }
    .jmtl-easy-recap-price .jmtl-easy-recap-val { font-size: 20px; }
}