/* ================================================
   Jobitra Wedding Tools - Premium Wedding Theme
   Color Palette: Maroon, Gold, Blush, Ivory, Sage
   ================================================ */

/* Base Typography */
body {
    color: #4a2c2a;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    color: #5c1a1a;
}

/* Force h1 visibility - prevents white text issue */
h1 {
    color: #5c1a1a !important;
    -webkit-text-fill-color: #5c1a1a;
}

/* Only the gradient-text span should be transparent */
h1 .gradient-text,
h2 .gradient-text,
.gradient-text {
    -webkit-text-fill-color: transparent !important;
}

/* Premium Glassmorphism Card */
.glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 169, 55, 0.15);
    box-shadow: 0 8px 40px rgba(122, 26, 59, 0.06), 0 2px 8px rgba(212, 169, 55, 0.04);
}

/* Gold Gradient Text - High Contrast */
.gradient-text {
    background: linear-gradient(135deg, #b8860b 0%, #d4a926 40%, #996515 100%) !important;
    background-size: 200% auto;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 4s ease infinite;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, #fdf2f4 25%, #fce7eb 50%, #fdf2f4 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Card Hover Effect */
.card-hover {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(212, 169, 55, 0.1);
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px -12px rgba(122, 26, 59, 0.12), 0 4px 20px rgba(212, 169, 55, 0.08);
    border-color: rgba(212, 169, 55, 0.3);
}

/* Result Animation */
.result-appear {
    animation: resultAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes resultAppear {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Floating Animation */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fef7f7; }
::-webkit-scrollbar-thumb { background: #d4a926; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ab1c4a; }

/* Focus Styles */
*:focus-visible {
    outline: 2px solid #d4a926;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Form Inputs - Premium */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="tel"],
select,
textarea {
    border: 1.5px solid #f4a9bc;
    background: #fffaf8;
    color: #5c1a1a;
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: #d4a926 !important;
    box-shadow: 0 0 0 3px rgba(212, 169, 55, 0.12) !important;
    background: #ffffff;
}

input::placeholder, textarea::placeholder {
    color: #c9a0a0;
}

/* FAQ Accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.faq-answer.active {
    max-height: 600px;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Social Share Buttons */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    transition: all 0.25s ease;
    color: white;
    font-size: 1rem;
}

.share-btn:hover { transform: scale(1.12); }
.share-whatsapp { background: #25D366; }
.share-facebook { background: #1877F2; }
.share-twitter { background: #1DA1F2; }
.share-pinterest { background: #E60023; }
.share-linkedin { background: #0A66C2; }

/* Decorative Ornament */
.ornament::before,
.ornament::after {
    content: '✦';
    color: #d4a926;
    margin: 0 12px;
    font-size: 0.75em;
    opacity: 0.7;
}

/* Number Input - Remove 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; }

/* Tables */
table { border-radius: 12px; overflow: hidden; }
thead tr { background: linear-gradient(135deg, #7a1a3b, #ab1c4a) !important; }
thead th { color: #fff !important; font-weight: 600; }
tbody tr:nth-child(even) { background: #fef7f7; }
tbody tr:hover { background: #fdf2f4; }

/* Prose Content Styling */
.prose h2 { color: #5c1a1a !important; border-bottom: 2px solid rgba(212, 169, 55, 0.2); padding-bottom: 8px; }
.prose h3 { color: #7a1a3b !important; }
.prose p { color: #4a2c2a; }
.prose li { color: #4a2c2a; }
.prose strong { color: #5c1a1a; }
.prose a { color: #ab1c4a; text-decoration: underline; text-decoration-color: #d4a926; text-underline-offset: 3px; }
.prose a:hover { color: #7a1a3b; }

/* Print */
@media print {
    nav, footer, .no-print, .sticky { display: none !important; }
    body { background: white !important; }
    main { max-width: 100% !important; padding: 0 !important; }
}

/* Pulse Glow for CTA */
.pulse-glow {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(171, 28, 74, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(171, 28, 74, 0); }
}

/* Tooltip */
.tooltip { position: relative; }
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #5c1a1a;
    color: #fff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.tooltip:hover::after { opacity: 1; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}