/* =============================================
   DESTINATION WHIPS — Components (Premium)
   ============================================= */

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:12px 28px;border-radius:var(--radius-sm);font-weight:var(--font-bold);font-size:var(--text-sm);transition:all var(--transition-base);border:none;cursor:pointer;text-decoration:none;line-height:1.4;letter-spacing:0.5px;text-transform:uppercase;}
.btn-primary{background:var(--accent);color:var(--navy);}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,167,38,0.35);}
.btn-secondary{background:var(--gray-100);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--gray-200);}
.btn-outline{background:transparent;border:2px solid var(--text-primary);color:var(--text-primary);}
.btn-outline:hover{background:var(--text-primary);color:var(--white);}
.btn-ghost{background:transparent;color:var(--text-primary);padding:10px 16px;text-transform:none;}
.btn-ghost:hover{background:var(--gray-100);}
.btn-dark{background:var(--navy);color:var(--white);}
.btn-dark:hover{background:var(--navy-light);}
.btn-danger{background:var(--danger);color:var(--white);}
.btn-success{background:var(--success);color:var(--white);}
.btn-lg{padding:16px 40px;font-size:var(--text-base);}
.btn-sm{padding:8px 18px;font-size:11px;}
.btn-block{display:flex;width:100%;}

/* === AUTH PAGES === */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--bg-body);}
.auth-card{width:100%;max-width:440px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-lg);}
.auth-header{text-align:center;margin-bottom:var(--space-8);}
.auth-header h2{font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:1px;text-transform:uppercase;margin-top:var(--space-4);}
.auth-header p{color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-2);}
.auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--text-sm);color:var(--text-muted);}
.auth-footer a{color:var(--accent);font-weight:var(--font-semibold);}

/* === BADGES === */
.badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.badge-success{background:#ecfdf5;color:var(--success);}
.badge-warning{background:#fffbeb;color:var(--warning);}
.badge-info{background:#eff6ff;color:var(--info);}
.badge-secondary{background:var(--gray-100);color:var(--gray-600);}
.badge-primary{background:var(--accent-light);color:var(--accent-dark);}
.badge-danger{background:#fef2f2;color:var(--danger);}

/* === FAQ === */
.faq-section{margin-bottom:var(--space-10);}
.faq-section-title{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:1px;text-transform:uppercase;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:2px solid var(--accent);}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-3);overflow:hidden;background:var(--white);transition:border-color 0.2s;}
.faq-item:hover{border-color:var(--border-hover);}
.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--space-5) var(--space-6);background:none;border:none;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);cursor:pointer;text-align:left;transition:color 0.2s;}
.faq-question:hover{color:var(--accent);}
.faq-question svg{flex-shrink:0;transition:transform 0.3s;color:var(--text-muted);}
.faq-item.active .faq-question svg{transform:rotate(180deg);color:var(--accent);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s;}
.faq-item.active .faq-answer{max-height:500px;padding:0 var(--space-6) var(--space-5);}
.faq-answer p{color:var(--text-secondary);line-height:1.8;font-size:var(--text-sm);}

/* === INSURANCE === */
.insurance-options{display:flex;flex-direction:column;gap:var(--space-3);}
.insurance-option{cursor:pointer;}
.insurance-card{padding:var(--space-5);border:2px solid var(--border);border-radius:var(--radius-lg);transition:all 0.2s;}
.insurance-option input:checked + .insurance-card{border-color:var(--accent);background:var(--accent-light);}
.insurance-name{font-weight:var(--font-semibold);}
.insurance-price{color:var(--accent);font-weight:var(--font-bold);}
.insurance-desc{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px;}

/* === VEHICLE CARD === */
.vehicle-card-title{font-size:var(--text-base);font-weight:var(--font-bold);margin-bottom:var(--space-2);}
.vehicle-card-price .price-amount{font-size:var(--text-lg);font-weight:var(--font-extrabold);color:var(--accent);}
.vehicle-card-price .price-period{font-size:var(--text-xs);color:var(--text-muted);}
.vehicle-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--gray-100);}

/* === MISC === */
.logo-img{height:44px;max-width:180px;width:auto;object-fit:contain;}
.star-rating label{cursor:pointer;font-size:28px;color:var(--gray-300);transition:color 0.2s;}
.star-rating label:hover{color:var(--accent);}
.status-pending{color:var(--warning);}
.status-confirmed{color:var(--info);}
.status-active{color:var(--success);}
.status-completed{color:#6366f1;}
.status-cancelled{color:var(--danger);}
.section-title{font-family:var(--font-display);font-size:var(--text-4xl);letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-4);text-align:center;}
.section-subtitle{color:var(--text-secondary);text-align:center;max-width:600px;margin:0 auto;}

/* === USER DROPDOWN FIX === */
.nav-user-menu.active .nav-dropdown{display:block;}

/* === FORM ELEMENTS === */
.form-select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-primary);background:var(--white);outline:none;appearance:auto;cursor:pointer;font-family:inherit;transition:border-color 0.2s;}
.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,167,38,0.12);}
.form-textarea{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-primary);background:var(--white);outline:none;resize:vertical;min-height:120px;font-family:inherit;line-height:1.6;transition:border-color 0.2s;}
.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,167,38,0.12);}

/* === DIVIDER === */
.divider{height:1px;background:var(--border);margin:var(--space-5) 0;}