/* =========================================================
   PARYX COMPONENTS
   Shared cards, buttons, actions, forms and feedback
   ========================================================= */

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    display: grid;

    gap:
        var(--space-3);
}

.section + .section {
    margin-top:
        var(--space-6);
}

.section__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-3);
}

.section__title {
    margin: 0;

    color:
        var(--primary, var(--color-primary));

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.section__link {
    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;
}

/* =========================================================
   CARDS
   ========================================================= */

.card {
    position: relative;

    overflow: hidden;

    padding:
        var(--space-4);

    color:
        var(--color-text);

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border:
        1px solid
        var(--color-border-brand);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-card);
}

.card--compact {
    padding:
        var(--space-3);
}

.card--interactive {
    display: block;

    color: inherit;

    text-decoration:
        none;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.card--interactive:active {
    transform:
        scale(0.985);

    box-shadow:
        var(--shadow-sm);
}

.card--selected {
    background:
        linear-gradient(
            145deg,
            #edf4ef,
            var(--color-primary-light)
        );

    border-color:
        var(--color-primary);
}

/* Optional reusable sage card */

.card--sage {
    background:
        linear-gradient(
            145deg,
            #f1f5f1 0%,
            var(--color-surface-sage) 100%
        );
}

/* Optional reusable premium green card */

.card--brand {
    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            #084733 0%,
            var(--color-primary-dark) 100%
        );

    border-color:
        rgba(212, 175, 55, 0.25);

    box-shadow:
        var(--shadow-brand);
}

.card__eyebrow {
    display: flex;

    align-items: center;

    gap:
        var(--space-2);

    margin:
        0 0
        var(--space-2);

    color: inherit;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}

.card__title {
    margin: 0;

    color: inherit;

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.25;
}

.card__text {
    margin:
        var(--space-2)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}

.card--brand .card__text {
    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
}

.card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-3);

    margin-top:
        var(--space-4);
}

/* =========================================================
   HERO CARD
   ========================================================= */

.hero-card {
    position: relative;

    overflow: hidden;

    padding:
        var(--space-5);

    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            #084733 0%,
            var(--color-primary) 48%,
            var(--color-primary-dark) 100%
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.22);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-brand);
}

.hero-card::before {
    position: absolute;

    top: -4rem;
    right: -3rem;

    width: 12rem;
    height: 12rem;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.12),
            transparent 68%
        );

    border-radius:
        50%;

    content: "";

    pointer-events:
        none;
}

.hero-card::after {
    position: absolute;

    right: -2rem;
    bottom: -3rem;

    width: 10rem;
    height: 10rem;

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius:
        50%;

    content: "";

    pointer-events:
        none;
}

.hero-card__eyebrow {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;

    gap:
        var(--space-2);

    margin:
        0 0
        var(--space-3);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.hero-card__value {
    position: relative;
    z-index: 1;

    margin: 0;

    color:
        var(--color-accent);

    font-size:
        var(--font-size-3xl);

    font-weight:
        var(--font-weight-bold);

    line-height: 1;
}

.hero-card__title {
    position: relative;
    z-index: 1;

    margin:
        var(--space-2)
        0 0;

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-semibold);
}

.hero-card__meta {
    position: relative;
    z-index: 1;

    margin:
        var(--space-1)
        0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        var(--font-size-sm);
}

.hero-card__actions {
    position: relative;
    z-index: 1;

    display: grid;

    gap:
        var(--space-2);

    margin-top:
        var(--space-5);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        var(--space-2);

    min-height: 3rem;

    padding:
        var(--space-3)
        var(--space-5);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    line-height: 1;

    text-align:
        center;

    text-decoration:
        none;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-md);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:active {
    transform:
        scale(0.97);
}

.button:disabled {
    cursor:
        not-allowed;

    opacity:
        0.55;
}

.button--full {
    width: 100%;
}

.button--primary {
    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            #084733,
            var(--color-primary)
        );

    border-color:
        var(--color-primary);

    box-shadow:
        0 6px 16px
        rgba(6, 56, 42, 0.16);
}

.button--primary:hover {
    background:
        var(--color-primary-dark);
}

.button--secondary {
    color:
        var(--color-primary);

    background:
        var(--color-surface);

    border-color:
        rgba(6, 56, 42, 0.24);
}

.button--gold {
    color:
        var(--color-primary-dark);

    background:
        linear-gradient(
            135deg,
            #e4c35d,
            var(--color-accent)
        );

    border-color:
        var(--color-accent-dark);

    box-shadow:
        0 5px 14px
        rgba(212, 175, 55, 0.16);
}

.button--ghost {
    color:
        var(--color-primary);

    background:
        transparent;
}

.button--danger {
    color:
        #ffffff;

    background:
        var(--color-danger);
}

.button--hero {
    color:
        var(--color-primary-dark);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f6f3
        );

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.12);
}

.button__icon {
    width: 1.25rem;
    height: 1.25rem;

    flex:
        0 0 auto;
}

/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.quick-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--space-3);
}

.quick-action {
    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        var(--space-2);

    min-height: 3.5rem;

    padding:
        var(--space-3);

    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            #084733,
            var(--color-primary)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.16);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-brand);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.quick-action:active {
    transform:
        scale(0.97);

    box-shadow:
        var(--shadow-sm);
}

.quick-action--primary {
    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            #084733,
            var(--color-primary)
        );

    border-color:
        rgba(212, 175, 55, 0.16);
}

.quick-action--gold {
    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    border-color:
        rgba(212, 175, 55, 0.22);
}

.quick-action svg {
    color:
        var(--color-accent);
}

/* =========================================================
   BADGES
   ========================================================= */

.badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap:
        var(--space-1);

    min-height: 1.75rem;

    padding:
        var(--space-1)
        var(--space-3);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    line-height: 1;

    border-radius:
        var(--radius-round);
}

.badge--open,
.badge--success {
    color:
        var(--color-success);

    background:
        #e7f3e9;
}

.badge--available,
.badge--gold {
    color:
        #765500;

    background:
        var(--color-accent-light);
}

.badge--info,
.badge--competition {
    color:
        var(--color-info);

    background:
        #e8f1f5;
}

.badge--warning {
    color:
        var(--color-warning);

    background:
        #fff3df;
}

.badge--danger,
.badge--full {
    color:
        var(--color-danger);

    background:
        #fde9e9;
}

.badge--neutral,
.badge--booked,
.badge--cancelled {
    color:
        var(--color-text-muted);

    background:
        var(--color-surface-muted);
}

/* =========================================================
   FORMS
   ========================================================= */

.form-group {
    display: grid;

    gap:
        var(--space-2);
}

.form-label {
    color:
        var(--color-text);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}

.form-hint {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;

    min-height:
        3.25rem;

    padding:
        var(--space-3)
        var(--space-4);

    color:
        var(--color-text);

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border:
        1px solid
        var(--color-border-strong);

    border-radius:
        var(--radius-md);

    outline: none;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.7);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-textarea {
    min-height: 7rem;

    resize:
        vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(6, 56, 42, 0.10);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color:
        var(--color-text-soft);
}

.form-input[
    aria-invalid="true"
],
.form-select[
    aria-invalid="true"
],
.form-textarea[
    aria-invalid="true"
] {
    border-color:
        var(--color-danger);
}

.form-error {
    margin: 0;

    color:
        var(--color-danger);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);
}

/* =========================================================
   SEARCH
   ========================================================= */

.search-field {
    position: relative;
}

.search-field__input {
    width: 100%;

    min-height:
        3.25rem;

    padding:
        var(--space-3)
        var(--space-4)
        var(--space-3)
        3rem;

    color:
        var(--color-text);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    outline: none;

    box-shadow:
        var(--shadow-sm);
}

.search-field__input:focus {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(6, 56, 42, 0.10);
}

.search-field__icon {
    position: absolute;

    top: 50%;
    left:
        var(--space-4);

    width: 1.25rem;
    height: 1.25rem;

    color:
        var(--color-primary);

    pointer-events:
        none;

    transform:
        translateY(-50%);
}

/* =========================================================
   LISTS
   ========================================================= */

.list-card {
    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border:
        1px solid
        var(--color-border-brand);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-card);
}

.list-item {
    display: flex;

    align-items: center;

    gap:
        var(--space-3);

    min-height:
        4.5rem;

    padding:
        var(--space-3)
        var(--space-4);

    color: inherit;

    text-decoration:
        none;

    transition:
        background var(--transition-fast);
}

.list-item + .list-item {
    border-top:
        1px solid
        var(--color-border);
}

.list-item:active {
    background:
        var(--color-surface-sage);
}

.list-item__icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    width: 2.75rem;
    height: 2.75rem;

    color:
        var(--color-primary);

    background:
        linear-gradient(
            145deg,
            #eff5f0,
            var(--color-primary-light)
        );

    border:
        1px solid
        rgba(6, 56, 42, 0.08);

    border-radius:
        var(--radius-round);
}

.list-item__content {
    min-width: 0;

    flex: 1;
}

.list-item__title {
    margin: 0;

    color:
        var(--color-text);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);
}

.list-item__subtitle {
    margin:
        var(--space-1)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}

.list-item__meta {
    flex:
        0 0 auto;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    display: flex;

    align-items:
        flex-start;

    gap:
        var(--space-3);

    padding:
        var(--space-4);

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-md);
}

.alert--info {
    color:
        var(--color-info);

    background:
        #edf5f7;

    border-color:
        #cfe1e8;
}

.alert--success {
    color:
        var(--color-success);

    background:
        #eaf5ec;

    border-color:
        #cee6d3;
}

.alert--warning {
    color:
        var(--color-warning);

    background:
        #fff5e6;

    border-color:
        #efd7ae;
}

.alert--danger {
    color:
        var(--color-danger);

    background:
        #fdecec;

    border-color:
        #efc5c5;
}

.alert__content {
    min-width: 0;
}

.alert__title {
    margin: 0;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);
}

.alert__text {
    margin:
        var(--space-1)
        0 0;

    color:
        var(--color-text);

    font-size:
        var(--font-size-sm);
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty-state {
    display: grid;

    justify-items: center;

    gap:
        var(--space-3);

    padding:
        var(--space-8)
        var(--space-5);

    text-align:
        center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f4f0
        );

    border:
        1px solid
        var(--color-border-brand);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-card);
}

.empty-state__icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 4rem;
    height: 4rem;

    color:
        var(--color-accent-dark);

    background:
        var(--color-accent-light);

    border-radius:
        var(--radius-round);
}

.empty-state__title {
    margin: 0;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-bold);
}

.empty-state__text {
    max-width: 28rem;

    margin: 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */

.toast {
    position: fixed;

    right:
        var(--space-4);

    bottom:
        calc(
            var(--bottom-nav-height) +
            var(--safe-area-bottom) +
            var(--space-4)
        );

    left:
        var(--space-4);

    z-index: 200;

    display: flex;

    align-items: center;

    gap:
        var(--space-3);

    max-width: 32rem;

    min-height:
        3.5rem;

    margin:
        0 auto;

    padding:
        var(--space-3)
        var(--space-4);

    color:
        var(--color-text-inverse);

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.16);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-lg);

    animation:
        toast-in
        var(--transition-standard)
        both;
}

.toast--success {
    background:
        var(--color-success);
}

.toast--danger {
    background:
        var(--color-danger);
}

@keyframes toast-in {
    from {
        opacity: 0;

        transform:
            translateY(1rem);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   LOADING
   ========================================================= */

.loading-spinner {
    width: 1.5rem;
    height: 1.5rem;

    border:
        3px solid
        var(--color-border);

    border-top-color:
        var(--color-accent);

    border-radius:
        50%;

    animation:
        loading-spin
        700ms
        linear
        infinite;
}

@keyframes loading-spin {
    to {
        transform:
            rotate(360deg);
    }
}

.skeleton {
    min-height: 1rem;

    background:
        linear-gradient(
            90deg,
            var(--color-surface-muted) 25%,
            #ffffff 50%,
            var(--color-surface-muted) 75%
        );

    background-size:
        200% 100%;

    border-radius:
        var(--radius-sm);

    animation:
        skeleton-loading
        1.3s
        infinite;
}

@keyframes skeleton-loading {
    from {
        background-position:
            200% 0;
    }

    to {
        background-position:
            -200% 0;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 48rem) {
    .quick-actions {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .hero-card {
        padding:
            var(--space-6);
    }

    .toast {
        right:
            var(--space-6);

        bottom:
            var(--space-6);

        left:
            auto;

        width:
            min(
                24rem,
                calc(
                    100% -
                    var(--space-12)
                )
            );

        margin: 0;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {
    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}