body {
            font-family: 'Noto Sans Tamil', 'Inter', sans-serif;
            background-color: #0a0a2a;
            color: #e0e0e0;
            background-image: radial-gradient(#2a2a4a 1px, transparent 1px);
            background-size: 20px 20px;
        }
        .chart-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            border: 2px solid #a855f7;
            width: min(90vw, 320px);
            height: min(90vw, 320px);
            margin: 1.5rem auto;
            background-color: #1a1a3a;
        }
		.chart-wrapper {
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 1.5rem;
        }
        .chart-box {
            border: 1px solid #4a4a6a;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 0.9rem;
            line-height: 1.3;
            padding: 4px;
            position: relative;
        }
        .chart-box .sign-name {
            position: absolute;
            top: 2px;
            left: 4px;
            font-size: 0.65rem;
            color: #a0a0c0;
        }
        /* Grid layout for South Indian chart */
        .box-1 { grid-area: 1 / 2 / 2 / 3; }
        .box-2 { grid-area: 1 / 3 / 2 / 4; }
        .box-3 { grid-area: 1 / 4 / 2 / 5; }
        .box-4 { grid-area: 2 / 4 / 3 / 5; }
        .box-5 { grid-area: 3 / 4 / 4 / 5; }
        .box-6 { grid-area: 4 / 4 / 5 / 5; }
        .box-7 { grid-area: 4 / 3 / 5 / 4; }
        .box-8 { grid-area: 4 / 2 / 5 / 3; }
        .box-9 { grid-area: 4 / 1 / 5 / 2; }
        .box-10 { grid-area: 3 / 1 / 4 / 2; }
        .box-11 { grid-area: 2 / 1 / 3 / 2; }
        .box-0 { grid-area: 1 / 1 / 2 / 2; }
        .chart-center {
            grid-area: 2 / 2 / 4 / 4;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 1.5rem;
            color: #a855f7;
            border: 1px solid #4a4a6a;
			/* ✅ make text and box scale */
            padding: 0.3rem 0.8rem;                   /* auto-adjusts width */
            font-size: clamp(1rem, 4vw, 1.5rem);      /* responsive text size */
            text-align: center;
            border-radius: 0.4rem;                    /* optional rounded look */
            white-space: nowrap; 
        }
        .form-input, .form-select, .form-textarea {
            background-color: #1a1a3a;
            border: 1px solid #4a4a6a;
            color: #e0e0e0;
        }
        .btn-generate {
            background-color: #a855f7;
            color: white;
            transition: background-color 0.3s;
        }
        .btn-generate:hover {
            background-color: #9333ea;
        }
        .btn-generate:disabled {
            background-color: #581c87;
            cursor: not-allowed;
        }
        .card {
            background-color: rgba(10, 10, 42, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid #4a4a6a;
        }
        .asc-marker {
            font-weight: bold;
            color: #facc15;
        }
        .input-group {
            grid-column: span 1;
        }
        .input-group-full {
            grid-column: span 3;
        }
        @media (min-width: 768px) {
            .input-group-md-2 {
                grid-column: span 2;
            }
        }
		/* Change font color for all dropdowns inside dob-wrapper */
           #dob-wrapper select {
           color: #ffffff;
           font-weight: 500; /* optional: make text a bit bold */
         }
        
		/* loading icon*/
		 .loader {
             border: 4px solid #f3f3f3; /* Light grey */
             border-top: 4px solid #3498db; /* Blue */
             border-radius: 50%;
             width: 20px;
             height: 20px;
             animation: spin 1s linear infinite;
  
         /* The loader is hidden by default */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
          }

          /* This class will be added by JavaScript to show the loader */
         .loader.is-loading {
            opacity: 1;
            visibility: visible;
         }

      @keyframes spin {
         0% {
         transform: rotate(0deg);
          }
           100% {
         transform: rotate(360deg);
         }
        }
        
        /* Autocomplete styles */
        .autocomplete-container {
            position: relative;
        }
        .autocomplete-results {
            position: absolute;
            z-index: 10;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            background-color: #1a1a3a;
            border: 1px solid #4a4a6a;
        }
        .autocomplete-item {
            padding: 0.5rem;
            cursor: pointer;
        }
        .autocomplete-item:hover {
            background-color: #2d2d4d;
        }
        .autocomplete-hidden {
            display: none;
        }

       /* --- STYLES FOR PRINTING (Updated) --- */
@media print {
    /* --- General Setup --- */
    body {
        background: none !important;
        color: #000 !important;
        font-size: 9pt; /* Smaller font for A4 */
        -webkit-print-color-adjust: exact;
    }
    main, .max-w-6xl { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

    /* --- Hide Unwanted Elements --- */
    header, #form-section, #print-btn-container { display: none !important; }
    #dasa-table { display: none !important; } /* Hides Dasa sequence table */
    #dasa { display: none !important; }
	#panchangam { display: none !important; }
    /* --- Card & Title Styling --- */
    .card {
        background: transparent !important;
        border: 1px solid #bbb !important;
        box-shadow: none !important;
        padding: 0.5rem !important;
        margin: 0 0 0.5rem 0 !important;
        page-break-inside: avoid;
        backdrop-filter: none !important;
    }
    .card h3 {
        font-size: 11pt;
        font-weight: bold;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        text-decoration: underline;
        color: #000 !important;
    }

    /* --- Top Section Layout --- */
    #personal-info-display {
        grid-template-columns: repeat(3, 1fr) !important; /* Compact 3-column layout */
        gap: 0.2rem 1rem !important;
        font-size: 10pt;
    }
    #birth-astrology-summary {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 0rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 0.5rem !important;
    }
    #panchangam-card .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* --- Chart Layout (Corrected) --- */
    .grid.lg\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* KEY FIX: Changed to 2 columns */
        gap: 0rem !important;
    }
    .chart-grid {
        width: 360px !important; /* Resized to fit side-by-side */
        height: 360px !important;
        margin: 0.5rem auto !important;
        border-color: #000 !important;
    }
    .chart-box { font-size: 1rem; background: white; transparent border-color: #999 !important; }
    .chart-center { border-color: #999 !important; background: white; color: #000 !important; }
    .chart-box .sign-name { color: #555 !important; }
    
    /* --- Table & Color Styling --- */
    #planets-table-card table { font-size: 8pt; }
    th, td { padding: 2px !important; }
    thead { border-color: #000 !important; }
    .text-yellow-300, .text-gray-300, .asc-marker { color: #000 !important; }
    .asc-marker { font-weight: bold; text-decoration: underline; }
    #dasa-card h3 { display: none; }
    #dasa-balance-info { text-align: center !important; font-weight: bold; font-size: 10pt; }
    
    @page {
        size: A4;
        margin: 0;
    }
}
/* pdf-mode.css */

.pdf-mode{
    /* --- General Setup --- */
    body {
        background: none !important;
        color: #000 !important;
        font-size: 9pt; /* Smaller font for A4 */
        -webkit-print-color-adjust: exact;
    }
    main, .max-w-6xl { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
         #capture-area {
    width: 814px !important;    /* A4 width in px */
    min-height: 1123px !important; /* A4 height */
    margin: 0 auto !important;  /* center horizontally */
    padding: 20px !important;   /* small breathing room */
    box-sizing: border-box;
}

    
    .text-gray-300 {
    color: #000 !important;
}
    /* --- Hide Unwanted Elements --- */
    header, #form-section, #print-btn-container { display: none !important; }
    #dasa-table { display: none !important; } /* Hides Dasa sequence table */
    #dasa { display: none !important; }
	#panchangam { display: none !important; }
    /* --- Card & Title Styling --- */
    .card {
        background: transparent !important;
        border: 1px solid #bbb !important;
        box-shadow: none !important;
        padding: 0.5rem !important;
        margin: 0 0 0.5rem 0 !important;
        page-break-inside: avoid;
        backdrop-filter: none !important;
    }
    .card h3 {
        font-size: 11pt;
        font-weight: bold;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        text-decoration: underline;
        color: #000 !important;
    }

    /* --- Top Section Layout --- */
    #personal-info-display {
        grid-template-columns: repeat(3, 1fr) !important; /* Compact 3-column layout */
        gap: 0.2rem 1rem !important;
        font-size: 10pt;
    }
    #birth-astrology-summary {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 0.5rem !important;
    }
    #panchangam-card .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* --- Chart Layout (Corrected) --- */
    .grid.lg\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* KEY FIX: Changed to 2 columns */
        gap: 0rem !important;
    }
    .chart-grid {
        width: 300px !important; /* Resized to fit side-by-side */
        height: 300px !important;
        margin: 0.5rem auto !important;
        border-color: #000 !important;
    }
    .chart-box { font-size: 1rem; background: white; transparent border-color: #999 !important; }
    .chart-center { border-color: #999 !important; background: white; color: #000 !important; }
    .chart-box .sign-name { color: #555 !important; }
    
    /* --- Table & Color Styling --- */
    #planets-table-card table { font-size: 8pt; }
    th, td { padding: 2px !important; }
    thead { border-color: #000 !important; }
    .text-yellow-300, .text-gray-800, .asc-marker { color: #000 !important; }
    .asc-marker { font-weight: bold; text-decoration: underline; }
    #dasa-card h3 { display: none; }
    #dasa-balance-info { text-align: center !important; font-weight: bold; font-size: 10pt; }
    
    @page {
        size: A4;
        margin: 0;
    }
}