/**
 * The Car Superstore - Button System
 * 
 * Unified button styles with variants (primary, secondary, outline, danger).
 * Sizes: sm, md, lg. All with proper hover/focus/disabled states.
 * 
 * @package TheCarSuperstore
 */

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

.nikki-btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-headings);
    text-align: center;
    text-decoration: none;
    border: var(--border-width-2) solid transparent;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: var(--btn-transition);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    user-select: none;
    
    /* Default focuses */
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:active {
        transform: translateY(-1px);
    }
}

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

/* Small Button */
.nikki-btn-sm {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-size-sm);
    gap: 0.25rem;
    
    &.icon-text {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* Medium Button (Default) */
.nikki-btn-md,
.nikki-btn {
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    gap: 0.5rem;
    
    &.icon-text {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }
}

/* Large Button */
.nikki-btn-lg {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-size-lg);
    gap: 0.75rem;
    
    &.icon-text {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
    }
}

/* Extra Large Button (Full width variant) */
.nikki-btn-xl {
    padding: var(--btn-padding-xl);
    font-size: var(--btn-font-size-lg);
    width: 100%;
    gap: 1rem;
    
    &.icon-text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
}

/* ===========================
   BUTTON VARIANTS
   =========================== */

/* PRIMARY (Brand Red) - Main CTA */
.nikki-btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
    
    &:hover:not(:disabled) {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    &:active:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* SECONDARY (Light variant) */
.nikki-btn-secondary {
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text);
    
    &:hover:not(:disabled) {
        background-color: var(--color-text);
        border-color: var(--color-text);
        color: var(--color-bg);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    &:active:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* OUTLINE (Only border, no fill) */
.nikki-btn-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    
    &:hover:not(:disabled) {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-bg);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    &:active:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* TEXT/MINIMAL (No border, minimal styling) */
.nikki-btn-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
    text-decoration: underline;
    
    &:hover:not(:disabled) {
        color: var(--color-primary-dark);
        text-decoration: underline;
        transform: none;
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* DANGER (Destructive action) */
.nikki-btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-bg);
    
    &:hover:not(:disabled) {
        background-color: darken(var(--color-danger), 10%);
        border-color: darken(var(--color-danger), 10%);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    &:active:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* SUCCESS */
.nikki-btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
    
    &:hover:not(:disabled) {
        background-color: darken(var(--color-success), 10%);
        border-color: darken(var(--color-success), 10%);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    &:active:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

/* ===========================
   BUTTON STATES
   =========================== */

/* Disabled State - All variants */
.nikki-btn:disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.nikki-btn[aria-disabled="true"],
button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    
    &:hover {
        transform: none;
    }
}

/* Loading State */
.nikki-btn.is-loading {
    justify-content: center;
    align-items: center;
    
    .nikki-btn-text {
        display: none;
    }
    
    &::after {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
}

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

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

.nikki-btn-group {
    display: inline-flex;
    gap: var(--spacing-xs);
    
    .nikki-btn {
        border-radius: 0;
        
        &:first-child {
            border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
        }
        
        &:last-child {
            border-radius: 0 var(--btn-border-radius) var(--btn-border-radius) 0;
        }
    }
}

/* ===========================
   BUTTON WITH ICON
   =========================== */

.nikki-btn {
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        
        &.icon-left {
            margin-right: 0.5rem;
        }
        
        &.icon-right {
            margin-left: 0.5rem;
        }
    }
}

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

/* High Contrast Mode */
@media (prefers-contrast: more) {
    .nikki-btn {
        border-width: var(--border-width-2);
        font-weight: var(--font-weight-bold);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .nikki-btn,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        transition: none;
        
        &:hover:not(:disabled) {
            transform: none;
        }
        
        &:active:not(:disabled) {
            transform: none;
        }
    }
    
    .nikki-btn.is-loading::after {
        animation: none;
    }
}

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

@media (max-width: 576px) {
    .nikki-btn-xl {
        padding: var(--btn-padding-lg);
        font-size: var(--font-size-md);
    }
    
    .nikki-btn-group {
        flex-direction: column;
        
        .nikki-btn {
            width: 100%;
            border-radius: var(--btn-border-radius);
        }
    }
}

/* ===========================
   LEGACY BUTTON STYLES (Backward Compatibility)
   =========================== */

/* Legacy .nikki-btn - Keep for compatibility with existing markup */
.nikki-btn {
    -webkit-transition-duration: var(--transition-slow);
    transition-duration: var(--transition-slow);
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 180px;
    height: 50px;
    color: var(--color-bg);
    background-color: var(--color-headings);
    border: 1px solid var(--color-bg);
    border-radius: var(--border-radius-xs);
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    line-height: 48px;
    text-transform: uppercase;
    font-weight: 400;
}

.nikki-btn.active,
.nikki-btn:hover,
.nikki-btn:focus {
    font-size: var(--font-size-sm);
    color: var(--color-bg);
    font-weight: 400;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ===========================
   ICON HOVER — general interactive icons
   (moved from front-page.php inline style)
   =========================== */
.icon {
    transition: transform 0.3s ease;
}
.icon:hover {
    transform: scale(1.1);
}

/* Required field indicator — used in contact form and inquiry modal */
.required-star {
    color: var(--color-primary, #cf1b24);
    margin-left: 2px;
}

.required-note {
    font-size: 0.85rem;
    color: var(--color-text-lighter, #595959);
    margin-bottom: 1rem;
}

/* Form response message (live region) */
.form-response {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    display: none;
}