/* ============================================
   🌌 SUPRA ORÁCULO — PREMIUM QUALITY OVERRIDES
   Larger fonts · Mobile optimization · Premium cards
   Night mode only · Enhanced readability
   ============================================ */

/* ===== GLOBAL FONT SIZE BOOST ===== */
html {
    font-size: 17px;
}
@media (max-width: 768px) {
    html { font-size: 16px; }
}
@media (max-width: 480px) {
    html { font-size: 15px; }
}

body {
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Day mode CSS is present in styles.css but never activates since toggle is removed */
/* body.day-mode rules are dead code — night mode is the only active theme */

/* ===== WELCOME PAGE PREMIUM ===== */
.welcome-fullscreen {
    min-height: 100dvh;
}
.welcome-title {
    font-size: clamp(0.7rem, 2.2vw, 0.95rem) !important;
    letter-spacing: 3px !important;
    text-shadow: 0 0 20px rgba(240,180,41,0.2);
    opacity: 0.7;
    font-weight: 300 !important;
    margin-bottom: 6px !important;
}
.welcome-subtitle-intergalactic {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    letter-spacing: 4px !important;
    filter: drop-shadow(0 0 12px rgba(240,180,41,0.4));
}
.welcome-traditions {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    opacity: 0.85;
}
.welcome-cta {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.welcome-portal-btn {
    padding: 18px 36px !important;
    font-size: 1.1rem !important;
}
.welcome-btn-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
.welcome-btn-sub {
    font-size: 0.85rem !important;
    opacity: 0.8;
}

/* ===== MAIN HEADER PREMIUM ===== */
.main-title {
    font-size: clamp(1.6rem, 5vw, 2.8rem) !important;
    letter-spacing: 5px !important;
    text-shadow: 0 0 40px rgba(240,180,41,0.35);
}
.header-symbols span {
    font-size: 1.2rem !important;
}

/* ===== FORM SECTION PREMIUM ===== */
.section-title {
    font-size: 1.35rem !important;
    letter-spacing: 2px;
}
.section-desc {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.oracle-form label {
    font-size: 1rem !important;
    font-weight: 600;
}
.oracle-form input[type="text"],
.oracle-form input[type="number"] {
    font-size: 1.1rem !important;
    padding: 14px 16px !important;
}
.oracle-form small {
    font-size: 0.82rem !important;
}
.date-field input {
    font-size: 1.2rem !important;
    text-align: center;
}

/* ===== TRADITION TAGS PREMIUM ===== */

/* ===== NEW CTA BUTTON DESIGN ===== */
.btn-cta-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px 32px !important;
    margin: 24px auto 20px !important;
    max-width: 480px;
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
}
.btn-cta-main .btn-text-main {
    display: block;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.btn-cta-main .btn-text-sub {
    display: block;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    opacity: 0.85;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.btn-cta-main .btn-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
}
@media (max-width: 480px) {
    .btn-cta-main .btn-text-main { font-size: 1.15rem !important; }
    .btn-cta-main .btn-text-sub { font-size: 0.75rem !important; }
}

/* ===== YEAR ERROR MESSAGE ===== */
.year-error-msg {
    display: none;
    color: #ef4444 !important;
    font-size: 0.72rem !important;
    margin-top: 4px;
    text-align: center;
    font-weight: 600;
    animation: yearErrorShake 0.4s ease;
}
.year-error-msg.visible { display: block !important; }
@keyframes yearErrorShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.date-field.year-invalid input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239,68,68,0.3) !important;
}

.tradition-tags {
    gap: 8px !important;
}
.t-tag {
    font-size: 0.88rem !important;
    padding: 6px 12px !important;
}

/* ===== PRIMARY BUTTON PREMIUM ===== */
.btn-primary {
    font-size: 1.05rem !important;
    padding: 18px 24px !important;
    border-radius: 16px !important;
}
.btn-text {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}
.btn-subtext {
    font-size: 0.85rem !important;
}

/* ===== LOADING SECTION PREMIUM ===== */
.loading-title {
    font-size: 1.3rem !important;
}
.step span {
    font-size: 0.95rem !important;
}

/* ===== RESULTS HEADER PREMIUM ===== */
.results-header h2 {
    font-size: 1.4rem !important;
    letter-spacing: 1px;
}
.result-date {
    font-size: 0.95rem !important;
}
.soul-code {
    font-size: 1.6rem !important;
    letter-spacing: 6px !important;
}
.soul-label, .soul-sublabel {
    font-size: 0.9rem !important;
}

/* ===== NAVIGATION TABS PREMIUM ===== */
.results-nav {
    gap: 6px !important;
    padding: 10px 12px !important;
}
.nav-tab {
    font-size: 0.85rem !important;
    padding: 8px 14px !important;
    white-space: nowrap;
}
.nav-tab span {
    font-size: 0.85rem !important;
}

/* ===== ACCORDION CARDS — PREMIUM ORACLE STYLING ===== */
.accordion-card {
    border-radius: 18px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(240,180,41,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    transition: all 0.35s ease;
}
.accordion-card:hover {
    box-shadow: 0 6px 32px rgba(240,180,41,0.08);
    border-color: rgba(240,180,41,0.15);
}
.accordion-card.accordion-expanded {
    box-shadow: 0 0 36px rgba(240,180,41,0.15) !important;
    border-color: rgba(240,180,41,0.2) !important;
}
.accordion-header {
    padding: 16px 20px !important;
}
.accordion-header-left h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
.accordion-header-left .card-icon {
    font-size: 1.5rem !important;
}
.card-content {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    padding: 20px !important;
}
.card-content p {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 12px;
}
.card-content h4, .card-content h3 {
    font-size: 1.15rem !important;
    margin-bottom: 10px;
    color: #f0b429;
}
.card-content strong {
    color: #fcd34d;
}
.card-content ul, .card-content ol {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    padding-left: 20px;
}
.card-content li {
    margin-bottom: 8px;
}
.card-content .oracle-value,
.card-content .num-big {
    font-size: 2.2rem !important;
    font-weight: 800;
}

/* ===== HIGHLIGHT CARDS ===== */
.highlight-card {
    border: 1px solid rgba(240,180,41,0.2) !important;
    background: rgba(240,180,41,0.03) !important;
    box-shadow: 0 0 40px rgba(240,180,41,0.1) !important;
}

/* ===== NUMBERS ROW (NUMEROLOGY) ===== */
.numbers-row {
    gap: 12px !important;
}
.numbers-row .num-card {
    padding: 14px !important;
    border-radius: 14px !important;
}
.numbers-row .num-card .num-label {
    font-size: 0.8rem !important;
}
.numbers-row .num-card .num-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
}

/* ===== NUMEROLOGY TABLE ===== */
.numerology-table {
    font-size: 0.95rem !important;
}
.numerology-table td {
    padding: 10px 12px !important;
}

/* ===== TAROT CARD PREMIUM ===== */
.tarot-card-display {
    font-size: 3.5rem !important;
}
.tarot-card-name {
    font-size: 1.3rem !important;
    letter-spacing: 2px;
}
.tarot-keywords {
    font-size: 0.95rem !important;
}

/* ===== ASTROLOGY PREMIUM ===== */
.zodiac-display {
    font-size: 3rem !important;
}
.zodiac-name {
    font-size: 1.3rem !important;
}
.zodiac-traits {
    font-size: 0.95rem !important;
}

/* ===== MAYA PREMIUM ===== */
.maya-seal-display {
    font-size: 2.5rem !important;
}
.maya-seal-name {
    font-size: 1.2rem !important;
}

/* ===== CODES PREMIUM ===== */
.code-value {
    font-size: 1.6rem !important;
    letter-spacing: 4px !important;
    font-weight: 700 !important;
    font-family: 'Orbitron', monospace !important;
}
.code-purpose {
    font-size: 0.95rem !important;
}
.code-copy-btn {
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
}

/* ===== RUNES PREMIUM ===== */
.rune-display {
    font-size: 4rem !important;
}
.rune-name {
    font-size: 1.3rem !important;
}

/* ===== OVERVIEW GRID PREMIUM ===== */
.overview-grid {
    gap: 12px !important;
}
.overview-card {
    padding: 16px !important;
    border-radius: 14px !important;
}
.overview-card .ov-emoji {
    font-size: 1.8rem !important;
}
.overview-card .ov-title {
    font-size: 0.9rem !important;
}
.overview-card .ov-value {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* ===== FLOATING NAV BUTTON ===== */
.nav-floating-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.3rem !important;
    bottom: 20px !important;
    left: 20px !important;
}
.nav-floating-btn .nav-btn-label {
    font-size: 0.55rem !important;
}

/* ===== FLOATING NAV PANEL ===== */
.nav-floating-panel {
    max-height: 75vh !important;
}
.nav-floating-item {
    font-size: 0.92rem !important;
    padding: 10px 14px !important;
}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
}

/* ===== ACTION BUTTONS PREMIUM ===== */
.action-buttons {
    gap: 10px !important;
}
.btn-action {
    font-size: 0.95rem !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
}

/* ===== EXPORT SUMMARY BUTTON ===== */
.btn-export-summary {
    font-size: 0.9rem !important;
    padding: 10px 18px !important;
}

/* ===== FOOTER PREMIUM ===== */
.main-footer {
    font-size: 0.9rem !important;
}
.footer-symbols {
    font-size: 1.2rem !important;
    letter-spacing: 8px;
}
.disclaimer {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}
.traditions-footer {
    font-size: 0.82rem !important;
}

/* ===== PALMISTRY PREMIUM ===== */
.palmistry-intro-pro p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.palm-hand-card h4 {
    font-size: 1.05rem !important;
}
.palm-hand-card p {
    font-size: 0.9rem !important;
}
.palm-features-pro span {
    font-size: 0.88rem !important;
}
.palm-upload-title {
    font-size: 1.1rem !important;
}
.palm-upload-hint {
    font-size: 0.9rem !important;
}

/* ===== LEGAL MODAL PREMIUM ===== */
.legal-modal-content h4 {
    font-size: 1.1rem !important;
}
.legal-modal-content p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.legal-modal-accept {
    font-size: 1.05rem !important;
    padding: 14px 24px !important;
}

/* ===== ORACLE-CENTERED CONTENT (Gnosis, Sumerian) ===== */
.oracle-centered {
    text-align: center;
}
.oracle-centered p {
    text-align: left;
    font-size: 1rem !important;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    font-size: 0.95rem !important;
    padding: 12px 20px !important;
}

/* ===== TOOLBAR PREMIUM ===== */
.toolbar-fixed {
    gap: 8px !important;
}
.toolbar-btn, .lang-toggle-btn {
    font-size: 0.9rem !important;
}
.flag-detect-btn {
    font-size: 0.85rem !important;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    .card-content {
        padding: 16px 14px !important;
    }
    .accordion-header {
        padding: 14px 16px !important;
    }
    .accordion-header-left h3 {
        font-size: 0.95rem !important;
    }
    .results-nav {
        padding: 8px !important;
    }
    .nav-tab {
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }
    .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .soul-code {
        font-size: 1.3rem !important;
    }
    .numbers-row {
        flex-wrap: wrap !important;
    }
    .numbers-row .num-card {
        min-width: 70px !important;
    }
    .action-buttons {
        flex-direction: column !important;
    }
    .btn-action {
        width: 100%;
    }
    .palm-dual-explain {
        flex-direction: column !important;
    }
    .code-value {
        font-size: 1.3rem !important;
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.4rem !important;
    }
    .section-title {
        font-size: 1.15rem !important;
    }
    .section-desc {
        font-size: 0.95rem !important;
    }
    .card-content p {
        font-size: 0.95rem !important;
    }
    .accordion-header-left h3 {
        font-size: 0.88rem !important;
    }
    .overview-grid {
        grid-template-columns: 1fr !important;
    }
    .results-header h2 {
        font-size: 1.15rem !important;
    }
    .tradition-tags {
        justify-content: center;
    }
    .t-tag {
        font-size: 0.8rem !important;
    }
}

/* ===== SMOOTH SCROLL BEHAVIOR ===== */
html {
    scroll-behavior: smooth;
}

/* ===== PREMIUM GLASS EFFECT ===== */
.glass-card {
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* ===== SELECTION COLOR ===== */
::selection {
    background: rgba(240,180,41,0.3);
    color: #fff;
}
::-moz-selection {
    background: rgba(240,180,41,0.3);
    color: #fff;
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
    background: rgba(240,180,41,0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(240,180,41,0.5);
}

/* ===== ORACLE BACK BUTTON ===== */
.oracle-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid rgba(240,180,41,0.2);
    background: rgba(240,180,41,0.06);
    color: #f0b429;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s;
}
.oracle-back-btn:hover {
    background: rgba(240,180,41,0.12);
    border-color: rgba(240,180,41,0.35);
}

/* ===== INVITATION CARD PREMIUM ===== */
.palmistry-invitation-card {
    border: 1px solid rgba(240,180,41,0.15) !important;
}
.invitation-title {
    font-size: 1.3rem !important;
}
.invitation-desc {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}
.inv-feat {
    font-size: 0.95rem !important;
}

/* ===== FINAL ORACLE CARD ===== */
.final-oracle-card {
    border: 2px solid rgba(240,180,41,0.25) !important;
    box-shadow: 0 0 60px rgba(240,180,41,0.15) !important;
}
.final-oracle-title {
    font-size: 1.4rem !important;
    letter-spacing: 3px;
}

/* ===== CTA BUTTON — NEW SUBTEXT ===== */
.btn-cta-main .btn-subtext-main {
    display: block;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    opacity: 0.85;
    letter-spacing: 0.3px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}
.btn-cta-main .btn-text-main {
    display: block;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===== PALMISTRY VISUAL GUIDE ===== */
.palm-visual-guide {
    margin: 0 0 24px;
    padding: 20px;
    background: rgba(240,180,41,0.03);
    border: 1px solid rgba(240,180,41,0.12);
    border-radius: 16px;
}
.palm-guide-header {
    text-align: center;
    margin-bottom: 16px;
}
.palm-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(240,180,41,0.1);
    border: 1px solid rgba(240,180,41,0.2);
    color: #f0b429;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.palm-guide-header h4 {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem !important;
    color: rgba(232,228,245,0.7);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.palm-guide-images {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.palm-guide-img-card {
    text-align: center;
    flex: 1;
    min-width: 130px;
    max-width: 200px;
}
.palm-guide-img-card img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid rgba(0,212,255,0.15);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}
.palm-guide-img-card img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(0,212,255,0.15);
}
.palm-guide-img-label {
    display: block;
    font-size: 0.82rem;
    color: rgba(0,212,255,0.8);
    margin-top: 8px;
    font-weight: 600;
}
.palm-guide-tip {
    text-align: center;
    font-size: 0.8rem !important;
    color: rgba(232,228,245,0.5) !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}
.palm-guide-tip i {
    color: #f0b429;
    margin-right: 4px;
}

/* ===== CAMERA BUTTON — DIRECT CAPTURE STYLE ===== */
.btn-camera-direct {
    background: linear-gradient(135deg, #1a8cff, #0066cc) !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(26,140,255,0.3);
}
.btn-camera-direct:hover {
    box-shadow: 0 6px 24px rgba(26,140,255,0.4);
    transform: translateY(-2px);
}
.btn-gallery-alt {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(232,228,245,0.7) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
}
.btn-gallery-alt:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* ===== LANGUAGE FLAG AUTO-DISPLAY ===== */
.lang-flag-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: rgba(240,180,41,0.5);
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.7;
}
.lang-flag-indicator .flag-emoji-small {
    font-size: 0.9rem;
}

/* ===== ACTION BUTTON — NEW QUERY HIGHLIGHT ===== */
.btn-action-new {
    border-color: rgba(124,106,239,0.35) !important;
    color: #a78bfa !important;
}
.btn-action-new:hover {
    background: rgba(124,106,239,0.12) !important;
    border-color: rgba(124,106,239,0.5) !important;
}