/* Short Term Taxi Insurance — bespoke 2-step form
   Self-contained styling. Visually-hidden labels (kept for accessibility);
   placeholders + first-option text carry the visible label content. */

.taxi-form-wrap {
    background: #3068b4;
    border-radius: 10px;
    padding: 0;
    color: #fff;
    font-family: jaf-facitweb, Arial, sans-serif;
    box-sizing: border-box;
}

.taxi-form-wrap *,
.taxi-form-wrap *::before,
.taxi-form-wrap *::after {
    box-sizing: border-box;
}

.taxi-form-title {
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    padding: 0 0 14px;
}

.taxi-form-slide[hidden] { display: none; }

/* Visually-hidden labels (sr-only) — kept for accessibility */
.taxi-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.taxi-field {
    display: block;
    margin: 0 0 10px;
}

.taxi-form-wrap input[type="text"],
.taxi-form-wrap input[type="tel"],
.taxi-form-wrap input[type="email"],
.taxi-form-wrap input[type="date"],
.taxi-form-wrap select {
    width: 100%;
    height: 38px;
    padding: 8px 10px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
}

.taxi-form-wrap input[type="text"]::placeholder,
.taxi-form-wrap input[type="tel"]::placeholder,
.taxi-form-wrap input[type="email"]::placeholder {
    color: #555;
    opacity: 1;
}

/* Dropdown — down-angle chevron */
.taxi-form-wrap select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><polyline points='1 1 6 6 11 1' fill='none' stroke='%233068b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Date fields — calendar icon on right; text↔date swap handled by JS */
.taxi-form-wrap input[data-date-field] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><rect x='1' y='2.5' width='12' height='10' rx='1.5' fill='none' stroke='%233068b4' stroke-width='1.3'/><line x1='1' y1='5.5' x2='13' y2='5.5' stroke='%233068b4' stroke-width='1.3'/><line x1='4' y1='1' x2='4' y2='4' stroke='%233068b4' stroke-width='1.3' stroke-linecap='round'/><line x1='10' y1='1' x2='10' y2='4' stroke='%233068b4' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Hide the native date picker icon (Chrome/Edge) — picker opened via JS showPicker() */
.taxi-form-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.taxi-form-wrap input.has-error,
.taxi-form-wrap select.has-error {
    border-color: #ffd400;
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.4);
}

.taxi-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 12px;
}

.taxi-checkbox input[type="checkbox"] {
    flex-shrink: 0;
}

.taxi-checkbox-label {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    /* Override the .taxi-sr hiding for the privacy label */
    position: static;
    width: auto; height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
}

.taxi-checkbox-label a {
    color: #fff;
    text-decoration: underline;
}

.taxi-form-error {
    background: #ffd400;
    color: #333;
    font-size: 13px;
    line-height: 1.3;
    padding: 0;
    margin: 0 0 10px;
    border-radius: 4px;
    display: none;
}

.taxi-form-error.is-shown {
    display: block;
    padding: 8px 10px;
}

.taxi-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(to bottom, #5bbf2a 0%, #3a9e1a 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
    margin-top: 20px;
    line-height: 1.2;
    text-align: center;
}

.taxi-btn:hover {
    background: linear-gradient(to bottom, #6acc38 0%, #48ab26 100%);
}

.taxi-btn-back {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    margin-top: 6px;
}
.taxi-btn-back:hover { background: rgba(255,255,255,0.1); }

.taxi-form-buttons {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    margin-top: 12px;
}

.taxi-form-success {
    text-align: center;
    padding: 20px 10px;
}

.taxi-form-success h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 10px;
}

.taxi-form-success p {
    color: #fff;
    font-size: 14px;
}

.taxi-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}