/* Tea App Enhanced Button Styles - Larger, More Accessible */

/* ============================================
   PRIMARY ACTION BUTTONS
   ============================================ */

/* Submit and main action buttons */
.submit-btn,
.tea-app-container .submit-btn,
.wizard-submit-btn {
    min-height: 64px !important;
    padding: 20px 32px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    -webkit-tap-highlight-color: transparent !important;
}

.submit-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%) !important;
}

/* ============================================
   TEA TYPE SELECTION BUTTONS
   ============================================ */

.tea-type-btn {
    min-height: 120px !important;
    padding: 24px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.tea-type-btn:active {
    transform: scale(0.98) !important;
}

.tea-type-icon {
    font-size: 36px !important;
    margin-bottom: 10px !important;
}

.tea-type-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.tea-type-temp {
    font-size: 14px !important;
    opacity: 0.8 !important;
}

/* ============================================
   WIZARD NAVIGATION BUTTONS
   ============================================ */

.wizard-nav-btn {
    min-height: 56px !important;
    padding: 16px 28px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-width: 140px !important;
}

.wizard-nav-btn:active {
    transform: translateY(2px) !important;
}

.wizard-navigation {
    gap: 20px !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
}

/* ============================================
   TIMER CONTROL BUTTONS
   ============================================ */

.timer-btn {
    min-height: 56px !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-width: 120px !important;
}

.timer-btn:active {
    transform: scale(0.98) !important;
}

/* Timer display enhancement */
.timer-display {
    width: 260px !important;
    height: 260px !important;
    margin: 32px auto !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
}

/* ============================================
   QUICK STEEP & REPEAT BUTTONS
   ============================================ */

.quick-steep-btn,
.repeat-btn {
    min-height: 60px !important;
    padding: 18px 28px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}

.quick-steep-btn:active,
.repeat-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%) !important;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */

.tab-button,
.tea-nav-tab {
    min-height: 56px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.tab-icon {
    font-size: 24px !important;
    margin-bottom: 4px !important;
}

/* ============================================
   RATING BUTTONS
   ============================================ */

.rating-btn {
    min-height: 64px !important;
    min-width: 64px !important;
    padding: 16px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

.rating-btn:active {
    transform: scale(0.95) !important;
}

.rating-number {
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* ============================================
   TEA NAME SELECTION
   ============================================ */

.tea-name-btn {
    min-height: 56px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    text-align: left !important;
}

.tea-name-btn:active {
    transform: scale(0.98) !important;
    background: var(--tea-secondary) !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
}

textarea {
    min-height: 120px !important;
    padding: 16px !important;
}

select {
    padding-right: 40px !important;
    background-position: right 12px center !important;
}

/* ============================================
   VENDOR & COLLECTION CARDS
   ============================================ */

.vendor-card,
.collection-item,
.tea-card {
    min-height: 80px !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.vendor-card:active,
.collection-item:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%) !important;
}

/* ============================================
   ICON BUTTONS
   ============================================ */

.icon-btn,
.btn-icon-only {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   MOBILE SPECIFIC ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    
    /* Larger tea type buttons on mobile */
    .tea-type-grid {
        gap: 16px !important;
    }
    
    .tea-type-btn {
        min-height: 110px !important;
        padding: 20px 12px !important;
    }
    
    /* Stack navigation buttons on small screens */
    @media (max-width: 480px) {
        .wizard-navigation {
            flex-direction: column !important;
            gap: 14px !important;
        }
        
        .wizard-nav-btn {
            width: 100% !important;
            min-height: 60px !important;
        }
    }
    
    /* Larger rating buttons on mobile */
    .rating-btn {
        min-width: 80px !important;
        min-height: 80px !important;
        flex: 0 0 calc(20% - 8px) !important;
    }
    
    /* Better spacing */
    .wizard-step {
        padding: 24px 16px !important;
    }
    
    .form-group {
        margin-bottom: 24px !important;
    }
}

/* ============================================
   DESKTOP ENHANCEMENTS
   ============================================ */

@media (min-width: 1024px) {
    
    /* Even larger buttons on desktop */
    .submit-btn,
    .wizard-submit-btn {
        min-height: 68px !important;
        font-size: 20px !important;
        padding: 20px 40px !important;
    }
    
    .tea-type-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        max-width: 900px !important;
        margin: 0 auto !important;
    }
    
    .tea-type-btn {
        min-height: 140px !important;
        padding: 28px 20px !important;
    }
    
    .wizard-nav-btn {
        min-width: 160px !important;
    }
    
    .rating-buttons {
        max-width: 600px !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--tea-primary) !important;
    outline-offset: 2px !important;
}

/* ============================================
   ACTIVE/SELECTED STATES
   ============================================ */

.tea-type-btn.active,
.tea-type-btn.selected,
.tea-name-btn.selected,
.rating-btn.selected {
    background: var(--tea-primary) !important;
    color: white !important;
    border-color: var(--tea-primary) !important;
    font-weight: 600 !important;
}

/* ============================================
   HOVER STATES (DESKTOP)
   ============================================ */

@media (hover: hover) {
    button:hover:not(:disabled),
    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    }
    
    .tea-type-btn:hover,
    .rating-btn:hover {
        border-color: var(--tea-primary);
        background: var(--tea-secondary);
    }
}

/* ============================================
   DISABLED STATES
   ============================================ */

button:disabled,
.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ============================================
   TEXT READABILITY
   ============================================ */

.btn,
button {
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
}

/* Labels */
label,
.form-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* ============================================
   OVERFLOW FIXES
   ============================================ */

.tea-app-container {
    overflow-x: hidden !important;
}

.wizard-step,
.wizard-page {
    max-width: 100% !important;
    overflow-x: hidden !important;
}