/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Book Now Button - Premium Design */
.btn-book-now {
    display: flex;
    align-items: center;
    gap: var(--px-8);
    padding: var(--px-10) var(--px-20);
    background: var(--hotel-primary-light);
    color: var(--hotel-accent);
    font: normal normal 600 var(--s-14);
    letter-spacing: 0.5px;
    border-radius: var(--px-8);
    cursor: pointer;
    box-shadow: var(--shadow-medium), 0 0 20px rgba(5, 80, 89, 0.4);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    border: 0;
}

    .btn-book-now::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--hotel-primary-light) 0%, var(--hotel-primary-dark) 100%);
        opacity: 0;
        transition: opacity var(--transition-smooth);
    }

    .btn-book-now:hover::before {
        opacity: 1;
    }

    .btn-book-now:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-large), 0 0 30px rgba(5, 80, 89, 0.6);
    }

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

    .btn-book-now svg,
    .btn-book-now span {
        position: relative;
        z-index: 1;
    }

/* See Information Button */
.btn-see-info {
    margin: var(--px-8) 0;
    display: flex;
    align-items: center;
    gap: var(--px-6);
    padding: var(--px-8) var(--px-18);
    background: var(--glass-medium);
    backdrop-filter: blur(16px);
    color: var(--hotel-accent);
    font: normal normal 500 var(--s-13);
    letter-spacing: 0.3px;
    border-radius: var(--px-20);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-soft);
}

    .btn-see-info:hover {
        background: var(--glass-strong);
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }

    .btn-see-info svg {
        transition: transform var(--transition-smooth);
    }

    .btn-see-info:hover svg {
        transform: rotate(180deg);
    }

/* Book Now Button - Home Version */
.btn-book-now-home {
    padding: var(--px-8) var(--px-16);
    background: var(--hotel-primary);
    color: var(--hotel-accent);
    font: normal normal 600 var(--s-14);
    border-radius: var(--px-8);
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    white-space: nowrap;
}

    .btn-book-now-home:hover {
        background: #15803d;
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
    }

/* Action Buttons */
.btn-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    padding: var(--px-10);
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-13);
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.btn-check-bill {
    background: var(--hotel-primary);
    color: var(--hotel-accent);
}

    .btn-check-bill:hover {
        background: #15803d;
    }

.btn-check-qr {
    background: var(--hotel-gold);
    color: white;
}

    .btn-check-qr:hover {
        background: #2563eb;
    }

.btn-icon {
    width: var(--px-16);
    height: var(--px-16);
}

/* Check-in Actions */
.btn-checkin-online,
.btn-checkin-qr {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    padding: var(--px-10);
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-13);
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.btn-checkin-online {
    background: var(--color-green);
    color: white;
}

    .btn-checkin-online:hover {
        background: #15803d;
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

.btn-checkin-qr {
    background: var(--hotel-gold);
    color: white;
}

    .btn-checkin-qr:hover {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

/* View All Button */
.btn-view-all {
    display: flex;
    align-items: center;
    gap: var(--px-4);
    background: none;
    border: none;
    color: var(--color-green);
    font: normal normal 500 var(--s-13);
    cursor: pointer;
    transition: color var(--transition-smooth);
}

    .btn-view-all:hover {
        color: #15803d;
    }

/* Redeem Button */
.btn-redeem {
    padding: var(--px-6) var(--px-12);
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    font: normal normal 500 var(--s-13);
    border-radius: var(--px-8);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .btn-redeem:hover {
        background: #f9fafb;
    }

/* Show QR Button */
.btn-show-qr {
    padding: var(--px-4) var(--px-12);
    background: var(--color-green);
    color: white;
    font: normal normal 600 var(--s-11);
    border-radius: var(--px-4);
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .btn-show-qr:hover {
        background: #15803d;
    }

/* See All Offers Button */
.btn-see-all-offers {
    width: 100%;
    text-align: center;
    padding: var(--px-8);
    background: none;
    border: none;
    color: var(--color-green);
    font: normal normal 500 var(--s-13);
    cursor: pointer;
    transition: color var(--transition-smooth);
}

    .btn-see-all-offers:hover {
        color: #15803d;
    }

/* Create Account Button */
.btn-create-account {
    padding: var(--px-8) var(--px-16);
    font: normal normal 600 var(--s-14);
    border-radius: var(--px-8);
    border: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    background: var(--hotel-primary);
    color: var(--hotel-accent);
}

    .btn-create-account:hover {
        background: #15803d;
        transform: translateY(-1px);
        box-shadow: var(--shadow-medium);
    }

/* Refer Action Buttons */
.btn-refer-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    padding: var(--px-8);
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    font: normal normal 500 var(--s-13);
    border-radius: var(--px-8);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .btn-refer-action:hover {
        background: #f9fafb;
    }

/* Copy Link Button */
.btn-copy-link-inline {
    padding: var(--px-10) var(--px-12);
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 0 var(--px-8) var(--px-8) 0;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .btn-copy-link-inline:hover {
        background: #d1d5db;
    }

/* Floating Chat Button */
.btn-chat-float {
    position: fixed;
    bottom: var(--px-88);
    right: var(--px-16);
    width: var(--px-48);
    height: var(--px-48);
    border-radius: 50%;
    background: var(--color-green);
    color: white;
    border: none;
    box-shadow: var(--shadow-large);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
    z-index: 50;
}

    .btn-chat-float:hover {
        background: #15803d;
        transform: scale(1.1);
        box-shadow: var(--shadow-xl);
    }

.chat-icon {
    width: var(--px-24);
    height: var(--px-24);
}

/* Cancel Selection Button */
.btn-cancel-selection {
    width: 100%;
    padding: 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel-selection:hover {
        background: #e5e7eb;
        color: #374151;
    }