/* =========================================================
   TEN ONE RESORT
   Button System
   buttons.css
   ========================================================= */


/* =========================================================
   1. BASE BUTTON
   ========================================================= */

.btn {
    position: relative;

    display: inline-flex;

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

    gap: var(--space-3);

    min-height: var(--button-height);

    padding-inline: var(--button-padding-x);

    border: 1px solid transparent;
    border-radius: var(--button-radius);

    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    overflow: hidden;

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


/* =========================================================
   2. BUTTON INTERACTION
   ========================================================= */

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}


/* =========================================================
   3. KEYBOARD FOCUS
   ========================================================= */

.btn:focus-visible {
    outline: 2px solid var(--color-water);

    outline-offset: 4px;

    box-shadow:
        0 0 0 4px rgba(95, 169, 184, 0.2);
}


/* =========================================================
   4. PRIMARY BUTTON
   Main Ten One CTA
   ========================================================= */

.btn-primary {
    color: var(--color-white);

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

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

    box-shadow:
        0 8px 24px rgba(22, 74, 58, 0.2);
}


.btn-primary:hover {
    color: var(--color-white);

    background-color: var(--color-primary-dark);

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

    box-shadow:
        0 12px 30px rgba(22, 74, 58, 0.28);
}


/* =========================================================
   5. WATER BUTTON
   Alternative CTA
   ========================================================= */

.btn-water {
    color: var(--color-white);

    background-color: var(--color-water-dark);

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

    box-shadow:
        0 8px 24px rgba(52, 123, 138, 0.18);
}


.btn-water:hover {
    color: var(--color-white);

    background-color: var(--color-water);

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

    box-shadow:
        0 12px 30px rgba(52, 123, 138, 0.25);
}


/* =========================================================
   6. SECONDARY / OUTLINE BUTTON
   ========================================================= */

.btn-secondary {
    color: var(--color-white);

    background-color: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.65);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.btn-secondary:hover {
    color: var(--color-primary);

    background-color: var(--color-white);

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

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   7. LIGHT BUTTON
   For dark/natural sections
   ========================================================= */

.btn-light {
    color: var(--color-primary);

    background-color: var(--color-white);

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

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.1);
}


.btn-light:hover {
    color: var(--color-primary-dark);

    background-color: var(--color-white-soft);

    border-color: var(--color-white-soft);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   8. OUTLINE DARK BUTTON
   For light sections
   ========================================================= */

.btn-outline {
    color: var(--color-primary);

    background-color: transparent;

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


.btn-outline:hover {
    color: var(--color-white);

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

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


/* =========================================================
   9. OUTLINE WATER BUTTON
   ========================================================= */

.btn-outline-water {
    color: var(--color-water-dark);

    background-color: transparent;

    border-color: var(--color-water-dark);
}


.btn-outline-water:hover {
    color: var(--color-white);

    background-color: var(--color-water-dark);

    border-color: var(--color-water-dark);
}


/* =========================================================
   10. WHATSAPP BUTTON
   ========================================================= */

.btn-whatsapp {
    color: var(--color-white);

    background-color: #25D366;

    border-color: #25D366;

    box-shadow:
        0 8px 24px rgba(37, 211, 102, 0.2);
}


.btn-whatsapp:hover {
    color: var(--color-white);

    background-color: #1DA851;

    border-color: #1DA851;

    box-shadow:
        0 12px 30px rgba(37, 211, 102, 0.28);
}


/* WhatsApp icon */

.btn-whatsapp i,
.btn-whatsapp svg {
    font-size: var(--icon-md);
}


/* =========================================================
   11. GHOST BUTTON
   ========================================================= */

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

    background-color: transparent;

    border-color: transparent;

    box-shadow: none;
}


.btn-ghost:hover {
    color: var(--color-primary-dark);

    background-color: rgba(22, 74, 58, 0.06);

    border-color: transparent;
}


/* =========================================================
   12. TEXT BUTTON
   ========================================================= */

.btn-text {
    min-height: auto;

    padding: 0;

    color: var(--color-primary);

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}


.btn-text:hover {
    color: var(--color-primary-dark);

    transform: none;
}


/* =========================================================
   13. LARGE BUTTON
   ========================================================= */

.btn-lg {
    min-height: var(--button-height-large);

    padding-inline: 1.75rem;

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


/* =========================================================
   14. SMALL BUTTON
   ========================================================= */

.btn-sm {
    min-height: var(--button-height-small);

    padding-inline: 1.15rem;

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


/* =========================================================
   15. EXTRA SMALL BUTTON
   ========================================================= */

.btn-xs {
    min-height: 36px;

    padding-inline: 0.9rem;

    font-size: 0.7rem;
}


/* =========================================================
   16. FULL WIDTH BUTTON
   ========================================================= */

.btn-full {
    width: 100%;
}


/* =========================================================
   17. ICON BUTTON
   ========================================================= */

.btn-icon {
    width: var(--button-height);
    height: var(--button-height);

    min-height: var(--button-height);

    padding: 0;

    border-radius: 50%;
}


.btn-icon.btn-sm {
    width: var(--button-height-small);
    height: var(--button-height-small);

    min-height: var(--button-height-small);
}


.btn-icon.btn-lg {
    width: var(--button-height-large);
    height: var(--button-height-large);

    min-height: var(--button-height-large);
}


/* =========================================================
   18. ARROW BUTTON
   ========================================================= */

.btn-arrow {
    display: inline-flex;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.15);

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


.btn:hover .btn-arrow {
    transform: translateX(3px);

    background-color: rgba(255, 255, 255, 0.25);
}


/* Dark-background arrow */

.btn-outline .btn-arrow,
.btn-ghost .btn-arrow {
    background-color: rgba(22, 74, 58, 0.08);
}


.btn-outline:hover .btn-arrow,
.btn-ghost:hover .btn-arrow {
    background-color: rgba(255, 255, 255, 0.15);
}


/* =========================================================
   19. BUTTON WITH ICON
   ========================================================= */

.btn > i,
.btn > svg,
.btn > span > i,
.btn > span > svg {
    flex-shrink: 0;
}


/* =========================================================
   20. BUTTON LOADING STATE
   ========================================================= */

.btn.is-loading {
    position: relative;

    pointer-events: none;

    color: transparent !important;
}


.btn.is-loading::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.35);

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

    border-radius: 50%;

    animation: button-spinner 700ms linear infinite;
}


@keyframes button-spinner {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   21. DISABLED BUTTON
   ========================================================= */

.btn:disabled,
.btn.disabled {
    opacity: 0.5;

    pointer-events: none;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   22. BUTTON GROUP
   ========================================================= */

.btn-group {
    display: inline-flex;

    align-items: center;

    gap: var(--space-3);

    flex-wrap: wrap;
}


.btn-group-centered {
    justify-content: center;
}


.btn-group-stretch {
    width: 100%;
}


.btn-group-stretch .btn {
    flex: 1;
}


/* =========================================================
   23. HERO BUTTON OVERRIDES
   ========================================================= */

.hero-book-btn {
    min-width: 180px;
}


.hero-book-btn i {
    font-size: var(--icon-md);
}


/* =========================================================
   24. NAVBAR BOOKING BUTTON
   ========================================================= */

.navbar-booking-btn {
    position: relative;

    display: inline-flex;

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

    gap: var(--space-2);

    min-height: 46px;

    padding-inline: 1.15rem;

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

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

    color: var(--color-white);

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

    font-family: var(--font-body);

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

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

    line-height: 1;

    white-space: nowrap;

    box-shadow:
        0 6px 18px rgba(22, 74, 58, 0.12);

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


.navbar-booking-btn:hover {
    color: var(--color-white);

    background-color: var(--color-primary-dark);

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

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(22, 74, 58, 0.2);
}


.navbar-booking-btn .whatsapp-icon {
    display: inline-flex;

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


.navbar-booking-btn i {
    font-size: var(--icon-sm);
}


/* =========================================================
   25. LIGHT NAVBAR BOOKING STATE
   Used before/after navbar styling
   ========================================================= */

.navbar.is-scrolled .navbar-booking-btn {
    color: var(--color-white);

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

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


/* =========================================================
   26. BUTTON RIPPLE / SHINE
   Subtle luxury interaction
   ========================================================= */

.btn-shine {
    isolation: isolate;
}


.btn-shine::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 600ms ease;

    pointer-events: none;
}


.btn-shine:hover::before {
    left: 140%;
}


/* =========================================================
   27. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .btn {
        min-height: var(--button-height);

        padding-inline: 1.25rem;
    }


    .btn-lg {
        min-height: 54px;

        padding-inline: 1.5rem;
    }


    .btn-group {
        width: 100%;
    }


    .btn-group .btn {
        flex: 1 1 auto;
    }


    .hero-book-btn {
        min-width: 0;
    }


    .navbar-booking-btn {
        min-height: 42px;

        padding-inline: 1rem;
    }

}


/* =========================================================
   28. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .btn {
        min-height: 48px;

        padding-inline: 1rem;

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


    .btn-lg {
        min-height: 52px;
    }


    .btn-group {
        flex-direction: column;

        align-items: stretch;
    }


    .btn-group .btn {
        width: 100%;
    }


    .hero-actions .btn {
        width: 100%;
    }


    .navbar-booking-btn {
        padding-inline: 0.85rem;

        font-size: 0.72rem;
    }

}


/* =========================================================
   29. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn-arrow,
    .navbar-booking-btn {
        transition: none;
    }


    .btn:hover {
        transform: none;
    }


    .btn:hover .btn-arrow {
        transform: none;
    }


    .btn-shine::before {
        display: none;
    }


    .btn.is-loading::after {
        animation: none;
    }

}