/* ==========================================
   البرج الطالع – Arabic Rising Sign CSS
   v1.0.0 — fully scoped under .ars-wrapper
   ========================================== */
.ars-wrapper {
    --ars-bg:           #0d0d1a;
    --ars-card:         #16162a;
    --ars-card2:        #1e1e35;
    --ars-border:       #2e2e55;
    --ars-gold:         #c9a84c;
    --ars-gold-light:   #e8c87a;
    --ars-purple:       #7c5cbf;
    --ars-purple-light: #a07de0;
    --ars-teal:         #0891b2;
    --ars-teal-light:   #22d3ee;
    --ars-text:         #e8e8f0;
    --ars-muted:        #8888aa;
    --ars-green:        #66bb6a;
    --ars-red:          #ef5350;
    --ars-font:         'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;

    font-family: var(--ars-font);
    direction: rtl;
    background: var(--ars-bg);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    max-width: 780px;
    margin: 2rem auto;
    border: 1px solid var(--ars-border);
    box-shadow: 0 8px 40px rgba(8,145,178,.2), 0 4px 20px rgba(124,92,191,.15);
    color: var(--ars-text);
    box-sizing: border-box;
}
.ars-wrapper *, .ars-wrapper *::before, .ars-wrapper *::after { box-sizing: border-box; }

/* ── Header ── */
.ars-wrapper .ars-header   { text-align: center; margin-bottom: 2rem; }
.ars-wrapper .ars-icon     { font-size: 3rem; display: block; animation: ars-float 4s ease-in-out infinite; }
@keyframes ars-float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.ars-wrapper .ars-title    {
    font-size: 2rem; font-weight: 900; margin: .4rem 0;
    background: linear-gradient(135deg, var(--ars-teal-light), var(--ars-purple-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ars-wrapper .ars-subtitle { color: var(--ars-muted); font-size: .9rem; }

/* ── Form ── */
.ars-wrapper .ars-form-container { background: var(--ars-card); border-radius: 14px; padding: 1.8rem; border: 1px solid var(--ars-border); }
.ars-wrapper .ars-form-grid      { display: flex; flex-direction: column; gap: 1.4rem; }
.ars-wrapper .ars-label          { display: block; font-weight: 700; color: var(--ars-gold); margin-bottom: .6rem; font-size: .95rem; }
.ars-wrapper .ars-required       { background: rgba(239,83,80,.15); color: var(--ars-red); border: 1px solid var(--ars-red); border-radius: 12px; padding: 1px 8px; font-size: .72rem; font-weight: 700; margin-right: .4rem; }
.ars-wrapper .ars-hint           { color: var(--ars-red); font-size: .78rem; margin-top: .4rem; }

.ars-wrapper .ars-date-row, .ars-wrapper .ars-time-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.ars-wrapper .ars-select-wrap  { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 80px; }
.ars-wrapper .ars-select-label { font-size: .72rem; color: var(--ars-muted); text-align: center; }
.ars-wrapper .ars-select, .ars-wrapper .ars-input {
    background: var(--ars-card2); border: 1px solid var(--ars-border); border-radius: 8px;
    color: var(--ars-text); padding: .55rem .7rem; font-family: var(--ars-font); font-size: .9rem;
    width: 100%; cursor: pointer; transition: border-color .2s;
}
.ars-wrapper .ars-city-sel      { font-size: .88rem; }
.ars-wrapper .ars-select:focus, .ars-wrapper .ars-input:focus { outline: none; border-color: var(--ars-teal); }
.ars-wrapper .ars-input::placeholder { color: var(--ars-muted); }

.ars-wrapper .ars-coords-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.ars-wrapper .ars-input-wrap { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 90px; }

.ars-wrapper .ars-gender-row { display: flex; gap: 1rem; }
.ars-wrapper .ars-gender-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--ars-card2); border: 2px solid var(--ars-border); border-radius: 10px;
    padding: .7rem; cursor: pointer; font-weight: 700; font-size: .95rem;
    color: var(--ars-text) !important; transition: all .2s;
}
.ars-wrapper .ars-gender-btn input[type="radio"] { display: none; }
.ars-wrapper .ars-gender-btn:has(input:checked)  { border-color: var(--ars-gold); background: rgba(201,168,76,.18); color: var(--ars-gold-light) !important; }
.ars-wrapper .ars-gender-btn:hover { border-color: var(--ars-teal); }

/* ── Submit ── */
.ars-wrapper .ars-btn-main {
    width: 100%; margin-top: 1.5rem; padding: .9rem;
    background: linear-gradient(135deg, var(--ars-teal), #065f7a);
    color: #fff !important; font-family: var(--ars-font); font-size: 1.1rem; font-weight: 900;
    border: none; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .6rem; transition: all .25s;
    -webkit-text-fill-color: #fff !important;
}
.ars-wrapper .ars-btn-main:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(8,145,178,.5); }

/* ── Loading ── */
.ars-wrapper .ars-loading { text-align: center; padding: 2rem; color: var(--ars-muted); }
.ars-wrapper .ars-spinner {
    width: 44px; height: 44px; border: 4px solid var(--ars-border); border-top-color: var(--ars-teal);
    border-radius: 50%; animation: ars-spin .8s linear infinite; margin: 0 auto 1rem;
}
@keyframes ars-spin { to { transform: rotate(360deg); } }

/* ── Hero ── */
.ars-wrapper .ars-hero {
    background: linear-gradient(135deg, #020d14, #0d1a2a);
    border: 2px solid var(--ars-teal); border-radius: 16px;
    padding: 2rem 1.5rem; text-align: center; margin-bottom: 1.5rem;
    box-shadow: 0 4px 30px rgba(8,145,178,.3);
}
.ars-wrapper .ars-hero-emoji  { font-size: 4.5rem; display: block; margin-bottom: .5rem; }
.ars-wrapper .ars-hero-label  { font-size: .8rem; color: var(--ars-muted); display: block; }
.ars-wrapper .ars-hero-name   { font-size: 2.6rem; font-weight: 900; color: var(--ars-teal-light); display: block; margin: .2rem 0; }
.ars-wrapper .ars-hero-degree { font-size: .95rem; color: var(--ars-gold); font-weight: 700; display: block; margin-bottom: .8rem; }
.ars-wrapper .ars-hero-badges { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ars-wrapper .ars-hero-badge  {
    background: rgba(34,211,238,.1); border: 1px solid var(--ars-teal);
    border-radius: 20px; padding: .3rem .9rem; font-size: .8rem; font-weight: 700; color: var(--ars-teal-light);
}
.ars-wrapper .ars-hero-badge.gold { background: rgba(201,168,76,.1); border-color: var(--ars-gold); color: var(--ars-gold-light); }

/* ── Tabs ── */
.ars-wrapper .ars-tabs {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 1rem; border-bottom: 1px solid var(--ars-border); padding-bottom: .5rem;
}
.ars-wrapper .ars-tab {
    background: var(--ars-card2); border: 1px solid var(--ars-border); border-radius: 8px;
    color: var(--ars-muted); padding: .45rem .85rem; font-family: var(--ars-font);
    font-size: .82rem; cursor: pointer; font-weight: 700; transition: all .2s;
}
.ars-wrapper .ars-tab.active, .ars-wrapper .ars-tab:hover { background: var(--ars-teal); border-color: var(--ars-teal); color: #fff !important; -webkit-text-fill-color: #fff !important; }
.ars-wrapper .ars-tab-content        { display: none; }
.ars-wrapper .ars-tab-content.active { display: block; }

/* ── Cards ── */
.ars-wrapper .ars-card { background: var(--ars-card); border: 1px solid var(--ars-border); border-radius: 14px; padding: 1.3rem; margin-bottom: 1rem; line-height: 1.85; font-size: .93rem; }
.ars-wrapper .ars-card h3 { color: var(--ars-gold); font-size: .95rem; margin: 0 0 .7rem; font-weight: 900; }
.ars-wrapper .ars-card p  { margin: 0 0 .5rem; }
.ars-wrapper .ars-card.ars-green  { border-color: var(--ars-green); }
.ars-wrapper .ars-card.ars-red    { border-color: var(--ars-red);   }
.ars-wrapper .ars-card .ars-data-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--ars-border); font-size: .88rem; }
.ars-wrapper .ars-card .ars-data-row:last-child { border-bottom: none; }
.ars-wrapper .ars-card .ars-data-label { color: var(--ars-muted); }
.ars-wrapper .ars-card .ars-data-val   { color: var(--ars-teal-light); font-weight: 700; }

/* ── Two col ── */
.ars-wrapper .ars-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Traits ── */
.ars-wrapper .ars-traits-row  { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ars-wrapper .ars-trait-badge { background: rgba(8,145,178,.12); border: 1px solid var(--ars-teal); border-radius: 20px; padding: .35rem .9rem; font-size: .82rem; font-weight: 700; color: var(--ars-teal-light); }

/* ── Tags ── */
.ars-wrapper .ars-tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ars-wrapper .ars-tag { border-radius: 20px; padding: .3rem .8rem; font-size: .8rem; font-weight: 700; }
.ars-wrapper .ars-tag.s { background: rgba(102,187,106,.15); color: var(--ars-green); border: 1px solid var(--ars-green); }
.ars-wrapper .ars-tag.w { background: rgba(239,83,80,.15);   color: var(--ars-red);   border: 1px solid var(--ars-red); }

/* ── Footer / actions ── */
.ars-wrapper .ars-footer-note { text-align: center; margin: 1rem 0 .5rem; font-size: .75rem; color: var(--ars-muted); }
.ars-wrapper .ars-footer-note a { color: var(--ars-purple-light); text-decoration: none; }
.ars-wrapper .ars-action-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.ars-wrapper .ars-btn-pdf {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d); color: #fff !important;
    font-family: var(--ars-font); font-size: .95rem; font-weight: 900;
    border: none; border-radius: 8px; padding: .55rem 1.5rem;
    cursor: pointer; display: flex; align-items: center; gap: .4rem; transition: all .2s;
    -webkit-text-fill-color: #fff !important;
}
.ars-wrapper .ars-btn-pdf:hover   { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(185,28,28,.4); }
.ars-wrapper .ars-btn-reset {
    background: var(--ars-card2); border: 1px solid var(--ars-border); color: var(--ars-text) !important;
    font-family: var(--ars-font); padding: .55rem 1.5rem; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: .9rem;
}
.ars-wrapper .ars-btn-reset:hover { border-color: var(--ars-teal); color: var(--ars-teall) !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ars-wrapper { padding: 1.2rem 1rem; }
    .ars-wrapper .ars-title { font-size: 1.5rem; }
    .ars-wrapper .ars-hero-name { font-size: 2rem; }
    .ars-wrapper .ars-two-col { grid-template-columns: 1fr; }
    .ars-wrapper .ars-tab { padding: .4rem .6rem; font-size: .75rem; }
    .ars-wrapper .ars-coords-row { flex-direction: column; }
}