/*
 * Shared look for the secondary pages (account, estimate, login, pay).
 * Mirrors the booking page: on desktop the brand green does the work, on
 * phones (< 1024px) the UI goes black & white like the ride-hailing apps and
 * the green is kept for the few things worth pointing at - a price, a tick,
 * the live progress bar.
 *
 * Tailwind (Play CDN) does the layout; this file only carries the rules that
 * are awkward or repetitive as utilities.
 */

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
[x-cloak] { display: none !important; }

input, select, textarea {
    font-size: 16px !important;           /* no iOS zoom on focus */
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #77c729 !important;
    box-shadow: 0 0 0 3px rgba(119, 199, 41, 0.15);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Primary button */
.btn-primary {
    background: linear-gradient(135deg, #77c729 0%, #5fa71f 100%);
    color: #fff;
    transition: all 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(119, 199, 41, 0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Secondary (outlined) button */
.btn-secondary {
    background: #fff;
    color: #111827;
    border: 1.5px solid #e5e7eb;
    transition: all 0.2s;
}
.btn-secondary:hover { border-color: #9ca3af; }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Selectable tiles (payment method, vehicle, saved card...) */
.option-card { transition: all 0.2s ease; cursor: pointer; }
.option-card:hover { border-color: #77c729; background: #f4fbeb; }
.option-card.selected {
    border-color: #77c729;
    background: #f4fbeb;
    box-shadow: 0 0 0 2px rgba(119, 199, 41, 0.2);
}

/* Page header honours the notch */
header.site-header { padding-top: env(safe-area-inset-top, 0px); }

/* Sticky bottom action bar (phones) - honours the home indicator */
.action-bar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
}

/* Thin shimmer used while something loads */
.shimmer {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Everything comfortably tappable on phones */
@media (max-width: 1023px) {
    input, select, textarea, .option-card, .btn-primary, .btn-secondary { min-height: 48px; }

    body { background: #f3f4f6; }

    /* Phone top bar: round white controls floating over the page, same as
       the booking page's menu button */
    .app-topbar {
        position: sticky; top: 0; z-index: 40;
        padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 0.75rem 0.75rem;
        background: linear-gradient(#f3f4f6 70%, rgba(243, 244, 246, 0));
    }
    .app-topbar .round-btn {
        width: 2.75rem; height: 2.75rem; border-radius: 9999px;
        background: #fff; color: #1f2937;
        box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.1), 0 4px 6px -4px rgba(17, 24, 39, 0.1);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .app-topbar .round-btn:active { transform: scale(0.95); }

    /* Flat grey inputs like the booking sheet */
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
    input[type="date"], input[type="time"], select, textarea {
        background: #f3f4f6;
        border-color: transparent;
    }
    .bg-white input[type="text"], .bg-white input[type="tel"], .bg-white input[type="email"],
    .bg-white input[type="number"], .bg-white input[type="date"], .bg-white input[type="time"],
    .bg-white select, .bg-white textarea {
        background: #f3f4f6;
    }
    input:focus, select:focus, textarea:focus {
        border-color: #111111 !important;
        box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
    }

    /* Black & white palette */
    .btn-primary { background: #111111; color: #fff; }
    .btn-primary:hover { transform: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
    .btn-primary:disabled { background: #111111; opacity: 0.3; }
    .option-card:hover { border-color: #d1d5db; background: #fff; }
    .option-card.selected { border-color: #111111; background: #fff; box-shadow: none; }

    /* Sticky bottom bar */
    .action-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: #fff;
        box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.06);
        padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem;
    }
    .has-action-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem); }
}