@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* ── Design tokens (Persian Tennis Directory) ── */
@theme {
    --font-sans: 'Vazirmatn', ui-sans-serif, system-ui, 'Tahoma', sans-serif;
    --font-en: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --color-tennis: #1f5d42;
    --color-forest: #143a2a;
    --color-ball: #d6ff3f;
    --color-clay: #c56f43;
    --color-surface: #fafaf7;
    --color-card: #ffffff;
    --color-border: #e7e7e2;
    --color-text: #202124;
    --color-text-secondary: #5f6368;
    --color-disabled: #9aa0a6;

    --shadow-card: 0 4px 20px rgb(0 0 0 / 0.04);
    --shadow-card-hover: 0 8px 28px rgb(0 0 0 / 0.08);
    --radius-card: 16px;
    --radius-btn: 12px;
    --motion-fast: 200ms ease;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.font-en {
    font-family: var(--font-en);
}

@layer components {
    /* ── Layout grid ── */
    .site-shell {
        @apply mx-auto w-full max-w-[1440px];
    }

    .site-container {
        @apply mx-auto w-full max-w-[1280px] px-4 md:px-5 xl:px-8;
    }

    /* ── Typography scale ── */
    .type-hero {
        @apply text-[1.75rem] font-bold leading-[2.25rem] tracking-tight text-[var(--color-text)] md:text-[2.5rem] md:leading-[3rem];
    }

    .type-h1 {
        @apply text-[2.25rem] font-bold leading-[3rem] tracking-tight text-[var(--color-text)];
    }

    .type-h2 {
        @apply text-2xl font-bold leading-8 tracking-tight text-[var(--color-text)];
    }

    .type-h3 {
        @apply text-2xl font-semibold leading-9 text-[var(--color-text)];
    }

    .type-card-title {
        @apply text-xl font-semibold leading-8 text-[var(--color-text)];
    }

    .type-body-lg {
        @apply text-lg font-normal leading-8 text-[var(--color-text-secondary)];
    }

    .type-body {
        @apply text-base font-normal leading-7 text-[var(--color-text-secondary)];
    }

    .type-meta {
        @apply text-sm font-medium leading-6 text-[var(--color-text-secondary)];
    }

    .type-caption {
        @apply text-xs font-normal leading-5 text-[var(--color-text-secondary)];
    }

    .type-label {
        @apply text-xs font-semibold uppercase tracking-[0.1em] text-[var(--color-disabled)];
    }

    .type-display {
        @apply text-[1.75rem] font-bold leading-[2.25rem] tracking-tight text-[var(--color-text)] md:text-[2.5rem] md:leading-[3rem];
    }

    .type-section-title {
        @apply text-[1.75rem] font-bold leading-[2.5rem] tracking-tight text-[var(--color-text)];
    }

    .type-lead {
        @apply text-lg font-normal leading-8 text-[var(--color-text-secondary)];
    }

    /* ── Surfaces ── */
    .site-card {
        border-radius: var(--radius-card);
        border: 1px solid var(--color-border);
        background: var(--color-card);
        box-shadow: var(--shadow-card);
    }

    .page-shell {
        background: var(--color-surface);
    }

    /* ── Buttons ── */
    .site-btn {
        @apply inline-flex items-center justify-center gap-2 font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2;
        border-radius: var(--radius-btn);
        transition-duration: var(--motion-fast);
    }

    .site-btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 bg-[var(--color-tennis)] text-white;
        box-shadow: 0 2px 8px rgb(31 93 66 / 0.2);
        transition-duration: var(--motion-fast);
    }

    .site-btn-primary:hover {
        background: var(--color-forest);
    }

    .site-btn-primary:focus {
        @apply ring-[var(--color-tennis)]/30;
    }

    .site-btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 border border-[var(--color-tennis)] bg-transparent text-[var(--color-tennis)];
        transition-duration: var(--motion-fast);
    }

    .site-btn-secondary:hover {
        background: rgb(31 93 66 / 0.06);
    }

    .site-btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition focus:outline-none focus:ring-2 focus:ring-offset-2 text-[var(--color-text-secondary)];
        transition-duration: var(--motion-fast);
    }

    .site-btn-ghost:hover {
        @apply bg-black/[0.04] text-[var(--color-text)];
    }

    /* ── Badges ── */
    .site-badge {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold;
    }

    .site-badge-featured {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-ball)] text-[var(--color-forest)];
    }

    .site-badge-brand {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-tennis)]/10 text-[var(--color-tennis)] ring-1 ring-[var(--color-tennis)]/15;
    }

    .site-badge-neutral {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-surface)] text-[var(--color-text-secondary)] ring-1 ring-[var(--color-border)];
    }

    .site-badge-accent {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-ball)]/25 text-[var(--color-forest)] ring-1 ring-[var(--color-ball)]/40;
    }

    .site-badge-clay {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-clay)]/10 text-[var(--color-clay)] ring-1 ring-[var(--color-clay)]/20;
    }

    .site-badge-verified {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--color-tennis)]/10 text-[var(--color-tennis)];
    }

    /* ── Form controls ── */
    .site-input {
        @apply w-full rounded-xl border border-[var(--color-border)] bg-white px-4 py-3.5 text-base text-[var(--color-text)] transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-tennis)] focus:outline-none focus:ring-4 focus:ring-[var(--color-tennis)]/10;
        transition-duration: var(--motion-fast);
    }

    .site-select {
        @apply w-full rounded-xl border border-[var(--color-border)] bg-white px-4 py-3.5 text-base text-[var(--color-text)] transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-tennis)] focus:outline-none focus:ring-4 focus:ring-[var(--color-tennis)]/10 cursor-pointer appearance-none pe-10;
        transition-duration: var(--motion-fast);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231F5D42' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 1rem center;
        background-size: 1rem;
    }

    .field-label {
        @apply mb-1.5 block text-sm font-medium text-[var(--color-text)];
    }

    /* ── Header ── */
    .site-header {
        @apply sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-forest)] text-white;
    }

    .site-header__inner {
        @apply flex h-14 items-center gap-3 md:h-16 md:gap-4;
    }

    .site-header__brand {
        @apply flex min-w-0 shrink-0 items-center gap-3;
    }

    .site-header__logo {
        @apply flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/15 md:size-11;
    }

    .site-header__nav {
        @apply hidden items-center gap-1 lg:flex;
    }

    .site-header__link {
        @apply rounded-lg px-3 py-2 text-sm font-medium text-white/80 transition hover:bg-white/10 hover:text-white;
        transition-duration: var(--motion-fast);
    }

    .site-header__link--active {
        @apply bg-white/10 text-white;
    }

    .site-header__search {
        @apply relative hidden min-w-0 flex-1 md:block;
    }

    .site-header__search-input {
        @apply w-full rounded-xl border border-white/15 bg-white/10 py-2.5 pe-4 ps-10 text-sm text-white placeholder:text-white/50 transition focus:border-white/30 focus:bg-white/15 focus:outline-none focus:ring-2 focus:ring-white/20;
        transition-duration: var(--motion-fast);
    }

    .site-header__actions {
        @apply flex shrink-0 items-center gap-2;
    }

    .site-header__menu-btn {
        @apply inline-flex size-10 items-center justify-center rounded-xl text-white/90 transition hover:bg-white/10 lg:hidden;
    }

    .site-mobile-drawer {
        @apply fixed inset-0 z-[70] lg:hidden;
    }

    .site-mobile-drawer__backdrop {
        @apply absolute inset-0 bg-black/50;
    }

    .site-mobile-drawer__panel {
        @apply absolute inset-y-0 start-0 w-[min(100%,20rem)] overflow-y-auto bg-[var(--color-forest)] p-5 shadow-2xl;
    }

    .site-mobile-drawer__link {
        @apply flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-white/85 transition hover:bg-white/10 hover:text-white;
    }

    /* ── Hero search ── */
    .hero-search {
        @apply relative overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)] bg-white p-4 md:p-5;
        box-shadow: var(--shadow-card);
    }

    .hero-search__glow {
        @apply pointer-events-none absolute -top-16 end-0 size-56 rounded-full bg-[var(--color-ball)]/15 blur-3xl;
    }

    .hero-search__field {
        @apply relative;
    }

    .hero-search__input {
        @apply w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] py-3 pe-4 ps-11 text-base font-medium text-[var(--color-text)] transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-tennis)] focus:bg-white focus:outline-none focus:ring-4 focus:ring-[var(--color-tennis)]/10;
        transition-duration: var(--motion-fast);
    }

    .hero-search__icon {
        @apply pointer-events-none absolute start-4 top-1/2 -translate-y-1/2 text-[var(--color-tennis)];
    }

    .hero-search__filters {
        @apply mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4;
    }

    .hero-stat {
        @apply flex flex-col items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-center;
    }

    /* ── Directory cards ── */
    .directory-card {
        border-radius: var(--radius-card);
        border: 1px solid var(--color-border);
        background: var(--color-card);
        box-shadow: var(--shadow-card);
        transition: transform var(--motion-fast), box-shadow var(--motion-fast);
    }

    .directory-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover);
    }

    .trainer-card {
        @apply relative flex h-full flex-col overflow-hidden;
        border-radius: var(--radius-card);
        border: 1px solid var(--color-border);
        background: var(--color-card);
        box-shadow: var(--shadow-card);
        transition: transform var(--motion-fast), box-shadow var(--motion-fast);
    }

    .trainer-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover);
    }

    .trainer-card__media {
        @apply relative aspect-[4/3] overflow-hidden bg-[var(--color-surface)];
    }

    .trainer-card__media::after {
        content: '';
        @apply pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white to-transparent;
    }

    .trainer-card__body {
        @apply flex flex-1 flex-col p-4;
    }

    .trainer-card__meta {
        @apply mt-3 grid gap-1.5 rounded-xl bg-[var(--color-surface)] p-2.5 ring-1 ring-[var(--color-border)];
    }

    .trainer-card__meta-row {
        @apply flex items-center justify-between gap-3 text-sm;
    }

    .trainer-card__meta-label {
        @apply shrink-0 text-xs font-medium text-[var(--color-disabled)];
    }

    .trainer-card__meta-value {
        @apply text-end text-sm font-semibold text-[var(--color-text)];
    }

    .trainer-card__footer {
        @apply mt-auto flex items-center justify-between border-t border-[var(--color-border)] pt-3 text-sm font-semibold text-[var(--color-tennis)];
    }

    .club-card {
        @apply flex h-full min-w-[260px] flex-col overflow-hidden sm:min-w-[280px];
        border-radius: var(--radius-card);
        border: 1px solid var(--color-border);
        background: var(--color-card);
        box-shadow: var(--shadow-card);
        transition: transform var(--motion-fast), box-shadow var(--motion-fast);
    }

    .club-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover);
    }

    .club-card__media {
        @apply relative aspect-[16/10] overflow-hidden bg-[var(--color-surface)];
    }

    .club-card__body {
        @apply flex flex-1 flex-col gap-2 p-4;
    }

    /* ── Filter form (compact / secondary) ── */
    .filter-panel {
        @apply overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)] bg-white;
        box-shadow: var(--shadow-card);
    }

    .filter-form {
        @apply flex flex-col;
    }

    .filter-form__header {
        @apply flex items-start gap-3 border-b border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-4 md:px-5;
    }

    .filter-form__header-icon {
        @apply flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--color-tennis)] text-white;
    }

    .filter-form__title {
        @apply text-lg font-bold text-[var(--color-text)] md:text-xl;
    }

    .filter-form__subtitle {
        @apply mt-1 text-sm text-[var(--color-text-secondary)];
    }

    .filter-form__fields {
        @apply grid gap-3 p-4 md:grid-cols-12 md:items-end md:gap-3 md:p-5;
    }

    .filter-form--compact .filter-form__fields {
        @apply p-4 md:grid-cols-1;
    }

    .filter-field {
        @apply flex flex-col;
    }

    .filter-label {
        @apply mb-2 block text-sm font-medium text-[var(--color-text)];
    }

    .filter-label--invisible {
        @apply hidden md:block md:invisible;
    }

    .filter-control {
        @apply relative flex items-center;
    }

    .filter-control__icon {
        @apply pointer-events-none absolute start-3.5 z-10 text-[var(--color-tennis)]/70;
    }

    .filter-input,
    .filter-select {
        @apply w-full rounded-xl border border-[var(--color-border)] bg-white py-3.5 ps-11 pe-4 text-base font-medium text-[var(--color-text)] transition placeholder:font-normal placeholder:text-[var(--color-disabled)] focus:border-[var(--color-tennis)] focus:outline-none focus:ring-4 focus:ring-[var(--color-tennis)]/10;
        transition-duration: var(--motion-fast);
    }

    .filter-select {
        @apply cursor-pointer appearance-none bg-[length:1rem] bg-[position:left_1rem_center] bg-no-repeat pe-10;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231F5D42' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    }

    .filter-actions {
        @apply flex gap-2.5;
    }

    .filter-submit {
        @apply inline-flex min-h-[3.25rem] flex-1 items-center justify-center gap-2 rounded-xl bg-[var(--color-tennis)] px-5 text-base font-bold text-white transition hover:bg-[var(--color-forest)] focus:outline-none focus:ring-4 focus:ring-[var(--color-tennis)]/20 active:scale-[0.98];
        transition-duration: var(--motion-fast);
    }

    .filter-clear {
        @apply inline-flex size-[3.25rem] shrink-0 items-center justify-center rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-secondary)] transition hover:border-red-200 hover:bg-red-50 hover:text-red-600;
        transition-duration: var(--motion-fast);
    }

    .filter-chip-bar {
        @apply mb-4 flex flex-wrap items-center gap-2 rounded-[var(--radius-card)] border border-[var(--color-border)] bg-white px-3 py-2;
        box-shadow: var(--shadow-card);
    }

    /* ── Editorial / portal sections ── */
    .portal-section {
        @apply rounded-[var(--radius-card)] border border-[var(--color-border)] bg-white p-4 md:p-5;
        box-shadow: var(--shadow-card);
    }

    .portal-section--clay {
        @apply border-[var(--color-clay)]/20 bg-gradient-to-br from-white to-[var(--color-clay)]/[0.04];
    }

    .editorial-card {
        @apply overflow-hidden;
        border-radius: var(--radius-card);
        border: 1px solid var(--color-border);
        background: var(--color-card);
        box-shadow: var(--shadow-card);
        transition: transform var(--motion-fast), box-shadow var(--motion-fast);
    }

    .editorial-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-card-hover);
    }

    .editorial-card--featured {
        @apply lg:col-span-2 lg:row-span-2;
    }

    .editorial-card__media {
        @apply aspect-[16/10] bg-[var(--color-surface)] lg:aspect-auto lg:min-h-[160px];
    }

    .editorial-card__body {
        @apply p-4;
    }

    .coming-soon-strip {
        @apply inline-flex items-center gap-2 rounded-full bg-[var(--color-surface)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)] ring-1 ring-[var(--color-border)];
    }

    .carousel-track {
        @apply flex gap-3 overflow-x-auto pb-1 scroll-smooth md:gap-4;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }

    .carousel-track::-webkit-scrollbar {
        height: 6px;
    }

    .carousel-track::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 999px;
    }

    /* ── Content sections ── */
    .section-heading {
        @apply mb-4 flex flex-col gap-0.5 sm:flex-row sm:items-end sm:justify-between;
    }

    .section-heading__title {
        @apply text-2xl font-bold leading-8 tracking-tight text-[var(--color-text)];
    }

    .section-heading__subtitle {
        @apply text-sm font-normal leading-6 text-[var(--color-text-secondary)] max-w-2xl;
    }

    .content-section {
        @apply rounded-[var(--radius-card)] border border-[var(--color-border)] bg-white p-4 md:p-5;
        box-shadow: var(--shadow-card);
    }

    .faq-item {
        @apply rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4;
    }

    .region-pill {
        @apply inline-flex min-h-10 items-center justify-center rounded-xl border border-[var(--color-border)] bg-white px-4 text-sm font-semibold text-[var(--color-text-secondary)] transition hover:border-[var(--color-tennis)]/30 hover:bg-[var(--color-tennis)]/5 hover:text-[var(--color-tennis)];
        transition-duration: var(--motion-fast);
    }

    .contact-btn {
        @apply flex items-center gap-3 rounded-xl border border-[var(--color-border)] px-4 py-3 text-sm transition hover:border-[var(--color-tennis)]/30 hover:bg-[var(--color-tennis)]/5;
        transition-duration: var(--motion-fast);
    }

    /* ── Footer ── */
    .site-footer {
        @apply mt-8 border-t border-[var(--color-border)] bg-[var(--color-forest)] text-white md:mt-10;
    }

    .site-footer__link {
        @apply text-sm text-white/70 transition hover:text-white;
        transition-duration: var(--motion-fast);
    }

    /* ── Mobile ── */
    .mobile-nav-item {
        @apply flex min-h-14 flex-col items-center justify-center gap-1 rounded-xl px-2 py-2 text-[11px] font-medium text-[var(--color-text-secondary)] transition;
        transition-duration: var(--motion-fast);
    }

    .mobile-nav-item-active {
        @apply bg-[var(--color-tennis)]/10 text-[var(--color-tennis)];
    }

    .mobile-filter-panel {
        @apply fixed inset-0 z-[60];
    }

    .mobile-filter-backdrop {
        @apply absolute inset-0 bg-black/40;
    }

    .mobile-filter-sheet {
        @apply absolute inset-x-0 bottom-0 max-h-[88vh] overflow-y-auto rounded-t-[var(--radius-card)] bg-white shadow-2xl;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-filter-sheet__header {
        @apply flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-4;
    }

    .mobile-filter-sheet__title {
        @apply text-lg font-bold text-[var(--color-text)];
    }

    body.has-mobile-nav {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }

    body.mobile-filter-open,
    body.mobile-nav-open {
        @apply overflow-hidden;
    }

    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}