/**
 * Quote Generator — Standalone Layout CSS
 *
 * Provides the complete visual design for the booking search form
 * WITHOUT requiring Tailwind CSS or any specific WordPress theme.
 *
 * All rules are scoped to [data-qg-form] so nothing bleeds into
 * the host site's existing styles.
 *
 * Color tokens inherit from the active theme's CSS custom properties
 * when available, and fall back to the Ski-Lifts brand palette so
 * the form looks correct even on a bare WordPress install.
 *
 * This file works alongside booking-search.css (location picker
 * panels, flatpickr overrides, overlay/spinner).
 *
 * @package Quote_Generator
 * @since   2.2.0
 */

/* ── Box-sizing reset ────────────────────────────────────────────────── */
[data-qg-form] *,
[data-qg-form] *::before,
[data-qg-form] *::after {
    box-sizing: border-box;
}

/* ── Design tokens ───────────────────────────────────────────────────── */
/*
 * Inherit from the active theme when available (Ski-Lifts sets
 * --color-primary / --color-secondary / --color-green).
 * Hard-coded fallbacks match the Ski-Lifts brand palette.
 */
[data-qg-form] {
    --qg-primary:   var(--color-primary,   #1e3a8a);
    --qg-secondary: var(--color-secondary, #004C6D);
    --qg-green:     var(--color-green,     #1B5E20);
    --qg-border:    rgba(30, 58, 138, 0.5);   /* border-primary/50 */
    --qg-ring:      rgba(30, 58, 138, 0.5);   /* focus:ring-primary/50 */
}

/* ── Form wrapper ────────────────────────────────────────────────────── */
[data-qg-form] {
    width: 100%;
    background-color: #ffffff;
    border-radius: 0.5rem;          /* rounded-lg */
    padding: 1.5rem;                /* p-6 */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px  -4px rgba(0,0,0,0.1); /* shadow-lg */
                position: relative;
                z-index: 10;
}

/* ── Trip-type toggle ────────────────────────────────────────────────── */
[data-qg-form] .qg-trip-toggle-row {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;          /* mb-6 */
}

[data-qg-form] .qg-toggle-track {
    display: flex;
    background-color: var(--qg-secondary);
    border-radius: 9999px;          /* rounded-full */
    min-width: 260px;
    overflow: hidden;
}

[data-qg-form] .qg-toggle-btn {
    flex: 1;
    padding: 9px 1.25rem;           /* py-[9px] px-5 */
    font-size: 1.125rem;            /* text-lg */
    font-weight: 600;               /* font-semibold */
    white-space: nowrap;
    color: #ffffff;
    background-color: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

/* Active state — driven by aria-pressed (legacy bg-* classes kept for backwards compat).
   Inset ring is a non-color indicator so the active state is perceivable
   without relying on background color alone (WCAG 1.4.1). */
[data-qg-form] .qg-toggle-btn.bg-primary,
[data-qg-form] .qg-toggle-btn.bg-blue-900,
[data-qg-form] .qg-toggle-btn[aria-pressed="true"] {
    background-color: var(--qg-primary);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

[data-qg-form] .qg-toggle-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Field grids ─────────────────────────────────────────────────────── */
[data-qg-form] .qg-grid-return,
[data-qg-form] .qg-grid-oneway {
    display: grid;
    grid-template-columns: 1fr;     /* grid-cols-1 */
    gap: 0.5rem;                    /* gap-2 */
    align-items: end;               /* items-end */
}

@media (min-width: 768px) {
    [data-qg-form] .qg-grid-return  { grid-template-columns: repeat(3, 1fr); } /* md:grid-cols-3 */
    [data-qg-form] .qg-grid-oneway  { grid-template-columns: repeat(4, 1fr); gap: 1rem; } /* md:grid-cols-4 gap-4 */
}

@media (min-width: 1280px) {
    [data-qg-form] .qg-grid-return  { grid-template-columns: repeat(5, 1fr); gap: 1rem; } /* xl:grid-cols-5 xl:gap-4 */
}

/* ── Individual field wrapper ────────────────────────────────────────── */
[data-qg-form] .qg-field {
    position: relative;
}

/* Icon positioned inside the left edge of a field */
[data-qg-form] .qg-field-icon {
    position: absolute;
    left: 0.5rem;                   /* left-2 */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    line-height: 0;
}

[data-qg-form] .qg-field-icon svg {
    display: block;
}

/* ── Text / date inputs ──────────────────────────────────────────────── */
[data-qg-form] .qg-input {
    display: block;
    width: 100%;
    border: 1px solid var(--qg-border);
    border-radius: 0.375rem;        /* rounded-md */
    padding: 0.75rem 1rem 0.75rem 2.5rem; /* py-3 px-4 pl-10 */
    font-size: 1rem;                /* text-base */
    line-height: 1.5;
    color: inherit;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (min-width: 1280px) {
    [data-qg-form] .qg-input { font-size:0.9rem; padding: 0.85rem 1rem 0.75rem 2rem;} /* xl:text-lg */
}

[data-qg-form] .qg-input:focus {
    outline: none;
    border-color: var(--qg-border);
    box-shadow: 0 0 0 1px var(--qg-ring);
}

[data-qg-form] .qg-input::placeholder {
    color: #9ca3af;
}

/* ── Passenger trigger ───────────────────────────────────────────────── */
[data-qg-form] .qg-pax-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    border: 1px solid var(--qg-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 1rem;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
}

@media (min-width: 1280px) {
    [data-qg-form] .qg-pax-field { font-size:0.9rem; padding: 0.85rem 1rem 0.75rem 2rem; }
}

[data-qg-form] .qg-pax-chevron {
    color: #9ca3af;                 /* text-gray-400 */
    font-style: normal;
}

/* ── Passenger dropdown panel ────────────────────────────────────────── */
[data-qg-form] .qg-pax-dropdown {
    position: absolute;
    right: 0;                       /* right-0 */
    top: calc(100% + 0.5rem);       /* mt-2 below the trigger */
    width: 100%;
    min-width: 260px;
    background-color: #ffffff;
    border-radius: 0.5rem;          /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px  -4px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    padding: 1rem;                  /* p-4 */
    z-index: 50;
}

[data-qg-form] .qg-pax-title {
    font-weight: 600;               /* font-semibold */
    margin-bottom: 0.75rem;         /* mb-3 */
    font-size:18px;
    color: #000;
}

[data-qg-form] .qg-pax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;         /* mb-3 */
}

[data-qg-form] .qg-pax-row.qg-pax-row--last {
    margin-bottom: 1rem;            /* mb-4 */
}

[data-qg-form] .qg-pax-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;                   /* gap-3 */
}

[data-qg-form] .qg-counter-btn {
    padding: 0.25rem 0.75rem;       /* py-1 px-3 */
    background-color: #e5e7eb;      /* bg-gray-200 */
    border: none;
    border-radius: 0.25rem;         /* rounded */
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: inherit;
}

[data-qg-form] .qg-counter-btn:hover {
    background-color: #d1d5db;
}

[data-qg-form] .qg-done-btn {
    display: block;
    width: 100%;
    background-color:#118911;
    color:#fff;
    padding: 0.5rem 1rem;           /* py-2 */
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    text-align: center;
}

[data-qg-form] .qg-done-btn:hover {
    background-color: #002850;
}

/* ── Form footer row ─────────────────────────────────────────────────── */
[data-qg-form] .qg-form-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;                      /* gap-4 */
    margin-top: 1rem;               /* mt-4 (also has inline style mt:1rem) */
}

@media (min-width: 768px) {
    [data-qg-form] .qg-form-footer {
        flex-direction: row;        /* md:flex-row */
    }
}

[data-qg-form] .qg-contact-text {
    font-size: 1.125rem;            /* text-lg */
           /* text-gray-500 */
    font-weight: 500;               /* font-medium */
    margin: 0;
}

[data-qg-form] .qg-contact-text a {
    color: var(--qg-primary);       /* text-primary */
    text-decoration: underline;
}

/* ── Search button ───────────────────────────────────────────────────── */
/*
 * Provides btn-primary styling when the theme class isn't available.
 * Higher specificity via ID wins over the theme's .btn-primary on Ski-Lifts
 * too, but both produce visually identical output.
 */
[data-qg-form] #qg-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                    /* gap-2 */
    background-color: var(--qg-green);
    color: #ffffff;
    padding: 0.625rem 1.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1.125rem;            /* ~18px */
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
    white-space: nowrap;
    width: 100%;                    /* w-full on mobile */
}

@media (min-width: 768px) {
    [data-qg-form] #qg-search-submit {
        width: auto;                /* md:w-auto */
    }
}

[data-qg-form] #qg-search-submit:hover {
    color: #ffffff;
    background-color:#002850;
}

[data-qg-form] #qg-search-submit svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ── Icon sizing inside fields ───────────────────────────────────────── */
/* Ensures bundled SVGs fit neatly inside the 2.5rem left-padding gap */
[data-qg-form] .qg-field-icon svg,
[data-qg-form] .qg-field-icon img {
    width: 1.25rem;
    height: 1.25rem;
}

/* header-icon class used by some [icon] shortcode calls */
[data-qg-form] .header-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}