/* ======================================== */
/* Zero Card CSS - Extracted from page-is-good-name.php */
/* ======================================== */
/* REQUIRED FIELD ASTERISKS ARE STYLED HERE - CHECK IF CSS IS LOADING */

/* Language Detection Status Styling */
.language-status {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.language-status.detected {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.dark-mode .language-status {
    background-color: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark-mode .language-status.detected {
    background-color: #064e3b;
    color: #6ee7b7;
    border-color: #059669;
}

/* CSS Variables for Font Sizes */
:root {
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
}

.zero-card-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    position: relative;
}

/* Responsive width adjustments for larger screens */
@media (min-width: 768px) {
    .zero-card-container {
        max-width: 800px;
    }
}

@media (min-width: 1024px) {
    .zero-card-container {
        max-width: 1000px;
    }
}

@media (min-width: 1280px) {
    .zero-card-container {
        max-width: 1200px;
    }
}
.language-status {
    font-size: 10px !important;
}
.char-counter{
    margin-top: 4px;
    font-size: 10px !important;
}

.char-limit-indicator {
    margin-top: 6px !important;
}

/* Form Block Styling */
.dont-require-form {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
    margin-bottom: 20px;
    line-height: 1.4;
    margin-top: 40px;
    margin-bottom: 0;
}

.main-require-form{
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
    margin-bottom: 20px;
    line-height: 1.4;
}


/* Dark mode for form blocks */

.dark-mode .main-require-form {
    background: rgb(26, 30, 38);
    border-color: #4b5563;
}

.dark-mode .zero-card-container {
    background: #1a1a1a;
    color: #f9fafb;
}

.zero-card-header {
    text-align: center;
}

.zero-card-header h1 {
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.025em;
}

.dark-mode .zero-card-header h1 {
    color: #f9fafb;
}

.zero-card-header p {
    color: #64748b;
    max-width: 500px;
    margin: 0 auto;
}

.dark-mode .zero-card-header p {
    color: #9ca3af;
}

.form-description {
    color: #6b7280;
    max-width: 600px;
    margin: 2rem auto 2rem;
    padding: 1.25rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #f3f4f6;
    line-height: 1.4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-mode .form-description {
    color: #9ca3af;
    background:#1d1d1d;
    border-color: #1c1c1c;
}

.zero-card-form {
    background: #ffffff;
    padding: 1rem 0 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.dark-mode .zero-card-form {
    background: #1a1a1a;
}

/* Form group styling - margin removed as requested */

.form-help {
    margin-top: 15px;
    line-height: 1.2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    letter-spacing: 0.025em;
    position: relative;
}

/* Style for labels with required fields */
.form-group label:has(.required) {
    font-weight: 600;
}

/* Required asterisk styling - single, clean rule */
.required {
    color: #ef4444 !important;
    font-weight: 600 !important;
    font-size: 1.2em !important;
    margin-left: 2px;
    display: inline-block !important;
    vertical-align: top;
    line-height: 1;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
}

/* Dark mode required asterisk */
.dark-mode .required {
    color: #f87171 !important;
    text-shadow: 0 0 2px rgba(248, 113, 113, 0.3);
}

.dark-mode .form-group label {
    color: #d1d5db;
}

.form-group input,
.form-group select {
    font-family: 'GoNotoKurrent', sans-serif !important;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #111827;
    box-sizing: border-box;
    cursor: pointer;
}

.dark-mode .form-group input,
.dark-mode .form-group select {
    background: #1a1a1a !important;
    color: #f9fafb !important;
    border-color: rgb(66, 67, 67) !important;
}

/* Override browser default styling for filled inputs in dark mode */
.dark-mode .form-group input:-webkit-autofill,
.dark-mode .form-group input:-webkit-autofill:hover,
.dark-mode .form-group input:-webkit-autofill:focus,
.dark-mode .form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important;
    -webkit-text-fill-color: #f9fafb !important;
    background-color: #1a1a1a !important;
}

.dark-mode .form-group input[type="text"]:not([value=""]),
.dark-mode .form-group input[type="date"]:not([value=""]),
.dark-mode .form-group input[type="time"]:not([value=""]),
.dark-mode .form-group select:not([value=""]),
.dark-mode .form-group input:not([value=""]):not([type="submit"]) {
    background-color: #1a1a1a !important;
    color: #f9fafb !important;
}

/* Custom select dropdown styling */
.form-group select {
    font-family: 'GoNotoKurrent', sans-serif !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

/* Dark mode icon styling - ensure chevron is always visible */
.dark-mode .form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
}

/* Dark mode calendar icon styling for date inputs */
.dark-mode .form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
}

.dark-mode .form-group input[type="date"]::-webkit-inner-spin-button,
.dark-mode .form-group input[type="date"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(1.5);
}

.dark-mode .form-group input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
}

.dark-mode .form-group input[type="time"]::-webkit-inner-spin-button,
.dark-mode .form-group input[type="time"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(1.5);
}

.form-group select:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.form-group select option {
    background: #ffffff ;
    color: #111827 ;
    padding: 0.75rem 1rem;
    border: none;
}

.dark-mode .form-group select option {
    background: #374151;
    color: #f9fafb;
}

.form-group select option:hover,
.form-group select option:checked {
    background-color: #ffffff ;
    color: #111827 ;
}

.dark-mode .form-group select option:hover,
.dark-mode .form-group select option:checked {
    background-color: #4b5563;
    color: #f9fafb;
}

.form-group input:hover,
.form-group select:hover {
    border-color: #d1d5db;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}
.help-text{
    margin-top: 15px;
    line-height: 1.2;
}

/* Gradient Wave Button with Electric Neon Effects */
.submit-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    background-image: 
        linear-gradient(45deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    background-size: 400% 400%, 200% 100%, 300% 100%;
    background-position: 0% 50%, -100% 0%, -100% 0%;
    color: #ffffff;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    max-width: 600px;
    margin: 1rem auto 0;
    letter-spacing: 0.3px;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: gradientShift 3s ease infinite, waveMove3 3s linear infinite, waveMove4 3.5s linear infinite;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 4 Moving Wave Layers */
.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: waveMove1 2s linear infinite;
    z-index: 1;
}

.submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: waveMove2 2.5s linear infinite;
    z-index: 1;
}


/* Electric Neon Hover Effects */
.submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    animation: gradientShift 1.5s ease infinite;
}

.submit-btn:hover::before {
    animation: waveMove1 1s linear infinite;
}

.submit-btn:hover::after {
    animation: waveMove2 1.2s linear infinite;
}

.submit-btn:active {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Dark mode gradient wave button */
.dark-mode .submit-btn {
    background: linear-gradient(45deg, #1e3a8a 0%, #7c3aed 25%, #ec4899 50%, #ef4444 75%, #06b6d4 100%);
    background-size: 400% 400%;
    color: #f9fafb;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.dark-mode .submit-btn:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* Wave Animation Keyframes */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes waveMove1 {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes waveMove2 {
    0% { left: -100%; }
    100% { left: 100%; }
}

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

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


/* Ensure text is above wave layers */
.submit-btn .label {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/* Cyberpunk Dotted Electric Border */
.submit-btn .border-light {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px dotted #00ffff;
    animation: cyberpunkDots 2s linear infinite;
    z-index: 3;
}

/* Dark mode cyberpunk border */
.dark-mode .submit-btn .border-light {
    border-color: #00ffff;
}

/* Cyberpunk border hover effect */
.submit-btn:hover .border-light {
    animation: cyberpunkDots 1s linear infinite;
    filter: brightness(1.8) saturate(2);
    border-width: 4px;
}

/* Cyberpunk Dots Animation */
@keyframes cyberpunkDots {
    0% { 
        border-color: #00ffff;
        box-shadow: 0 0 10px #00ffff;
    }
    16.66% { 
        border-color: #ff00ff;
        box-shadow: 0 0 10px #ff00ff;
    }
    33.33% { 
        border-color: #00ff00;
        box-shadow: 0 0 10px #00ff00;
    }
    50% { 
        border-color: #ffff00;
        box-shadow: 0 0 10px #ffff00;
    }
    66.66% { 
        border-color: #ff0000;
        box-shadow: 0 0 10px #ff0000;
    }
    83.33% { 
        border-color: #ff8000;
        box-shadow: 0 0 10px #ff8000;
    }
    100% { 
        border-color: #00ffff;
        box-shadow: 0 0 10px #00ffff;
    }
}

.form-errors {
    background: #fef2f2;
    color: #991b1b;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #fecaca;
}

.dark-mode .form-errors {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #dc2626;
}

.form-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

.form-errors li {
    margin-bottom: 0.25rem;
}

.analysis-result {
    background: #f0f9ff;
    color: #1e40af;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    text-align: center;
    border: 1px solid #bae6fd;
}

.dark-mode .analysis-result {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #3b82f6;
}

/* Loading overlay styles */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    margin: 0;
    padding: 0;
}

.loading-spinner {
    text-align: center;
    padding: 2rem;
    backdrop-filter: blur(5px);
    border-radius: 12px;
    min-width: 200px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #374151;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
    display: block;
}

.dark-mode .spinner {
    border-color: #4b5563;
    border-top-color: #60a5fa;
}

.loading-text {
    color: #6b7280;
    font-weight: 500;
    margin: 0;
    text-align: center;
    width: 100%;
}

.dark-mode .loading-text {
    color: #9ca3af;
}




@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure loading overlay works on all devices and screen sizes */
@media (max-width: 768px) {
    .loading-spinner {
        padding: 1.5rem;
        min-width: 180px;
        max-width: 85vw;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
}

@media (max-width: 480px) {
    .loading-spinner {
        padding: 1rem;
        min-width: 160px;
        max-width: 80vw;
    }
    
    .spinner {
        width: 36px;
        height: 36px;
        border-width: 3px;
    }
}

/* Selected Cards Display in Loading Spinner */
 .selected-cards-display {
     margin-top: 12px;
     text-align: center;
     max-width: 100%;
 }

.selected-cards-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
    text-align: center;
}

.dark-mode .selected-cards-title {
    color: #f9fafb;
}

 .selected-cards-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: center;
     align-items: center;
     max-width: 600px;
     margin: 0 auto;
     min-height: 120px;
 }

 /* Specific layouts for different card counts */
 .selected-cards-grid.cards-1-5 {
     max-width: 600px;
 }

 /* Center cards based on count */
 .selected-cards-grid.cards-1-5[data-card-count="1"] {
     justify-content: center;
 }

 .selected-cards-grid.cards-1-5[data-card-count="2"] {
     justify-content: center;
 }

 .selected-cards-grid.cards-1-5[data-card-count="3"] {
     justify-content: center;
 }

 .selected-cards-grid.cards-1-5[data-card-count="4"] {
     justify-content: center;
 }

 .selected-cards-grid.cards-1-5[data-card-count="5"] {
     justify-content: center;
 }

 .selected-cards-grid.cards-6-10 {
     max-width: 600px;
 }

 /* 6-10 cards layout */
 .selected-cards-grid.cards-6-10 {
     max-width: 600px;
 }

 .selected-cards-grid.cards-11-15 {
     max-width: 600px;
 }

 .continue-message{
    padding: 0px;
 }
.selected-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 130px !important;
    max-width: 130px !important;
}

.selected-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark-mode .selected-card-item {
    background: rgba(55, 65, 81, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .selected-card-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.selected-card-image {
    width: 60px;
    height: 105px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    border: 2px solid #e5e7eb;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-mode .selected-card-image {
    border-color: #4b5563;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.selected-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.card-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dark-mode .card-name {
    color: #f9fafb;
}

.card-position {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
}

.dark-mode .card-position {
    color: #9ca3af;
}

 /* Responsive adjustments for selected cards */
 @media (max-width: 768px) {
     .selected-cards-grid {
         gap: 0.75rem;
         max-width: 480px;
     }
     
     .selected-card-item {
         min-width: 90px;
         padding: 0.5rem;
     }
     
     .selected-card-image {
         width: 50px;
         height: 88px;
     }
     
     .card-name {
         font-size: 0.7rem;
     }
     
     .card-position {
         font-size: 0.65rem;
     }
 }

 @media (max-width: 1024px) and (min-width: 769px) {
     .selected-cards-grid {
         gap: 0.875rem;
         max-width: 550px;
     }
     
     .selected-card-item {
         min-width: 95px;
         padding: 0.6rem;
     }
     
     .selected-card-image {
         width: 52px;
         height: 91px;
     }
 }

 @media (max-width: 480px) {
     .selected-cards-grid {
         gap: 0.5rem;
         max-width: 360px;
     }
     
     .selected-card-item {
         min-width: 80px;
         padding: 0.4rem;
     }
     
     .selected-card-image {
         width: 45px;
         height: 79px;
     }
     
     .card-name {
         font-size: 0.65rem;
     }
     
     .card-position {
         font-size: 0.6rem;
     }
 }

/* Result display styles */
.zero-card-result {
    margin-top: 1rem;
    background: #ffffff;
    overflow: hidden;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.dark-mode .zero-card-result {
    background: #1a1a1a;
}

/* Support for new AskCard-message structure */
.AskCard-message {
    margin-top: 1rem;
    background: #ffffff !important;
    overflow: hidden;
    padding: 20px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .AskCard-message {
        padding: 0px;
    }
}

/* Higher specificity for page-dream-to-number.php to override chat.css */
/* Use multiple high-specificity selectors to ensure override */
.zero-card-container .dark-mode .AskCard-message,
.dark-mode .zero-card-container .AskCard-message,
#main .zero-card-container .dark-mode .AskCard-message,
#content .zero-card-container .dark-mode .AskCard-message,
body.page-template-page-dream-to-number .dark-mode .AskCard-message,
body.page-id-123 .dark-mode .AskCard-message {
    background: #1a1a1a !important;
    color: #f9fafb !important;
}

/* Original fallback selector */
.dark-mode .AskCard-message {
    background: #1a1a1a !important ;
}

.result-content, .message-content {
    padding: 0rem;
    max-width: 630px;
    margin: 0 auto;
}

.result-content h2 {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 1.5rem;
    text-align: center;
}

.dark-mode .result-content h2 {
    color: #f9fafb;
}

.result-text {
    font-family: "GoNotoKurrent", sans-serif;
    background: #f0f0f0;
    color: #3f3f46;
    padding: 1.5rem;
    margin-top: 16px;
    margin-bottom: 2rem;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
}

.result-text p {
    margin-bottom: 0px;
}

.result-text p:has(strong) {
    margin-bottom: 0;
}

.dark-mode .result-text {
    background-color: #242424; 
    color: #808080; 
    border: 1px solid #3f3f46;
}

.dark-mode .result-text h1,
.dark-mode .result-text h2,
.dark-mode .result-text h3,
.dark-mode .result-text h4,
.dark-mode .result-text h5,
.dark-mode .result-text h6 {
    color: #f0f0f0; 
}

.dark-mode .result-text strong {
    color: #f0f0f0; 
}

.result-text p {
    margin-bottom: 0.96em;
    line-height: 1.6;
}

.result-text ul,
.result-text ol {
    margin: 0.24em 0;
    padding-left: 1.8em;
}

.result-text ul {
    list-style-type: disc;
}

.result-text ul ul {
    list-style-type: circle;
    margin: 0.12em 0;
    padding-left: 1.44em;
}

.result-text ul ul ul {
    list-style-type: square;
    margin: 0.12em 0;
    padding-left: 1.2em;
}

.result-text ol {
    list-style-type: decimal;
}

.result-text ol ol {
    list-style-type: lower-alpha;
    margin: 0.12em 0;
    padding-left: 1.44em;
}

.result-text ol ol ol {
    list-style-type: lower-roman;
    margin: 0.12em 0;
    padding-left: 1.2em;
}

.result-text li {
    margin: 0.18em 0;
    padding-left: 0.12em;
    line-height: 1.5;
}

.result-text li > p {
    margin: 0;
    line-height: 1.5;
}

/* Improve bullet point spacing and reduce whitespace */
.result-text li:first-child {
    margin-top: 0;
}

.result-text li:last-child {
    margin-bottom: 0;
}

/* Reduce spacing between consecutive list items */
.result-text li + li {
    margin-top: 0.12em;
}

/* Better spacing for nested lists */
.result-text ul ul,
.result-text ol ol {
    margin-top: 0.12em;
    margin-bottom: 0.12em;
}

/* Reduce whitespace around bullet points */
.result-text ul:first-child,
.result-text ol:first-child {
    margin-top: 0;
}

.result-text ul:last-child,
.result-text ol:last-child {
    margin-bottom: 0;
}

.result-text blockquote {
    border-left: 4px solid rgb(51, 5, 119); 
    margin: 1em 0;
    padding: 0.5em 1em;
    background: rgba(0, 188, 212, 0.05);
    border-radius: 0 4px 4px 0;
}

.dark-mode .result-text blockquote {
    border-left-color: rgb(64, 8, 96);
    background: rgba(0, 188, 212, 0.1);
    color: #f0f0f0; 
}

.result-text code {
    background: rgba(0, 0, 0, 0.04);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: GoNotoKurrent, SFMono-Regular, SF Mono, Menlo, Consolas,
      Liberation Mono, monospace;
}

.dark-mode .result-text code {
    background-color: #374151; 
    color: #f0f0f0; 
    padding: 2px 4px;
    border-radius: 3px;
}

.result-text pre {
    background: rgba(0, 0, 0, 0.04);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-size: 0.85em;
}

.dark-mode .result-text pre {
    background-color: #1e293b; 
    border: 1px solid #475569;
}

.result-text strong, .result-text b {
    font-weight: 600;
    color: #3f3f46;
}

.dark-mode .result-text strong, 
.dark-mode .result-text b {
    color: #f0f0f0;
}

.result-text em, .result-text i {
    font-style: italic;
}

/* Add margin-top to h2 elements */
.result-text h2 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

/* Add margin to hr lines and horizontal rules */
.result-text hr {
    margin-top: 32px;
    margin-bottom: 16px;
    border: none;
    border-top: 1px solid #e2e8f0;
    height: 1px;
}

.dark-mode .result-text hr {
    border-top: 1px solid #3f3f46;
}

/* Style horizontal rules created with dashes (---) */
.result-text p:contains('---'),
.result-text div:contains('---') {
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
    color: #6b7280;
}

/* Alternative: style paragraphs that contain only dashes */
.result-text p:only-child:contains('---') {
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
    color: #6b7280;
    font-weight: 300;
}

.result-text a {
    color: #2563eb;
    text-decoration: underline;
}

.dark-mode .result-text a {
    color: #60a5fa;
}


/* ================================== */
/* Font Size Control Classes - Updated to use data-font-size attribute */
/* ================================== */

/* Small Font Size */
.zero-card-container[data-font-size="small"] .zero-card-header h1 {
    font-size: 1.5rem; /* 24px */
}

.zero-card-container[data-font-size="small"] .form-description {
    font-size: 0.75rem; /* 12px */
    line-height: 1.4;
}

.zero-card-container[data-font-size="small"] .form-group label {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .form-group input,
.zero-card-container[data-font-size="small"] .form-group select {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .submit-btn {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .result-text {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .result-text h1 {
    font-size: 1.125rem; /* 18px */
}

.zero-card-container[data-font-size="small"] .result-text h2 {
    font-size: 1rem; /* 16px */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.zero-card-container[data-font-size="small"] .result-text h3 {
    font-size: 0.9375rem; /* 15px */
}

.zero-card-container[data-font-size="small"] .result-text ul,
.zero-card-container[data-font-size="small"] .result-text ol {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .result-text code {
    font-size: 0.6875rem; /* 11px */
}

.zero-card-container[data-font-size="small"] .result-text pre {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .result-text blockquote {
    font-size: 0.75rem; /* 12px */
}

/* Small Font Size - Zero Card Form Elements */
.zero-card-container[data-font-size="small"] .zero-card-form .form-group label {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .zero-card-form .form-group label span[data-i18n] {
    font-size: 0.75rem !important; /* 12px - override style.css */
}

.zero-card-container[data-font-size="small"] .zero-card-form .form-group label span.i18n-translated {
    font-size: 0.75rem !important; /* 12px - override style.css */
}

.zero-card-container[data-font-size="small"] .zero-card-form .form-group input,
.zero-card-container[data-font-size="small"] .zero-card-form .form-group select {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .zero-card-form .form-group textarea {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .zero-card-form .help-text {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .zero-card-form .submit-btn {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .zero-card-form .continue-submit-btn {
    font-size: 0.75rem; /* 12px */
}

/* Small Font Size - Continue Ask Section */
.zero-card-container[data-font-size="small"] .continue-ask-section .form-group label {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .form-group label span[data-i18n] {
    font-size: 0.75rem !important; /* 12px - override style.css */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .form-group label span.i18n-translated {
    font-size: 0.75rem !important; /* 12px - override style.css */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .form-group textarea {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .help-text {
    font-size: 0.75rem; /* 12px */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .continue-submit-btn {
    font-size: 0.75rem; /* 12px */
}

/* Exclude .textarea-footer from font-size adjustments */
.zero-card-container[data-font-size="small"] .zero-card-form .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="small"] .zero-card-form .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="small"] .zero-card-form .textarea-footer .char-counter {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="small"] .continue-ask-section .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="small"] .continue-ask-section .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="small"] .continue-ask-section .textarea-footer .char-counter {
    font-size: 10px !important;
}

/* Medium Font Size (Default - using CSS variables) */
.zero-card-container[data-font-size="medium"] .zero-card-header h1 {
    font-size: var(--font-size-2xl); /* 24px */
}

.zero-card-container[data-font-size="medium"] .form-description {
    font-size: var(--font-size-sm); /* 14px */
    line-height: 1.4;
    display:block;
}

.zero-card-container[data-font-size="medium"] .form-group label {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .form-group input,
.zero-card-container[data-font-size="medium"] .form-group select {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .submit-btn {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .result-text {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .result-text h1 {
    font-size: var(--font-size-xl); /* 20px */
}

.zero-card-container[data-font-size="medium"] .result-text h2 {
    font-size: var(--font-size-lg); /* 18px */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.zero-card-container[data-font-size="medium"] .result-text h3 {
    font-size: var(--font-size-md); /* 16px */
}

.zero-card-container[data-font-size="medium"] .result-text ul,
.zero-card-container[data-font-size="medium"] .result-text ol {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .result-text code {
    font-size: var(--font-size-xs); /* 12px */
}

.zero-card-container[data-font-size="medium"] .result-text pre {
    font-size: var(--font-size-xs); /* 12px */
}

.zero-card-container[data-font-size="medium"] .result-text blockquote {
    font-size: var(--font-size-sm); /* 14px */
}

/* Medium Font Size - Zero Card Form Elements */
.zero-card-container[data-font-size="medium"] .zero-card-form .form-group label {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .form-group label span[data-i18n] {
    font-size: var(--font-size-sm) !important; /* 14px - override style.css */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .form-group label span.i18n-translated {
    font-size: var(--font-size-sm) !important; /* 14px - override style.css */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .form-group input,
.zero-card-container[data-font-size="medium"] .zero-card-form .form-group select {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .form-group textarea {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .help-text {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .submit-btn {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .continue-submit-btn {
    font-size: var(--font-size-sm); /* 14px */
}

/* Medium Font Size - Continue Ask Section */
.zero-card-container[data-font-size="medium"] .continue-ask-section .form-group label {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .form-group label span[data-i18n] {
    font-size: var(--font-size-sm) !important; /* 14px - override style.css */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .form-group label span.i18n-translated {
    font-size: var(--font-size-sm) !important; /* 14px - override style.css */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .form-group textarea {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .help-text {
    font-size: var(--font-size-sm); /* 14px */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .continue-submit-btn {
    font-size: var(--font-size-sm); /* 14px */
}

/* Exclude .textarea-footer from font-size adjustments */
.zero-card-container[data-font-size="medium"] .zero-card-form .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="medium"] .zero-card-form .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="medium"] .zero-card-form .textarea-footer .char-counter {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="medium"] .continue-ask-section .textarea-footer .char-counter {
    font-size: 10px !important;
}

/* Large Font Size */
.zero-card-container[data-font-size="large"] .zero-card-header h1 {
    font-size: 2.5rem; /* 40px */
}

.zero-card-container[data-font-size="large"] .form-description {
    font-size: 1rem; /* 16px */
    line-height: 1.4;
    display:block;
}

.zero-card-container[data-font-size="large"] .form-group label {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .form-group input,
.zero-card-container[data-font-size="large"] .form-group select {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .submit-btn {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .result-text {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-header h1 {
    font-size: 2.5rem; /* 40px */
}

.zero-card-container[data-font-size="large"] .form-description {
    font-size: 1rem; /* 16px */
    display:block;
}

.zero-card-container[data-font-size="large"] .form-group label {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .form-group input,
.zero-card-container[data-font-size="large"] .form-group select {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .submit-btn {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .result-text {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .result-text h1 {
    font-size: 1.5rem; /* 24px */
}

.zero-card-container[data-font-size="large"] .result-text h2 {
    font-size: 1.375rem; /* 22px */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.zero-card-container[data-font-size="large"] .result-text h3 {
    font-size: 1.25rem; /* 20px */
}

.zero-card-container[data-font-size="large"] .result-text ul,
.zero-card-container[data-font-size="large"] .result-text ol {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .result-text code {
    font-size: 0.875rem; /* 14px */
}

.zero-card-container[data-font-size="large"] .result-text pre {
    font-size: 0.875rem; /* 14px */
}

.zero-card-container[data-font-size="large"] .result-text blockquote {
    font-size: 1rem; /* 16px */
}

/* Large Font Size - Zero Card Form Elements */
.zero-card-container[data-font-size="large"] .zero-card-form .form-group label {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-form .form-group label span[data-i18n] {
    font-size: 1rem !important; /* 16px - override style.css */
}

.zero-card-container[data-font-size="large"] .zero-card-form .form-group label span.i18n-translated {
    font-size: 1rem !important; /* 16px - override style.css */
}

.zero-card-container[data-font-size="large"] .zero-card-form .form-group input,
.zero-card-container[data-font-size="large"] .zero-card-form .form-group select {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-form .form-group textarea {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-form .help-text {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-form .submit-btn {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .zero-card-form .continue-submit-btn {
    font-size: 1rem; /* 16px */
}

/* Large Font Size - Continue Ask Section */
.zero-card-container[data-font-size="large"] .continue-ask-section .form-group label {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .form-group label span[data-i18n] {
    font-size: 1rem !important; /* 16px - override style.css */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .form-group label span.i18n-translated {
    font-size: 1rem !important; /* 16px - override style.css */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .form-group textarea {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .help-text {
    font-size: 1rem; /* 16px */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .continue-submit-btn {
    font-size: 1rem; /* 16px */
}

/* Exclude .textarea-footer from font-size adjustments */
.zero-card-container[data-font-size="large"] .zero-card-form .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="large"] .zero-card-form .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="large"] .zero-card-form .textarea-footer .char-counter {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="large"] .continue-ask-section .textarea-footer {
    font-size: 10px !important; /* Keep original small size */
}

.zero-card-container[data-font-size="large"] .continue-ask-section .textarea-footer .language-status {
    font-size: 10px !important;
}

.zero-card-container[data-font-size="large"] .continue-ask-section .textarea-footer .char-counter {
    font-size: 10px !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .zero-card-container {
        padding: 1rem;
    }
    
    .zero-card-header h1 {
        font-size: 1.75rem;
    }
    
    .zero-card-header {
        margin-bottom: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .zero-card-form {
        width: 100%;
        max-width: 100%;
        padding: 0.5rem 0 0;
    }
    
    .form-group input,
    .form-group select {
        padding: 0.875rem 0.75rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .submit-btn {
        width: 100%;
        max-width: 100%;
        padding: 1rem 1.5rem;
        margin: 1rem 0 0;
    }
    
    .form-description {
        margin: 1.5rem auto 1.5rem;
        padding: 1rem;
        font-size: 0.875rem;
        display:block;
    }
    
    /* Ensure required asterisks are visible on mobile */
    .required {
        font-size: 1.1em !important;
        margin-left: 1px;
    }
}

/* Enhanced layout for larger screens */
@media (min-width: 768px) {
    .form-row {
        gap: 2rem;
    }
    
    /* Form group styling - margin removed as requested */
    
    .zero-card-header h1 {
        font-size: 2.5rem;
    }
    
    .zero-card-header p {
        font-size: 1.125rem;
        max-width: 700px;
    }
    
    .zero-card-form {
        width: 100%;
        max-width: 600px;
    }
    
    .submit-btn {
        width: 100%;
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .form-row {
        gap: 2.5rem;
    }
    
    .zero-card-header h1 {
        font-size: 3rem;
    }
    
    .zero-card-header p {
        font-size: 1.25rem;
        max-width: 800px;
    }
    
    .form-group input,
    .form-group select {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }
    
    .submit-btn {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
}

/* ======================================== */
/* Usage Status Display Styling */
/* ======================================== */

.limit-info-container {
    margin-top: 2rem;
}

.usage-status-display {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.usage-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.usage-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.usage-icon {
    font-size: 1.5rem;
}

.usage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.usage-stat {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.usage-value {
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    color: white;
}

.usage-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 4px;
    display: block;
}

.usage-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin: 20px 0;
}

.usage-fill {
    height: 100%;
    transition: width 0.3s ease-in-out;
}

.usage-fill.limit-ok {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.usage-fill.limit-warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.usage-fill.limit-critical {
    background: linear-gradient(90deg, #dc2626, #b91c1c);
}

.usage-message {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 16px;
}

/* Dark mode adjustments for usage status */
.dark-mode .usage-status-display {
    background: linear-gradient(135deg, #059669, #047857);
}

/* Mobile responsive for usage status */
@media (max-width: 640px) {
    .usage-status-display {
        padding: 16px;
        margin: 16px 0;
        border-radius: 8px;
    }
    
    .usage-header h3 {
        font-size: 1rem;
    }
    
    .usage-icon {
        font-size: 1.25rem;
    }
    
    .usage-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin: 16px 0;
    }
    
    .usage-stat {
        padding: 8px;
    }
    
    .usage-value {
        font-size: 1.25rem;
    }
    
    .usage-label {
        font-size: 0.8rem;
    }
    
    .usage-message {
        font-size: 0.85rem;
    }
}

/* ======================================== */
/* Limit Error Display Styling */
/* ======================================== */

.limit-error-display {
    margin-top: 2rem;
    padding: 1rem;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
}

.limit-error-display .rate-limit-inline,
.limit-error-display .no-access-inline,
.limit-error-display .too-many-requests-inline {
    margin: 0;
}

/* Ensure the limit display takes full width */
.limit-error-display .rate-limit-inline,
.limit-error-display .no-access-inline,
.limit-error-display .too-many-requests-inline {
    width: 100%;
    max-width: none;
}

/* Error Display Classes Styling */
.too-many-requests-error-display,
.generic-error-display,
.limit-error-display,
.no-access-error-display {
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

.result-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.download-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.download-btn {
    background: #374151;
    color: #ffffff;
}

.download-btn:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

/* Dark mode styles for result actions */

.dark-mode .download-btn {
    background: #374151;
}

.dark-mode .download-btn:hover {
    background: #374151;
}

/* Download result button from hybrid module */
.download-result-btn {
    background: #374151;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.download-result-btn:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

/* SVG icon styling for download button (if needed in future) */
.download-result-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
}

.dark-mode .download-result-btn {
    background: #374151;
}

.dark-mode .download-result-btn:hover {
    background: #4b5563;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .result-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .download-btn,
    .download-result-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 12px 24px;
        font-size: 16px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Ensure consistent styling for all button types in mobile */
}

/* ======================================== */
/* Dream to Number Specific Styles */
/* ======================================== */

/* Character counter and input limit styling */
.textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.char-counter {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.char-counter span {
    font-weight: 600;
    transition: color 0.2s ease;
}

.char-limit-indicator {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 2px;
    font-style: italic;
}

/* Form focus states */
input[type="text"]:focus,
textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Red border for empty textareas */
textarea:invalid,
textarea:placeholder-shown {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgb(169 68 239 / 10%);
}

/* Dark mode red border for empty textareas */
.dark-mode textarea:invalid,
.dark-mode textarea:placeholder-shown {
    border-color: #2d2d2d;
    box-shadow: 0 0 0 3px rgba(213, 207, 207, 0.1);
}

/* Textarea height control */
textarea {
    max-height: 160px;
    resize: vertical;
}

/* ======================================== */
/* Dream to Number Specific Styles */
/* ======================================== */


/* Ensure select options also use the font */
.form-group select option {
    font-family: 'GoNotoKurrent', sans-serif !important;
    font-size: 16px;
    padding: 4px;
}

/* Submit button font family */
.submit-btn {
    font-family: 'GoNotoKurrent', sans-serif;
}

/* Form help responsive font sizes */
.zero-card-container[data-font-size="small"] .form-help {
    font-size: 0.75rem; /* 12px for small */
}

.zero-card-container[data-font-size="medium"] .form-help {
    font-size: 0.875rem; /* 14px for medium */
}

.zero-card-container[data-font-size="large"] .form-help {
    font-size: 1rem; /* 16px for large */
}

/* Submit button responsive font sizes */
.zero-card-container[data-font-size="small"] .submit-btn {
    font-size: 0.75rem; /* 12px for small */
}

.zero-card-container[data-font-size="medium"] .submit-btn {
    font-size: 0.875rem; /* 14px for medium */
}

.zero-card-container[data-font-size="large"] .submit-btn {
    font-size: 1rem; /* 16px for large */
}

/* Ensure consistent label font-size - override font-size settings */
.zero-card-container .form-group label {
    font-size: 0.875rem !important; /* 14px - matches medium setting */
    font-weight: 500;
    color: #374151;
    letter-spacing: 0.025em;
}

/* Ensure consistent form-description font-size using data-font-size */
.zero-card-container[data-font-size="small"] .form-description {
    font-size: 0.75rem; /* 12px for small */
    line-height: 1.5;
    color: #6b7280;
}

.zero-card-container[data-font-size="medium"] .form-description {
    font-size: 0.875rem; /* 14px for medium */
    line-height: 1.5;
    color: #6b7280;
}

.zero-card-container[data-font-size="large"] .form-description {
    font-size: 1rem; /* 16px for large */
    line-height: 1.5;
    color: #6b7280;
}

/* ======================================== */
/* Continue Ask Functionality Styles */
/* ======================================== */

/* Continue Ask Section */
.continue-ask-section {
    max-width: 620px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.dark-mode .continue-ask-section {
    background: #2a2a2a;
    border-color: #444;
}

/* Continue Reading Button */
.continue-reading-btn {
    font-family: 'GoNotoKurrent', sans-serif;
    background: #514181;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgb(175 76 173 / 20%);
}

.continue-reading-btn:hover {
    background: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.continue-reading-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.continue-reading-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

/* Continue Reading Section */
.continue-reading-section {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
}

/* Continue Submit Button */
.continue-submit-btn {
    background: #2196F3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.continue-submit-btn:hover {
    background: #1976D2;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.continue-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.continue-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

/* Continue Ask Textarea */
.continue-ask-section textarea {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #374151;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 80px;
}

.continue-ask-section textarea:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    outline: none;
}

.dark-mode .continue-ask-section textarea {
    background: #1a1a1a;
    border-color: #444;
    color: #f9fafb;
}

.dark-mode .continue-ask-section textarea:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

/* Continue Ask Label */
.continue-ask-section label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.dark-mode .continue-ask-section label {
    color: #f9fafb;
}

/* Continue Ask Help Text */
.continue-ask-section .help-text {
    font-size: 14px;
    color: #6b7280;
    margin-top: 5px;
    line-height: 1.4;
}

.dark-mode .continue-ask-section .help-text {
    color: #9ca3af;
}

/* Character Counter for Continue Ask */
.continue-ask-section .char-counter {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    margin-top: 5px;
}

.dark-mode .continue-ask-section .char-counter {
    color: #9ca3af;
}

/* Responsive Design for Continue Ask */
@media (max-width: 768px) {
    .continue-ask-section {
        padding: 15px;
        margin-top: 20px;
    }
    
    .continue-reading-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .continue-submit-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* Animation for Continue Ask Section */
.continue-ask-section {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus states for accessibility */
.continue-reading-btn:focus-visible,
.continue-submit-btn:focus-visible {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* Continue Message Styling */
.continue-message {
    margin-top: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    animation: slideInUp 0.5s ease-out;
}

.continue-message h3 {
    color: #999999;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.continue-question {
    background: rgba(102, 126, 234, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 3px solid #888888;
}

.continue-question strong {
    color: #cccccc;
    font-weight: 600;
}

.continue-message .result-text {
    line-height: 1.6;
    color: #333;
}

/* Dark mode for continue message */
.dark-mode .continue-message {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #606060;
}

.dark-mode .continue-message h3 {
    color: #606060;
}

.dark-mode .continue-question {
    background: rgba(139, 156, 255, 0.15);
    border-left-color: #606060;
    ;
}

.dark-mode .continue-question strong {
    color: #444445;
}

.dark-mode .continue-message .result-text {
    color: #e0e0e0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .continue-ask-section {
        border: 2px solid;
    }
    
    .continue-reading-btn,
    .continue-submit-btn {
        border: 2px solid;
    }
    
    .continue-message {
        border: 2px solid;
    }
}

/* Message wrapper styling for continue messages */
.message-wrapper {
    max-width: 630px;
    margin: 0 auto;
}

/* ======================================== */
/* Background Style Implementations */
/* ======================================== */

.zero-card-container .zero-card-form .main-require-form{
	transform:translatex(0px) translatey(0px);
	background-color:#f9f9f9;
	border-top-left-radius:14px;
	border-top-right-radius:14px;
	border-bottom-left-radius:14px;
	border-bottom-right-radius:14px;
	box-shadow:0px 3px 14px 3px #e0e0e0;
	border-style:solid;
	border-width:1px;
	border-color:#ededed;
}
.dark-mode .zero-card-container .zero-card-form .main-require-form{
	background-color:#282828 !important;
	box-shadow:0px 3px 14px 3px #545454 !important;
	border-style:solid;
	border-width:1px;
	border-color:#494949 !important;
}
.zero-card-container .zero-card-form .dont-require-form{
	background-color:#f9fafb;
	border-style:solid;
	border-width:1px;
	border-color:#f3f4f6;
}

.dark-mode .zero-card-container .zero-card-form .dont-require-form{
	background-color:#1d1d1d;
	border-style:solid;
	border-width:1px;
	border-color:#1c1c1c;
	
}

/* Zero card container */
#content .zero-card-container{
	background-color:transparent;
}

/* Form Division */
#content form{
	background-color:transparent;
	
}
/* Minimal Background Style */
#content[data-background-style="minimal"] {
    background-color: #ffffff;
}

.dark-mode #content[data-background-style="minimal"] {
    background-color: #1a1a1a;
}

/* Celestial Background Style */
#content[data-background-style="celestial"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="10" cy="10" r="1" fill="rgba(100,100,200,0.25)"/><circle cx="30" cy="30" r="0.5" fill="rgba(120,100,220,0.2)"/><circle cx="40" cy="15" r="0.8" fill="rgba(90,80,180,0.22)"/><circle cx="15" cy="40" r="0.7" fill="rgba(110,90,190,0.21)"/></svg>');
    background-color: #ffffff;
}

.dark-mode #content[data-background-style="celestial"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="10" cy="10" r="1" fill="rgba(200,200,255,0.15)"/><circle cx="30" cy="30" r="0.5" fill="rgba(200,200,255,0.1)"/><circle cx="40" cy="15" r="0.8" fill="rgba(220,180,255,0.12)"/><circle cx="15" cy="40" r="0.7" fill="rgba(180,180,255,0.11)"/></svg>');
    background-color: #1a1a1a;
}

/* Mystic Background Style */
#content[data-background-style="mystic"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="rgba(160,160,200,0.2)"/><path d="M30 5 L30 15 M30 45 L30 55 M5 30 L15 30 M45 30 L55 30 M12 12 L19 19 M41 41 L48 48 M12 48 L19 41 M41 19 L48 12" stroke="rgba(120,120,180,0.15)" stroke-width="1" stroke-linecap="round"/><path d="M34 30 C34 32.2 32.2 34 30 34 C27.8 34 26 32.2 26 30 C26 27.8 27.8 26 30 26 C30.5 26 31 26.1 31.5 26.3 C30.6 27 30 28 30 29.2 C30 31 31.4 32.4 33.2 32.4 C33.5 32.4 33.8 32.3 34 32.2 C34 31.5 34 30.7 34 30 Z" fill="rgba(140,140,220,0.25)"/></svg>');
    background-color: #ffffff;
}

.dark-mode #content[data-background-style="mystic"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="rgba(200,200,255,0.3)"/><path d="M30 5 L30 15 M30 45 L30 55 M5 30 L15 30 M45 30 L55 30 M12 12 L19 19 M41 41 L48 48 M12 48 L19 41 M41 19 L48 12" stroke="rgba(180,180,255,0.25)" stroke-width="1" stroke-linecap="round"/><path d="M34 30 C34 32.2 32.2 34 30 34 C27.8 34 26 32.2 26 30 C26 27.8 27.8 26 30 26 C30.5 26 31 26.1 31.5 26.3 C30.6 27 30 28 30 29.2 C30 31 31.4 32.4 33.2 32.4 C33.5 32.4 33.8 32.3 34 32.2 C34 31.5 34 30.7 34 30 Z" fill="rgba(200,200,255,0.35)"/></svg>');
    background-color: #1a1a1a;
}

/* Vintage Background Style */
#content[data-background-style="vintage"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><line x1="0" y1="10" x2="20" y2="10" stroke="rgba(160,160,160,0.2)" stroke-width="1"/><line x1="10" y1="0" x2="10" y2="20" stroke="rgba(160,160,160,0.2)" stroke-width="1"/></svg>');
    background-color: #ffffff;
}

.dark-mode #content[data-background-style="vintage"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><line x1="0" y1="10" x2="20" y2="10" stroke="rgba(200,180,160,0.15)" stroke-width="1"/><line x1="10" y1="0" x2="10" y2="20" stroke="rgba(200,180,160,0.15)" stroke-width="1"/></svg>');
    background-color: #1a1a1a;
}

/* Nature Background Style */
#content[data-background-style="nature"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(100,170,120,0.2)" transform="rotate(10 20 20)"/><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(80,160,100,0.15)" transform="translate(15 10) scale(0.7) rotate(-25 20 20)"/></svg>');
    background-color: #ffffff;
}

.dark-mode #content[data-background-style="nature"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(140,200,140,0.12)" transform="rotate(10 20 20)"/><path d="M20 5 C 10 15, 10 25, 20 35 C 30 25, 30 15, 20 5 Z" fill="rgba(160,210,160,0.1)" transform="translate(15 10) scale(0.7) rotate(-25 20 20)"/></svg>');
    background-color: #1a1a1a;
}