/**
 * Safari Booking - Button Component
 * Brand-styled buttons for all pages
 */

/* ============================================
   Primary Button - Brand Style
   ============================================ */
.safari-button,
.safari-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px var(--spacing-lg);
    background: var(--color-accent);
    color: var(--color-dark);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.4;
    white-space: nowrap;
}

.safari-button:hover,
.safari-btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-dark);
}

.safari-button:focus,
.safari-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.safari-button:active,
.safari-btn-primary:active {
    transform: translateY(1px);
}

.safari-button:disabled,
.safari-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   Secondary Button
   ============================================ */
.safari-button-secondary,
.safari-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px var(--spacing-lg);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.4;
    white-space: nowrap;
}

.safari-button-secondary:hover,
.safari-btn-secondary:hover {
    background: var(--color-light-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* ============================================
   Ghost Button
   ============================================ */
.safari-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px var(--spacing-lg);
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.4;
}

.safari-button-ghost:hover {
    background: var(--color-light-bg);
    color: var(--color-text);
}

/* ============================================
   Light Button - Unified Style
   ============================================ */
.safari-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.safari-btn-light:hover {
    color: var(--color-dark);
    background: var(--color-light-bg);
    border-color: var(--color-border-strong);
}

.safari-btn-light:active {
    transform: scale(0.98);
}

.safari-btn-light svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    opacity: 0.7;
}

.safari-btn-light:hover svg {
    opacity: 1;
}

/* Light button active state (e.g., selected tab) */
.safari-btn-light.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-dark);
    font-weight: 600;
}

.safari-btn-light.is-active svg {
    opacity: 0.9;
}

.safari-btn-light.is-active:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Light button icon-only variant */
.safari-btn-light.safari-btn-icon-only {
    padding: 10px;
    min-width: 40px;
}

/* ============================================
   Button Sizes
   ============================================ */
.safari-button-small,
.safari-btn-small {
    padding: 6px var(--spacing-md);
    font-size: var(--font-size-small);
}

.safari-button-large {
    padding: 12px var(--spacing-xl);
    font-size: var(--font-size-large);
}

/* Icon-only button */
.safari-button-icon,
.safari-btn-icon {
    padding: 8px;
    min-width: 36px;
}

/* ============================================
   Modal Buttons (from modal.css)
   ============================================ */
.safari-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-family);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.safari-btn-primary {
    background: var(--color-accent, #F8CD48) !important;
    color: var(--color-dark, #1F2937) !important;
    border: none !important;
}

.safari-btn-primary:hover {
    background: var(--color-accent-hover, #E5BB3D) !important;
    box-shadow: 0 2px 8px rgba(248, 205, 72, 0.3);
}

.safari-btn-primary:active {
    transform: scale(0.98);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .safari-button {
        width: 100%;
        text-align: center;
    }
}