/*
Theme Name:  Taxiar Child
Template:    taxiar
Description: Child theme for the Taxiar parent theme. Adds a custom 404 error page.
Version:     1.3.2
Text Domain: taxiar
*/

/* ── 404 Hero ─────────────────────────────────────────────────── */
/* ================================================================
   Five Star Maxi Cab — Improved 404 Page
   ================================================================ */

:root {
    --fs-blue: #143A63;
    --fs-dark: #0B2038;
    --fs-sky: #54B6F4;
    --fs-mist: #EAF4FB;
    --fs-white: #FFFFFF;
    --fs-text: #5C6B7A;
    --fs-border: #D8E7F2;
}

/* Main 404 intro section */
.error-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 90px 24px 40px;
    text-align: center;
    position: relative;
}

.error-content::before {
    content: '';
    position: absolute;
    inset: 28px 0 auto 0;
    margin: auto;
    width: 220px;
    height: 220px;
    background: rgba(84, 182, 244, 0.13);
    border-radius: 50%;
    z-index: -1;
    filter: blur(2px);
}

.fs404-number {
    font-size: clamp(90px, 15vw, 170px);
    font-weight: 900;
    color: var(--fs-blue);
    line-height: 0.9;
    letter-spacing: -6px;
    font-family: var(--title-font, 'Radio Canada', sans-serif);
    margin-bottom: 18px;
}

.fs404-divider {
    width: 74px;
    height: 5px;
    background: var(--fs-sky);
    margin: 0 auto 28px;
    border-radius: 999px;
}

.error-title {
    color: var(--fs-dark);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 16px;
    font-weight: 800;
}

.error-text {
    max-width: 690px;
    margin: 0 auto 32px;
    color: var(--fs-text);
    font-size: 17px;
    line-height: 1.75;
}

/* Search form */
.fs404-search {
    max-width: 560px;
    margin: 0 auto 34px;
}

.fs404-search .search-form {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--fs-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--fs-white);
    box-shadow: 0 14px 40px rgba(11, 32, 56, 0.10);
}

.fs404-search .search-field {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 16px 22px;
    font-size: 15px;
    font-family: var(--body-font, 'Inter', sans-serif);
    color: var(--fs-dark);
    background: transparent;
    min-width: 0;
    height: auto;
}

.fs404-search .search-submit {
    flex-shrink: 0;
    border: none !important;
    background: var(--fs-blue) !important;
    color: var(--fs-white) !important;
    padding: 0 28px;
    cursor: pointer;
    font-size: 15px;
    font-family: var(--body-font, 'Inter', sans-serif);
    font-weight: 700;
    transition: background 0.25s ease;
    white-space: nowrap;
    border-radius: 0;
    height: auto;
}

.fs404-search .search-submit:hover {
    background: var(--fs-dark) !important;
}

/* Top action buttons */
.error-content .btn-group {
    gap: 14px;
}

.error-content .th-btn {
    background: var(--fs-blue) !important;
    border-color: var(--fs-blue) !important;
    color: var(--fs-white) !important;
    border-radius: 999px !important;
    padding: 15px 28px;
    box-shadow: 0 10px 28px rgba(20, 58, 99, 0.20);
}

.error-content .th-btn:hover {
    background: var(--fs-dark) !important;
    border-color: var(--fs-dark) !important;
    color: var(--fs-white) !important;
    transform: translateY(-2px);
}

.error-content .th-btn.style3 {
    background: transparent !important;
    color: var(--fs-blue) !important;
    border: 2px solid var(--fs-blue) !important;
    box-shadow: none;
}

.error-content .th-btn.style3:hover {
    background: var(--fs-blue) !important;
    color: var(--fs-white) !important;
}

/* Booking section */
.fs404-book-section {
    background:
        radial-gradient(circle at top left, rgba(84, 182, 244, 0.18), transparent 32%),
        linear-gradient(180deg, var(--fs-mist), #FFFFFF);
    padding: 60px 0 90px;
}

/* Collapse bottom gap between hero section and booking form */
section.fs404-hero {
    padding-bottom: 0 !important;
}

.fs404-book-header {
    text-align: center;
    margin-bottom: 44px;
}

.fs404-book-icon {
    width: 78px;
    height: 78px;
    background: var(--fs-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 30px;
    color: var(--fs-white);
    box-shadow: 0 14px 34px rgba(20, 58, 99, 0.25);
}

.fs404-book-header h3 {
    font-size: clamp(26px, 4vw, 40px);
    color: var(--fs-dark);
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.25;
}

.fs404-book-header p {
    color: var(--fs-text);
    margin-bottom: 0;
    font-size: 16.5px;
}

/* Booking form card */
.fs404-book-section .booking-form {
    max-width: 980px;
    margin: 0 auto;
}

.fs404-book-section .booking-form .input-wrap {
    background: var(--fs-white);
    border: 1px solid var(--fs-border);
    border-radius: 24px;
    padding: 36px 36px 28px;
    box-shadow: 0 24px 70px rgba(11, 32, 56, 0.12);
}

.fs404-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--fs-dark);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
    font-family: var(--body-font, 'Inter', sans-serif);
}

.fs404-field-label i {
    color: var(--fs-sky);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.fs404-book-section .booking-form .form-control,
.fs404-book-section .booking-form .form-select,
.fs404-book-section .booking-form input,
.fs404-book-section .booking-form select {
    border: 1px solid var(--fs-border) !important;
    border-radius: 10px !important;
    height: 54px;
    color: var(--fs-dark);
    background-color: #FFFFFF;
    box-shadow: none !important;
}

.fs404-book-section .booking-form .form-control:focus,
.fs404-book-section .booking-form .form-select:focus,
.fs404-book-section .booking-form input:focus,
.fs404-book-section .booking-form select:focus {
    border-color: var(--fs-sky) !important;
    box-shadow: 0 0 0 4px rgba(84, 182, 244, 0.18) !important;
    outline: none;
}

.fs404-book-section .booking-form .th-btn {
    height: 58px;
    font-size: 16px;
    letter-spacing: 0.5px;
    border-radius: 12px !important;
    background: var(--fs-blue) !important;
    border-color: var(--fs-blue) !important;
    color: var(--fs-white) !important;
}

.fs404-book-section .booking-form .th-btn:hover {
    background: var(--fs-dark) !important;
    border-color: var(--fs-dark) !important;
}

/* Success message */
.fs404-booking-success {
    max-width: 980px;
    margin: 0 auto 28px;
    background: #1F9D61;
    color: #fff;
    padding: 18px 28px;
    border-radius: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive */
@media (max-width: 767px) {
    .error-content {
        padding: 70px 18px 54px;
    }

    .fs404-number {
        letter-spacing: -3px;
    }

    .fs404-search .search-form {
        flex-direction: column;
        border-radius: 18px;
    }

    .fs404-search .search-field {
        text-align: center;
    }

    .fs404-search .search-submit {
        padding: 14px 22px;
    }

    .error-content .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .error-content .th-btn {
        width: 100%;
        justify-content: center;
    }

    .fs404-book-section {
        padding: 64px 0 80px;
    }

    .fs404-book-section .booking-form .input-wrap {
        padding: 26px 20px 18px;
        border-radius: 18px;
    }
}


html[data-theme="dark"] body {
    background: #0B2038;
    color: #EAF4FB;
}

html[data-theme="dark"] .error-content {
    background: #0B2038;
}

html[data-theme="dark"] .fs404-number {
    color: #54B6F4;
}

html[data-theme="dark"] .error-title,
html[data-theme="dark"] .fs404-book-header h3,
html[data-theme="dark"] .fs404-field-label {
    color: #FFFFFF;
}

html[data-theme="dark"] .error-text,
html[data-theme="dark"] .fs404-book-header p {
    color: rgba(234, 244, 251, 0.75);
}

html[data-theme="dark"] .fs404-search .search-form,
html[data-theme="dark"] .fs404-book-section .booking-form .input-wrap {
    background: #143A63;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .fs404-search .search-field,
html[data-theme="dark"] .fs404-book-section input,
html[data-theme="dark"] .fs404-book-section select,
html[data-theme="dark"] .fs404-book-section textarea {
    background: #0B2038 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] .fs404-search .search-field::placeholder,
html[data-theme="dark"] .fs404-book-section input::placeholder,
html[data-theme="dark"] .fs404-book-section textarea::placeholder {
    color: rgba(234, 244, 251, 0.6) !important;
}

html[data-theme="dark"] .fs404-book-section {
    background:
        radial-gradient(circle at top left, rgba(84, 182, 244, 0.16), transparent 34%),
        linear-gradient(180deg, #0B2038, #071827);
}

.fs404-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #D8E7F2;
    border-radius: 999px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(11, 32, 56, 0.10);
}

.fs404-search-field {
    flex: 1;
    height: 60px;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 24px;
    background: transparent;
    color: #0B2038;
    font-size: 16px;
}

.fs404-search-btn {
    width: 62px;
    height: 60px;
    border: 0 !important;
    background: #143A63 !important;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.fs404-search-btn:hover {
    background: #0B2038 !important;
}

html[data-theme="dark"] .fs404-search-form {
    background: #143A63;
    border-color: rgba(255,255,255,.18);
}

html[data-theme="dark"] .fs404-search-field {
    color: #FFFFFF;
}

html[data-theme="dark"] .fs404-search-field::placeholder {
    color: rgba(234,244,251,.65);
}

html[data-theme="dark"] .fs404-search-btn {
    background: #54B6F4 !important;
    color: #0B2038 !important;
}

.error-content .th-btn.style3 {
    background: transparent !important;
    color: #143A63 !important;
    border: 2px solid #143A63 !important;
}

.error-content .th-btn.style3 i {
    color: inherit !important;
}

.error-content .th-btn.style3:hover {
    background: #143A63 !important;
    color: #FFFFFF !important;
    border-color: #143A63 !important;
}

html[data-theme="dark"] .error-content .th-btn.style3 {
    color: #54B6F4 !important;
    border-color: #54B6F4 !important;
    background: transparent !important;
}

html[data-theme="dark"] .error-content .th-btn.style3:hover {
    background: #54B6F4 !important;
    color: #0B2038 !important;
    border-color: #54B6F4 !important;
}


/* ================================================================
   404 Booking Form — Light/Dark Correct Theme
   ================================================================ */

/* LIGHT MODE booking form */
html[data-theme="light"] .fs404-book-section .booking-form .input-wrap,
html:not([data-theme="dark"]) .fs404-book-section .booking-form .input-wrap {
    background: #FFFFFF !important;
    border: 1px solid #D8E7F2 !important;
    border-radius: 26px !important;
    padding: 42px 46px 40px !important;
    box-shadow: 0 24px 70px rgba(11, 32, 56, 0.12) !important;
}

html[data-theme="light"] .fs404-book-section .booking-form input,
html[data-theme="light"] .fs404-book-section .booking-form select,
html[data-theme="light"] .fs404-book-section .booking-form textarea,
html[data-theme="light"] .fs404-book-section .booking-form .form-control,
html[data-theme="light"] .fs404-book-section .booking-form .form-select,
html:not([data-theme="dark"]) .fs404-book-section .booking-form input,
html:not([data-theme="dark"]) .fs404-book-section .booking-form select,
html:not([data-theme="dark"]) .fs404-book-section .booking-form textarea,
html:not([data-theme="dark"]) .fs404-book-section .booking-form .form-control,
html:not([data-theme="dark"]) .fs404-book-section .booking-form .form-select {
    height: 58px !important;
    border: 1.5px solid #D8E7F2 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    color: #0B2038 !important;
    font-size: 16px !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}

html[data-theme="light"] .fs404-book-section .booking-form input::placeholder,
html[data-theme="light"] .fs404-book-section .booking-form textarea::placeholder,
html:not([data-theme="dark"]) .fs404-book-section .booking-form input::placeholder,
html:not([data-theme="dark"]) .fs404-book-section .booking-form textarea::placeholder {
    color: #6B7A89 !important;
}

/* DARK MODE booking form */
html[data-theme="dark"] .fs404-book-section .booking-form .input-wrap {
    background: #143A63 !important;
    border: 1px solid rgba(84, 182, 244, 0.35) !important;
    border-radius: 26px !important;
    padding: 42px 46px 40px !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .fs404-book-section .booking-form input,
html[data-theme="dark"] .fs404-book-section .booking-form select,
html[data-theme="dark"] .fs404-book-section .booking-form textarea,
html[data-theme="dark"] .fs404-book-section .booking-form .form-control,
html[data-theme="dark"] .fs404-book-section .booking-form .form-select {
    height: 58px !important;
    border: 1.5px solid rgba(234, 244, 251, 0.70) !important;
    border-radius: 14px !important;
    background: #0B2038 !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .fs404-book-section .booking-form input::placeholder,
html[data-theme="dark"] .fs404-book-section .booking-form textarea::placeholder {
    color: rgba(234,244,251,.62) !important;
}

/* Shared focus state */
.fs404-book-section .booking-form input:focus,
.fs404-book-section .booking-form select:focus,
.fs404-book-section .booking-form textarea:focus {
    border-color: #54B6F4 !important;
    box-shadow: 0 0 0 4px rgba(84,182,244,.20) !important;
    outline: none !important;
}

/* Fix date/time icon contrast */
html[data-theme="light"] .fs404-book-section .booking-form input[type="date"],
html[data-theme="light"] .fs404-book-section .booking-form input[type="time"],
html:not([data-theme="dark"]) .fs404-book-section .booking-form input[type="date"],
html:not([data-theme="dark"]) .fs404-book-section .booking-form input[type="time"] {
    color-scheme: light;
}

html[data-theme="dark"] .fs404-book-section .booking-form input[type="date"],
html[data-theme="dark"] .fs404-book-section .booking-form input[type="time"] {
    color-scheme: dark;
}

/* Book My Ride button */
.fs404-book-section .booking-form .th-btn,
.fs404-book-section .booking-form button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px !important;
    margin-top: 20px;
    border-radius: 999px !important;
    background: #143A63 !important;
    border: 2px solid #143A63 !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .8px;
    box-shadow: 0 14px 34px rgba(20,58,99,.22) !important;
}

.fs404-book-section .booking-form .th-btn:hover,
.fs404-book-section .booking-form button[type="submit"]:hover {
    background: #54B6F4 !important;
    border-color: #54B6F4 !important;
    color: #0B2038 !important;
    transform: translateY(-2px);
}

.fs404-book-section .booking-form .th-btn::before,
.fs404-book-section .booking-form .th-btn::after,
.fs404-book-section .booking-form button[type="submit"]::before,
.fs404-book-section .booking-form button[type="submit"]::after {
    display: none !important;
}

/* FINAL FIX: remove Taxiar brown hover layer from 404 action buttons */
.error-content .th-btn,
.error-content .th-btn:hover,
.error-content .th-btn:focus,
.error-content .th-btn:active {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
}

.error-content .th-btn::before,
.error-content .th-btn::after,
.error-content .th-btn:hover::before,
.error-content .th-btn:hover::after,
.error-content .th-btn:focus::before,
.error-content .th-btn:focus::after,
.error-content .th-btn:active::before,
.error-content .th-btn:active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

/* Back to Home */
.error-content .th-btn:not(.style3),
html[data-theme="dark"] .error-content .th-btn:not(.style3),
html[data-theme="light"] .error-content .th-btn:not(.style3),
html:not([data-theme="dark"]) .error-content .th-btn:not(.style3) {
    background: #143A63 !important;
    border: 2px solid #143A63 !important;
    color: #FFFFFF !important;
}

/* Back to Home hover */
.error-content .th-btn:not(.style3):hover,
html[data-theme="dark"] .error-content .th-btn:not(.style3):hover,
html[data-theme="light"] .error-content .th-btn:not(.style3):hover,
html:not([data-theme="dark"]) .error-content .th-btn:not(.style3):hover {
    background: #54B6F4 !important;
    border-color: #54B6F4 !important;
    color: #0B2038 !important;
}

/* Call Us */
.error-content .th-btn.style3,
html[data-theme="dark"] .error-content .th-btn.style3,
html[data-theme="light"] .error-content .th-btn.style3,
html:not([data-theme="dark"]) .error-content .th-btn.style3 {
    background: transparent !important;
    border: 2px solid #54B6F4 !important;
    color: #54B6F4 !important;
}

/* Call Us hover */
.error-content .th-btn.style3:hover,
html[data-theme="dark"] .error-content .th-btn.style3:hover,
html[data-theme="light"] .error-content .th-btn.style3:hover,
html:not([data-theme="dark"]) .error-content .th-btn.style3:hover {
    background: #54B6F4 !important;
    border-color: #54B6F4 !important;
    color: #0B2038 !important;
}

.error-content .th-btn i {
    color: inherit !important;
}

/* FINAL: visible border for 404 Book My Ride button */
.fs404-book-section .booking-form form button.th-btn[type="submit"],
.fs404-book-section .booking-form form button.w-100[type="submit"] {
    border: 2px solid #54B6F4 !important;
    outline: 2px solid rgba(84, 182, 244, 0.35) !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* Light theme */
html[data-theme="light"] .fs404-book-section .booking-form form button.th-btn[type="submit"],
html:not([data-theme="dark"]) .fs404-book-section .booking-form form button.th-btn[type="submit"] {
    background: #143A63 !important;
    border-color: #143A63 !important;
    outline-color: rgba(20, 58, 99, 0.22) !important;
    color: #FFFFFF !important;
}

/* Dark theme */
html[data-theme="dark"] .fs404-book-section .booking-form form button.th-btn[type="submit"] {
    background: #0B2038 !important;
    border-color: #54B6F4 !important;
    outline-color: rgba(84, 182, 244, 0.35) !important;
    color: #54B6F4 !important;
}

/* Hover */
.fs404-book-section .booking-form form button.th-btn[type="submit"]:hover {
    background: #54B6F4 !important;
    border-color: #54B6F4 !important;
    outline-color: rgba(84, 182, 244, 0.45) !important;
    color: #0B2038 !important;
}

/* Stop Taxiar pseudo layers from covering the border */
.fs404-book-section .booking-form form button.th-btn[type="submit"]::before,
.fs404-book-section .booking-form form button.th-btn[type="submit"]::after,
.fs404-book-section .booking-form form button.th-btn[type="submit"]:hover::before,
.fs404-book-section .booking-form form button.th-btn[type="submit"]:hover::after {
    content: none !important;
    display: none !important;
}

/* Textarea */
.fs404-book-section .booking-form textarea.form-control {
    height: auto !important;
    padding: 14px 18px !important;
    resize: vertical;
    min-height: 110px;
}

html[data-theme="dark"] .fs404-book-section .booking-form textarea.form-control {
    background: #0B2038 !important;
    border-color: rgba(234, 244, 251, 0.70) !important;
    color: #FFFFFF !important;
}

/* Error banner */
.fivestar-booking-error {
    max-width: 980px;
    margin: 0 auto 28px;
    background: #C0392B;
    color: #fff;
    padding: 18px 28px;
    border-radius: 14px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Dark mode select option text */
html[data-theme="dark"] .fs404-book-section .booking-form select option {
    background: #0B2038;
    color: #FFFFFF;
}

/* ================================================================
   Booking form layout alignment fix
   ================================================================ */

.fs404-book-section .booking-form .row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px 28px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fs404-book-section .booking-form .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

/* 3-column fields */
.fs404-book-section .booking-form .col-md-4 {
    grid-column: span 4;
}

/* 2-column fields */
.fs404-book-section .booking-form .col-md-6 {
    grid-column: span 6;
}

/* Full-width rows */
.fs404-book-section .booking-form .col-12 {
    grid-column: 1 / -1;
}

.fs404-book-section .booking-form label.fs404-field-label {
    min-height: 24px;
    margin-bottom: 10px !important;
}

.fs404-book-section .booking-form input,
.fs404-book-section .booking-form select,
.fs404-book-section .booking-form textarea,
.fs404-book-section .booking-form .form-control,
.fs404-book-section .booking-form .form-select {
    width: 100% !important;
}

.fs404-book-section .booking-form textarea.form-control {
    min-height: 130px !important;
    height: auto !important;
}

.fs404-book-section .booking-form button[type="submit"] {
    width: 100% !important;
    margin-top: 8px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .fs404-book-section .booking-form .col-md-4,
    .fs404-book-section .booking-form .col-md-6 {
        grid-column: span 6;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .fs404-book-section .booking-form .row {
        grid-template-columns: 1fr;
        gap: 18px !important;
    }

    .fs404-book-section .booking-form .col-md-4,
    .fs404-book-section .booking-form .col-md-6,
    .fs404-book-section .booking-form .col-12 {
        grid-column: 1 / -1;
    }
}