/* ============================================
   برجك الصيني – Arabic Chinese Zodiac CSS
   v1.0.0 — fully scoped under .acs-wrapper
   ============================================ */

.acs-wrapper {
    --acs-bg:           #0d0d1a;
    --acs-card:         #16162a;
    --acs-card2:        #1e1e35;
    --acs-border:       #2e2e55;
    --acs-gold:         #c9a84c;
    --acs-gold-light:   #e8c87a;
    --acs-red-cn:       #c0392b;
    --acs-red-light:    #e74c3c;
    --acs-purple:       #7c5cbf;
    --acs-purple-light: #a07de0;
    --acs-text:         #e8e8f0;
    --acs-muted:        #8888aa;
    --acs-accent:       #4fc3f7;
    --acs-green:        #66bb6a;
    --acs-red:          #ef5350;
    --acs-font:         'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;

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

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

/* ── Form ── */
.acs-wrapper .acs-form-container {
    background: var(--acs-card); border-radius: 14px;
    padding: 1.8rem; border: 1px solid var(--acs-border);
}
.acs-wrapper .acs-form-grid   { display: flex; flex-direction: column; gap: 1.4rem; }
.acs-wrapper .acs-label       { display: block; font-weight: 700; color: var(--acs-gold); margin-bottom: .6rem; font-size: .95rem; }
.acs-wrapper .acs-select-wrap { display: flex; flex-direction: column; gap: .2rem; }
.acs-wrapper .acs-select {
    background: var(--acs-card2); border: 1px solid var(--acs-border);
    border-radius: 8px; color: var(--acs-text);
    padding: .6rem .8rem; font-family: var(--acs-font); font-size: 1rem;
    width: 100%; cursor: pointer; transition: border-color .2s;
}
.acs-wrapper .acs-select:focus { outline: none; border-color: var(--acs-red-cn); }
.acs-wrapper .acs-gender-row  { display: flex; gap: 1rem; }
.acs-wrapper .acs-gender-btn  {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--acs-card2); border: 2px solid var(--acs-border);
    border-radius: 10px; padding: .7rem; cursor: pointer;
    font-weight: 700; font-size: .95rem; color: var(--acs-text); transition: all .2s;
}
.acs-wrapper .acs-gender-btn input[type="radio"] { display: none; }
.acs-wrapper .acs-gender-btn:has(input:checked)  { border-color: var(--acs-gold); background: rgba(201,168,76,.1); color: var(--acs-gold-light); }
.acs-wrapper .acs-gender-btn:hover { border-color: var(--acs-red-cn); }

/* ── Submit button ── */
.acs-wrapper .acs-btn-main {
    width: 100%; margin-top: 1.5rem; padding: .9rem;
    background: linear-gradient(135deg, #c0392b, #922b21);
    color: #fff; font-family: var(--acs-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;
}
.acs-wrapper .acs-btn-main:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(192,57,43,.5); }

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

/* ── Hero card ── */
.acs-wrapper .acs-hero {
    background: linear-gradient(135deg, #1a0505, #1a0a1a);
    border: 2px solid var(--acs-red-cn);
    border-radius: 16px; padding: 2rem 1.5rem;
    text-align: center; margin-bottom: 1.5rem;
    box-shadow: 0 4px 30px rgba(192,57,43,.25);
}
.acs-wrapper .acs-hero-emoji   { font-size: 5rem; display: block; margin-bottom: .6rem; }
.acs-wrapper .acs-hero-year    { font-size: .85rem; color: var(--acs-muted); }
.acs-wrapper .acs-hero-name    { font-size: 2.8rem; font-weight: 900; color: var(--acs-gold); display: block; margin: .3rem 0; }
.acs-wrapper .acs-hero-sub     { font-size: .9rem; color: var(--acs-purple-light); }
.acs-wrapper .acs-hero-badges  { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.acs-wrapper .acs-hero-badge   {
    background: rgba(201,168,76,.12); border: 1px solid var(--acs-gold);
    border-radius: 20px; padding: .3rem .9rem; font-size: .8rem; font-weight: 700; color: var(--acs-gold-light);
}

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

/* ── Cards ── */
.acs-wrapper .acs-card {
    background: var(--acs-card); border: 1px solid var(--acs-border);
    border-radius: 14px; padding: 1.3rem; margin-bottom: 1rem; line-height: 1.85; font-size: .93rem;
}
.acs-wrapper .acs-card h3 { color: var(--acs-gold); font-size: .95rem; margin: 0 0 .7rem; font-weight: 900; }
.acs-wrapper .acs-card p  { margin: 0 0 .5rem; }
.acs-wrapper .acs-card.acs-green  { border-color: var(--acs-green); }
.acs-wrapper .acs-card.acs-red    { border-color: var(--acs-red); }

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

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

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

/* ── Lucky grid ── */
.acs-wrapper .acs-lucky-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    gap: .8rem; margin-bottom: 1rem;
}
.acs-wrapper .acs-lucky-item {
    background: var(--acs-card); border: 1px solid var(--acs-gold);
    border-radius: 10px; padding: .9rem; text-align: center;
}
.acs-wrapper .acs-lucky-item .li-icon  { font-size: 1.6rem; display: block; }
.acs-wrapper .acs-lucky-item .li-label { font-size: .7rem; color: var(--acs-muted); display: block; margin-top: .2rem; }
.acs-wrapper .acs-lucky-item .li-val   { font-size: .85rem; font-weight: 700; color: var(--acs-gold-light); display: block; margin-top: .2rem; }

/* ── Action row ── */
.acs-wrapper .acs-footer-note { text-align: center; margin: 1rem 0 .5rem; font-size: .75rem; color: var(--acs-muted); }
.acs-wrapper .acs-footer-note a { color: var(--acs-purple-light); text-decoration: none; }
.acs-wrapper .acs-action-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.acs-wrapper .acs-btn-pdf {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d); color: #fff;
    font-family: var(--acs-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;
}
.acs-wrapper .acs-btn-pdf:hover   { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(185,28,28,.4); }
.acs-wrapper .acs-btn-pdf:disabled{ opacity: .6; cursor: wait; transform: none; }
.acs-wrapper .acs-btn-reset {
    background: transparent; border: 1px solid var(--acs-border);
    color: var(--acs-muted); font-family: var(--acs-font);
    padding: .55rem 1.5rem; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: .9rem;
}
.acs-wrapper .acs-btn-reset:hover { border-color: var(--acs-red-cn); color: var(--acs-text); }

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