/**
 * Button Components - Bricard Services 2025
 *
 * Mobile-first button styles for CTAs and interactive elements
 * Optimized for touch targets (min 44x44px)
 *
 * @package GeneratePress Child
 * @since 1.0.0
 */

/* ============================================
   BASE BUTTON STYLES
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--btn-height-md);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button icon */
.btn svg,
.btn .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================
   PRIMARY BUTTON - Main CTAs
   ============================================ */

.btn-primary {
    color: white;
    background-color: var(--color-primary-600);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    background-color: var(--color-primary-800);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* ============================================
   SECONDARY BUTTON - Bricard Gold
   ============================================ */

.btn-secondary {
    color: white;
    background-color: var(--color-secondary-600);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-secondary:active {
    background-color: var(--color-secondary-800);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* ============================================
   ACCENT BUTTON - Emergency/Urgent
   ============================================ */

.btn-accent {
    color: white;
    background-color: var(--color-accent-600);
    box-shadow: var(--shadow-sm);
}

.btn-accent:hover {
    background-color: var(--color-accent-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-accent:active {
    background-color: var(--color-accent-800);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* ============================================
   OUTLINE BUTTON - Secondary Actions
   ============================================ */

.btn-outline {
    color: var(--color-primary-600);
    background-color: transparent;
    border: 2px solid var(--color-primary-600);
}

.btn-outline:hover {
    color: white;
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.btn-outline:active {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

/* ============================================
   GHOST BUTTON - Minimal Style
   ============================================ */

.btn-ghost {
    color: var(--color-primary-600);
    background-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-primary-50);
}

.btn-ghost:active {
    background-color: var(--color-primary-100);
}

/* ============================================
   WHITE BUTTON - For Dark Backgrounds
   ============================================ */

.btn-white {
    color: var(--color-primary-600);
    background-color: white;
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    background-color: var(--color-gray-50);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-white:active {
    background-color: var(--color-gray-100);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* ============================================
   SUCCESS BUTTON
   ============================================ */

.btn-success {
    color: white;
    background-color: var(--color-success-600);
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background-color: var(--color-success-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

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

/* Small button */
.btn-sm {
    min-height: var(--btn-height-sm);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

.btn-sm svg,
.btn-sm .icon {
    width: 16px;
    height: 16px;
}

/* Large button */
.btn-lg {
    min-height: var(--btn-height-lg);
    padding: var(--space-4) var(--space-8);
    font-size: var(--fs-lg);
}

.btn-lg svg,
.btn-lg .icon {
    width: 24px;
    height: 24px;
}

/* Extra large button - Hero CTAs */
.btn-xl {
    min-height: var(--btn-height-xl);
    padding: var(--space-5) var(--space-10);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

.btn-xl svg,
.btn-xl .icon {
    width: 28px;
    height: 28px;
}

/* ============================================
   BUTTON WIDTHS
   ============================================ */

/* Full width button - Mobile default */
.btn-block {
    width: 100%;
}

/* On mobile, make primary CTAs full width */
@media (max-width: 767px) {
    .btn-primary:not(.btn-inline),
    .btn-accent:not(.btn-inline) {
        width: 100%;
    }
}

/* ============================================
   CTA BUTTONS - Special Styles
   ============================================ */

/* Click-to-call button */
.btn-call {
    color: white;
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.btn-call::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-call:hover::before {
    left: 100%;
}

.btn-call:hover {
    background: linear-gradient(135deg, var(--color-success-700) 0%, var(--color-success-800) 100%);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* WhatsApp button */
.btn-whatsapp {
    color: white;
    background-color: #25d366;
    box-shadow: var(--shadow-md);
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.btn-whatsapp svg {
    width: 24px;
    height: 24px;
}

/* Emergency button with pulse animation */
.btn-emergency {
    color: white;
    background-color: var(--color-accent-600);
    box-shadow: var(--shadow-md);
    animation: pulse-emergency 2s infinite;
}

@keyframes pulse-emergency {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

.btn-emergency:hover {
    animation: none;
    background-color: var(--color-accent-700);
    transform: scale(1.05);
}

/* ============================================
   BUTTON GROUPS
   ============================================ */

.btn-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Tablet and up: horizontal layout */
@media (min-width: 768px) {
    .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

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

/* ============================================
   ICON-ONLY BUTTONS
   ============================================ */

.btn-icon {
    width: var(--btn-height-md);
    height: var(--btn-height-md);
    padding: 0;
    border-radius: var(--radius-full);
}

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

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

.btn-icon svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   FLOATING ACTION BUTTON (FAB) - Mobile
   ============================================ */

.btn-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-4);
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-sticky);
}

.btn-fab svg {
    width: 28px;
    height: 28px;
}

.btn-fab:hover {
    box-shadow: var(--shadow-2xl);
    transform: scale(1.1);
}

/* Tablet and up: adjust position */
@media (min-width: 768px) {
    .btn-fab {
        bottom: var(--space-8);
        right: var(--space-6);
    }
}

/* ============================================
   STICKY CTA BAR - Mobile
   ============================================ */

.sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    background-color: white;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: var(--z-sticky);
    transform: translateY(100%);
    transition: transform var(--duration-normal) var(--ease-out);
}

.sticky-cta-bar.visible {
    transform: translateY(0);
}

.sticky-cta-bar .btn {
    width: 100%;
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .sticky-cta-bar {
        display: none;
    }
}

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

.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.6s linear infinite;
}

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

/* ============================================
   BUTTON WITH BADGE/COUNTER
   ============================================ */

.btn-with-badge {
    position: relative;
}

.btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 20px;
    color: white;
    background-color: var(--color-accent-600);
    border-radius: var(--radius-full);
    border: 2px solid white;
}

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

.btn-social {
    color: white;
    padding: var(--space-2) var(--space-4);
}

.btn-facebook {
    background-color: #1877f2;
}

.btn-facebook:hover {
    background-color: #0c5dbe;
}

.btn-google {
    background-color: #ea4335;
}

.btn-google:hover {
    background-color: #c5392b;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn:hover {
        transform: none;
    }

    .btn-emergency {
        animation: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .btn,
    .btn-fab,
    .sticky-cta-bar {
        display: none;
    }
}