/**
 * Birth Chart Calculator — Stylesheet
 * Plugin:  Birth Chart Calculator v2.0.0
 * Theme:   Cosmic dark
 *   --cosmic-black  #0b0b0f   page / input background
 *   --section-dark  #14141c   card / form background
 *   --solar-gold    #f4c430   headings, labels, buttons
 *   --lunar-white   #f2f2f2   body text
 *   --agni-orange   #ff6b00   hover glow, focus ring
 *   --divine-red    #e63946   ascendant / highlight rows
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

/* ═══════════════════════════════════════════════
   VARIABLES
════════════════════════════════════════════════ */
:root {
    --cosmic-black : #0b0b0f;
    --section-dark : #14141c;
    --solar-gold   : #f4c430;
    --lunar-white  : #f2f2f2;
    --agni-orange  : #ff6b00;
    --divine-red   : #e63946;

    /* Derived tokens */
    --gold-border  : rgba(244,196, 48, 0.28);
    --gold-dim     : rgba(244,196, 48, 0.08);
    --divider      : rgba(244,196, 48, 0.12);
    --row-alt      : rgba(255,255,255, 0.03);
    --focus-ring   : rgba(255,107,  0, 0.22);
    --red-row-bg   : rgba(230, 57, 70, 0.10);
}

/* ═══════════════════════════════════════════════
   GLOBAL RESETS (scoped to plugin container)
════════════════════════════════════════════════ */
.birth-chart-container *,
.birth-chart-container *::before,
.birth-chart-container *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   PAGE CONTAINER
════════════════════════════════════════════════ */
.birth-chart-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
    font-family: 'Lato', sans-serif;
    color: var(--lunar-white);
}

/* ═══════════════════════════════════════════════
   HEADING
════════════════════════════════════════════════ */
.birth-chart-heading {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--solar-gold);
}

.birth-chart-heading h2 {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--solar-gold);
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

.birth-chart-heading p {
    font-size: 13px;
    color: rgba(242,242,242,0.55);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════
   FORM CARD
════════════════════════════════════════════════ */
.birth-chart-form {
    background: var(--section-dark);
    padding: 28px 30px;
    border-radius: 10px;
    border: 1px solid var(--gold-border);
    box-shadow: 0 4px 28px rgba(0,0,0,0.55);
}

/* ── Field group ── */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ── Labels ── */
.form-group > label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--solar-gold);
    margin-bottom: 8px;
}

.required {
    color: var(--divine-red);
    margin-left: 2px;
}

.label-note {
    font-weight: 400;
    font-size: 11px;
    color: rgba(244,196,48,0.55);
    text-transform: none;
    letter-spacing: 0.01em;
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(242,242,242,0.38);
}

/* ─────────────────────────────────────────────
   INPUTS, SELECTS, DATE, TIME  (shared styles)
───────────────────────────────────────────── */
.form-control {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--cosmic-black);
    color: var(--lunar-white);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control::placeholder {
    color: rgba(242,242,242,0.30);
}

.form-control:hover {
    border-color: rgba(244,196,48,0.50);
}

.form-control:focus {
    outline: none;
    border-color: var(--agni-orange);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Select arrow (gold chevron) ── */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4c430' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 11px;
    padding-right: 36px;
    cursor: pointer;
}

select.form-control option {
    background: var(--cosmic-black);
    color: var(--lunar-white);
}

/* ── Native date & time pickers ── */
input[type="date"].form-control,
input[type="time"].form-control {
    appearance: none;
    /* WebKit: tint the calendar / clock icon gold */
    color-scheme: dark;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(75%) sepia(60%) saturate(500%) hue-rotate(5deg);
    cursor: pointer;
    opacity: 0.80;
    padding-left: 4px;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ── Radio buttons ── */
.radio-group {
    display: flex;
    gap: 24px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--lunar-white);
    user-select: none;
}

.radio-label input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--solar-gold);
    cursor: pointer;
    margin: 0;
}

/* ── Submit button ── */
.btn-submit {
    display: block;
    width: 100%;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--solar-gold) 0%, var(--agni-orange) 100%);
    color: var(--cosmic-black);
    border: none;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.25s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(255,107,0,0.30);
}

.btn-submit:hover {
    background: linear-gradient(135deg, var(--agni-orange) 0%, var(--divine-red) 100%);
    color: #ffffff;
    box-shadow: 0 6px 22px rgba(255,107,0,0.45);
    transform: translateY(-2px);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255,107,0,0.30);
}

.btn-submit:disabled {
    background: rgba(244,196,48,0.20);
    color: rgba(242,242,242,0.35);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ═══════════════════════════════════════════════
   LOADING INDICATOR
════════════════════════════════════════════════ */
#loadingIndicator {
    text-align: center;
    padding: 28px 0 10px;
    color: var(--solar-gold);
    font-size: 13px;
    letter-spacing: 0.05em;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(244,196,48,0.20);
    border-top-color: var(--solar-gold);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════
   ERROR MESSAGE
════════════════════════════════════════════════ */
#errorMessage {
    background: rgba(230,57,70,0.10);
    border: 1px solid rgba(230,57,70,0.45);
    color: #ff8a8a;
    border-radius: 6px;
    padding: 11px 16px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   RESULTS WRAPPER
════════════════════════════════════════════════ */
#birthChartResults {
    margin-top: 32px;
    max-width: 1200px;
}

/* ─────────────────────────────────────────────
   RESULT CARDS — 2-column grid on desktop
───────────────────────────────────────────── */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Full-width card wrapper (planets, houses) */
.result-full {
    margin-bottom: 14px;
}

/* Shared card shell */
.result-card {
    background: var(--section-dark);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.40);
}

/* Card title bar */
.card-title {
    font-family: 'Cinzel', serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--solar-gold);
    padding: 11px 16px;
    background: var(--gold-dim);
    border-bottom: 1px solid var(--gold-border);
}

/* Horizontal scroll wrapper for wide tables on small screens */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────
   KV TABLE  (label : value pairs)
───────────────────────────────────────────── */
.kv-table {
    width: 100%;
    border-collapse: collapse;
}

.kv-table tbody tr {
    border-bottom: 1px solid var(--divider);
    transition: background 0.14s;
}

.kv-table tbody tr:last-child { border-bottom: none; }

.kv-table tbody tr:nth-child(even) { background: var(--row-alt); }

.kv-table tbody tr:hover { background: var(--gold-dim); }

.kv-label {
    padding: 8px 14px;
    width: 46%;
    font-size: 12px;
    font-weight: 700;
    color: var(--solar-gold);
    opacity: 0.90;
    white-space: nowrap;
    vertical-align: top;
}

.kv-value {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--lunar-white);
    opacity: 0.88;
    word-break: break-word;
}

/* ─────────────────────────────────────────────
   DATA TABLES  (planets, houses)
───────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead tr {
    background: rgba(244,196,48,0.12);
}

.data-table th {
    padding: 10px 14px;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--solar-gold);
    border-bottom: 1px solid var(--gold-border);
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--divider);
    transition: background 0.14s;
}

.data-table tbody tr:last-child  { border-bottom: none; }
/*.data-table tbody tr:nth-child(even) { background: var(--row-alt); }*/
.data-table tbody tr:hover       { background: var(--gold-dim); 
}


.data-table td {
    padding: 9px 14px;
    color: var(--lunar-white);
    background:#fafaf5
    opacity: 0.88;
}

/* ── Ascendant / Lagna highlight ── */
.ascendant-row td {
    color: var(--divine-red) !important;
    background: var(--red-row-bg) !important;
    font-weight: 700;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════
   GOOGLE PLACES AUTOCOMPLETE DROPDOWN
════════════════════════════════════════════════ */
.pac-container {
    background: var(--section-dark);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.65);
    margin-top: 4px;
    font-family: 'Lato', sans-serif;
    z-index: 9999;
}

.pac-item {
    padding: 9px 14px;
    cursor: pointer;
    border-top: 1px solid var(--divider);
    color: var(--lunar-white);
    font-size: 13px;
}

.pac-item:first-child { border-top: none; }

.pac-item:hover,
.pac-item-selected { background: var(--gold-dim); }

.pac-item-query {
    color: var(--solar-gold);
    font-size: 13px;
}

.pac-matched { font-weight: 700; }

.pac-icon { display: none; } /* hide default Google pin icon */

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .birth-chart-container {
        padding: 16px 12px;
    }

    .birth-chart-form {
        padding: 20px 16px;
    }

    /* Stack result cards vertically */
    .results-grid {
        grid-template-columns: 1fr;
    }

    /* Tighten table text */
    .data-table th,
    .data-table td,
    .kv-label,
    .kv-value {
        padding: 7px 10px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .birth-chart-heading h2 {
        font-size: 20px;
    }

    .btn-submit {
        font-size: 13px;
    }
}                    

#pm-wrapper {
  margin-bottom: 14px;
  padding: 10px 0;
}

#pm-select {
  min-width: 180px;
  background: #1a1a2e;
  color: #f0c040;
  border: 1px solid #f0c040;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

#pm-save-btn, #pm-load-btn, #pm-del-btn {
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
}

#pm-save-btn {
  border: 1px solid #f0c040;
  color: #f0c040;
}

#pm-load-btn {
  border: 1px solid #aaa;
  color: #aaa;
}

#pm-del-btn {
  border: 1px solid #cc4444;
  color: #cc4444;
}

#pm-save-btn:hover { background: rgba(240,192,64,0.15); }
#pm-load-btn:hover { background: rgba(255,255,255,0.08); }
#pm-del-btn:hover  { background: rgba(204,68,68,0.15); }

#pm-count {
  font-size: 12px;
  color: #888;
}