/* ============================================
   Custom scrollbar for AI dark mode
   ============================================ */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(11, 15, 25, 0.5);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.5);
}

/* ============================================
   Keyframe Animations
   ============================================ */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
    animation: blob 7s infinite alternate;
}
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* ============================================
   Hide number input spinners
   ============================================ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* ============================================
   Autofill override (light mode)
   ============================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f9fafb inset !important;
    -webkit-text-fill-color: #111827 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   Form Input Hover Effects
   (CSS-based so Tailwind JIT doesn't purge them)
   ============================================ */
.input-field {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.75rem;
    color: #111827;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 1rem;
}
.input-field::placeholder { color: #9ca3af; }
.input-field:hover {
    border-color: rgba(31, 36, 91, 0.3);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(31, 36, 91, 0.06);
}
.input-field:focus {
    border-color: #E9C5A9;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(233, 197, 169, 0.3), 0 4px 12px rgba(31, 36, 91, 0.08);
}

/* Icon inside input group */
.input-icon {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: #9ca3af;
    font-size: 1.25rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.input-wrapper:hover .input-icon,
.input-wrapper:focus-within .input-icon {
    color: #1F245B;
    transform: scale(1.15);
}

/* Textarea variant */
.input-icon-top {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 0 0 1rem;
    pointer-events: none;
    color: #9ca3af;
    font-size: 1.25rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.input-wrapper:hover .input-icon-top,
.input-wrapper:focus-within .input-icon-top {
    color: #1F245B;
    transform: scale(1.15) translateX(2px);
}

/* ============================================
   Style Card Hover Effects
   ============================================ */
.style-card {
    cursor: pointer;
    border-radius: 1rem;
    border: 2px solid #e5e7eb;
    padding: 0;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.style-card:hover {
    border-color: rgba(31, 36, 91, 0.35);
    box-shadow: 0 15px 40px rgba(31, 36, 91, 0.1);
    transform: translateY(-6px);
}
.style-card.selected {
    border-color: #C9A87C;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(201, 168, 124, 0.25);
    transform: translateY(-6px);
    outline: 2px solid #C9A87C;
}

/* Style card icon */
.style-icon {
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 1.875rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.style-card:hover .style-icon {
    background: #1F245B;
    color: #E9C5A9;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(31, 36, 91, 0.2);
}
.style-card.selected .style-icon {
    background: #1F245B;
    color: #E9C5A9;
    transform: scale(1.1) rotate(-3deg);
}

/* Style card feel badge */
.style-feel-badge {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    color: #1F245B;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.style-card:hover .style-feel-badge {
    border-color: rgba(233, 197, 169, 0.5);
    background: rgba(233, 197, 169, 0.1);
}
.style-feel-badge i {
    margin-right: 0.3rem;
    color: #E9C5A9;
    transition: transform 0.5s ease;
}
.style-card:hover .style-feel-badge i {
    transform: scale(1.3) rotate(12deg);
}

/* Style card description text */
.style-card .style-desc {
    color: #6b7280;
    transition: color 0.3s ease;
}
.style-card:hover .style-desc { color: #374151; }

/* ============================================
   Step title icon hover
   ============================================ */
.step-title-icon {
    padding: 0.625rem;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-title:hover .step-title-icon {
    transform: scale(1.12) rotate(-6deg);
}

/* ============================================
   3D Flip Journey Animations
   ============================================ */
.perspective-container {
    perspective: 1500px;
    position: relative;
    width: 100%;
}
.flip-card {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform, opacity;
}

@keyframes flipOutLeft {
    0% { transform: rotateY(0deg); opacity: 1; z-index: 20; }
    50% { opacity: 0; }
    100% { transform: rotateY(-90deg); opacity: 0; z-index: 10; display: none; }
}

@keyframes flipInRight {
    0% { transform: rotateY(90deg); opacity: 0; z-index: 10; }
    50% { opacity: 1; }
    100% { transform: rotateY(0deg); opacity: 1; z-index: 20; }
}

@keyframes flipOutRight {
    0% { transform: rotateY(0deg); opacity: 1; z-index: 20; }
    50% { opacity: 0; }
    100% { transform: rotateY(90deg); opacity: 0; z-index: 10; display: none; }
}

@keyframes flipInLeft {
    0% { transform: rotateY(-90deg); opacity: 0; z-index: 10; }
    50% { opacity: 1; }
    100% { transform: rotateY(0deg); opacity: 1; z-index: 20; }
}

.anim-flip-out-left { animation: flipOutLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.anim-flip-in-right { animation: flipInRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.anim-flip-out-right { animation: flipOutRight 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.anim-flip-in-left { animation: flipInLeft 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* AI Glow utility */
.ai-glow {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.1);
}

/* ============================================
   Hub & Oak Brand Theme — AI Form Classes
   Primary: #1F245B (Navy)  |  Accent: #C9A87C (Gold)
   ============================================ */
.ai-pulse-dot {
    animation: aiPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes aiPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.ai-typing-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #C9A87C;
    border-radius: 50%;
    margin: 0 2px;
    animation: typingBounce 1.4s infinite ease-in-out both;
}
.ai-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.ai-gradient-text {
    background: linear-gradient(to right, #1F245B, #C9A87C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-form-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(31, 36, 91, 0.1), inset 0 0 0 1px rgba(255,255,255,1);
    position: relative;
    overflow: hidden;
}

.ai-card-topbar {
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, #1F245B, #C9A87C, #1F245B);
    background-size: 200% auto;
    animation: gradientMove 3s linear infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.ai-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ai-step-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(31,36,91,0.07), rgba(201,168,124,0.1));
    color: #1F245B;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(31,36,91,0.12);
}
.ai-step-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1F245B;
}
.ai-step-subtitle {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.125rem;
}

.ai-field {
    margin-bottom: 1rem;
}
.ai-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.375rem;
}
.ai-input-wrap {
    position: relative;
}
.ai-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 1.125rem;
    transition: color 0.3s;
}
.ai-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: #1f2937;
    outline: none;
    transition: all 0.3s ease;
}
.ai-input::placeholder { color: #d1d5db; }
.ai-input:hover {
    background: #fff;
    border-color: rgba(201,168,124,0.5);
}
.ai-input:focus {
    background: #fff;
    border-color: #C9A87C;
    box-shadow: 0 0 0 4px rgba(201,168,124,0.15);
}
.ai-input:focus + .ai-input-icon, .ai-input-wrap:focus-within .ai-input-icon {
    color: #C9A87C;
}

.ai-upload-zone {
    border: 2px dashed #e5e7eb;
    background: #f9fafb;
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
}
.ai-upload-zone:hover {
    border-color: #C9A87C;
    background: rgba(201,168,124,0.03);
}
.ai-upload-icon {
    width: 4rem;
    height: 4rem;
    background: #fff;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1F245B;
    box-shadow: 0 4px 15px rgba(31,36,91,0.1);
    transition: transform 0.4s;
}
.ai-upload-zone:hover .ai-upload-icon {
    transform: translateY(-4px) scale(1.05);
}

.ai-style-card {
    background: #fff;
    border-color: #e5e7eb;
}
.ai-style-card:hover {
    border-color: rgba(201,168,124,0.5);
    box-shadow: 0 4px 15px rgba(31,36,91,0.06);
}
.ai-style-card-active {
    background: rgba(201,168,124,0.04);
    border-color: #C9A87C;
    box-shadow: 0 8px 25px rgba(201,168,124,0.2);
}

.ai-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.3s;
}
.ai-btn-back:not(:disabled):hover {
    background: rgba(31,36,91,0.05);
    color: #1F245B;
}

.ai-btn-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(to right, #1F245B, #151940);
    color: #fff;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(31,36,91,0.25);
    transition: all 0.3s;
}
.ai-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(31,36,91,0.35);
}

.ai-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(to right, #C9A87C, #b8925f);
    color: #1F245B;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(201,168,124,0.35);
    transition: all 0.3s;
}
.ai-btn-submit:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201,168,124,0.5);
}

/* ============================================
   Enhanced Cool Effects & Animations
   ============================================ */

/* Give the entire form card a 3D float effect on hover */
.ai-form-card {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease !important;
}
.ai-form-card:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 25px 60px rgba(31, 36, 91, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 1) !important;
}

/* Make the image in Step 1 gently pan and zoom (Ken Burns effect) */
#step-1 img {
    animation: kenBurns 15s alternate infinite ease-in-out;
}
@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -2%); }
}

/* Pulsing glow for the top header logo */
header .rounded-xl {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
header .rounded-xl:hover {
    box-shadow: 0 0 20px rgba(31, 36, 91, 0.4), 0 0 40px rgba(201, 168, 124, 0.3);
    transform: rotate(-5deg) scale(1.05);
}

/* Add a shimmering shine effect across the next/submit buttons */
.ai-btn-next, .ai-btn-submit {
    position: relative;
    overflow: hidden;
}
.ai-btn-next::after, .ai-btn-submit::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.ai-btn-next:hover::after, .ai-btn-submit:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* Animated gradient text hover */
.ai-gradient-text {
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}
.ai-gradient-text:hover {
    background-position: right center;
}

/* Background gradient pulse */
body > .fixed > div:nth-child(1) {
    animation: pulseGlow1 8s infinite alternate ease-in-out;
}
body > .fixed > div:nth-child(2) {
    animation: pulseGlow2 10s infinite alternate ease-in-out;
}
@keyframes pulseGlow1 {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1) translate(2%, 2%); }
}
@keyframes pulseGlow2 {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.15) translate(-2%, -2%); }
}

/* Add hover pop to radio buttons (Washroom selection) */
input[type="radio"]:checked + div {
    box-shadow: 0 0 10px rgba(31, 36, 91, 0.3);
    transform: scale(1.1);
}
input[type="radio"] + div {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 360-Degree Card Flip Effect for Style Cards */
.style-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
}
.style-card:hover {
    transform: rotateY(360deg) translateY(-6px) !important;
}