/* ==========================================
   L'OPERA ROYAL - BUTTONS COMPONENT
   Official button system
========================================== */

/*
|--------------------------------------------------------------------------
| Button system
|--------------------------------------------------------------------------
| 3 official variants:
| - Blue: main CTA
| - Gold: elegant secondary CTA
| - Transparent: over hero/images/dark backgrounds
|--------------------------------------------------------------------------
*/

.royal-btn {
    min-width: 180px;
    min-height: var(--royal-btn-height);
    padding: 0 var(--royal-btn-padding);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--royal-navy);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;

    font-family: var(--royal-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

    box-shadow: none;
    cursor: pointer;

    transition:
        color var(--royal-transition),
        background-color var(--royal-transition),
        border-color var(--royal-transition),
        transform var(--royal-transition);
}

.royal-btn:hover,
.royal-btn:focus-visible {
    text-decoration: none;
}

.royal-btn:active {
    transform: translateY(1px);
}

.royal-btn:disabled,
.royal-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.royal-btn:disabled:active,
.royal-btn[aria-disabled="true"]:active {
    transform: none;
}

/* ==========================================
   TYPE 1 — BLUE
   Main CTA: reservation, booking, important action.
========================================== */

.royal-btn--blue,
.royal-btn--primary {
    color: var(--royal-white);
    background: var(--royal-navy);
    border-color: var(--royal-navy);
}

.royal-btn--blue:hover,
.royal-btn--blue:focus-visible,
.royal-btn--primary:hover,
.royal-btn--primary:focus-visible {
    color: var(--royal-white);
    background: var(--royal-navy-dark);
    border-color: var(--royal-gold);
}

/* ==========================================
   TYPE 2 — GOLD
   Premium secondary CTA.
   Gold is used as accent only, not as full background.
========================================== */

.royal-btn--gold,
.royal-btn--outline {
    color: var(--royal-navy);
    background: transparent;
    border-color: var(--royal-gold);
}

.royal-btn--gold:hover,
.royal-btn--gold:focus-visible,
.royal-btn--outline:hover,
.royal-btn--outline:focus-visible {
    color: var(--royal-white);
    background: var(--royal-navy);
    border-color: var(--royal-gold);
}

/* ==========================================
   TYPE 3 — TRANSPARENT
   For hero, image backgrounds and navy sections.
========================================== */

.royal-btn--transparent,
.royal-btn--glass {
    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.22);
    border-color: rgba(var(--royal-gold-rgb), 0.82);

    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);
}

.royal-btn--transparent:hover,
.royal-btn--transparent:focus-visible,
.royal-btn--glass:hover,
.royal-btn--glass:focus-visible {
    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.52);
    border-color: var(--royal-gold);
}

/* ==========================================
   SIZES
========================================== */

.royal-btn--small {
    min-width: 148px;
    min-height: var(--royal-btn-height-sm);
    padding-inline: var(--royal-btn-padding-sm);

    font-size: 10px;
    letter-spacing: 0.12em;
}

.royal-btn--full {
    width: 100%;
}

/* ==========================================
   BUTTON GROUP
========================================== */

.royal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.royal-actions--center {
    justify-content: center;
}

.royal-actions--between {
    justify-content: space-between;
}

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

@media (max-width: 767px) {
    .royal-btn {
        width: auto;
        max-width: 100%;
        min-width: 0;
        min-height: 46px;
        padding-inline: 22px;

        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .royal-btn--small {
        width: auto;
        min-width: 132px;
        min-height: 40px;
        padding-inline: 18px;
    }

    .royal-btn--full-mobile {
        width: 100%;
    }

    .royal-actions {
        width: 100%;
        justify-content: center;
        gap: 12px;
    }
}