@font-face {
    font-family: 'IRANYekanXNoEn';
    src: url('/fonts/IRANYekanXNoEn-Regular.woff2') format('woff2'), url('/fonts/IRANYekanXNoEn-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
    --bg: #f4f6f8;
    --text: #111;
    --muted: #888;
    --card: #fff;
    --accent: #ffd700;
    --accent2: #ffec70;
    --accent3: #ffe34d;
    --headerText: #000;
    --hoverBg: #fff8dc;
}

body {
    font-family: 'IRANYekanXNoEn', Tahoma, sans-serif;
    background: var(--bg);
    margin: 0;
    padding: 0;
    direction: rtl;
    color: var(--text);
}

.single-plan-container {
    max-width: 800px;
    margin: 100px auto;
    background: var(--card);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 2rem;
}

.single-plan-header {
    text-align: center;
    border-radius: 16px;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    color: var(--headerText);
    background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
}

    .single-plan-header h1 {
        margin: 0;
        font-size: 2rem;
        font-weight: 800;
    }

    .single-plan-header p {
        margin: .75rem 0 0 0;
        font-size: 1rem;
        opacity: .9;
    }

.plan-price-box {
    text-align: center;
    margin: 2rem 0;
}

.price-old {
    font-size: 1.1rem;
    text-decoration: line-through;
    color: var(--muted);
    display: block;
}

.price-current {
    font-size: 2rem;
    font-weight: 800;
    color: #222;
    display: block;
}

.custom-dropdown {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    user-select: none;
}

.dropdown-selected {
    padding: 1rem;
    border: 2px solid var(--accent);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

    .dropdown-selected::after {
        content: "▾";
        font-size: 1.1rem;
        opacity: .8;
    }

.dropdown-options {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    display: none;
    z-index: 10;
    overflow: hidden;
}

    .dropdown-options.active {
        display: block;
    }

.dropdown-option {
    padding: 1rem;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

    .dropdown-option:last-child {
        border-bottom: none;
    }

    .dropdown-option:hover {
        background: var(--hoverBg);
    }

.opt-old {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.opt-new {
    font-weight: 800;
    color: #000;
}

.plan-button {
    font-family: 'IRANYekanXNoEn', Tahoma, sans-serif;
    display: flex; /* 👈 مهم */
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 2rem auto 0 auto; /* 👈 کنترل دقیق فاصله */
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #000;
    transition: transform 0.25s ease, filter 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}


    .plan-button:hover {
        transform: scale(1.03);
        filter: brightness(1.06);
    }

    /* چون plan-button الان <a> شده، حالت‌های لینک رو هم کنترل کنیم */
    .plan-button:visited,
    .plan-button:active {
        color: #000;
    }

    /* فوکوس کیبورد (برای دسترس‌پذیری) */
    .plan-button:focus-visible {
        outline: 3px solid rgba(0,0,0,0.35);
        outline-offset: 3px;
    }

/* ---------------- SPECIFICATIONS (SINGLE PLAN) ---------------- */
.plan-specs {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.specs-title {
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #222;
}

.specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.spec-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.03);
}

    .spec-item .feature-icon {
        font-size: 1.15rem;
        margin-top: .05rem;
        color: var(--accent);
    }

/* Gifts inside SinglePlan */
.plan-gifts {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.7);
}

.gifts-title {
    margin: 0 0 .75rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 800;
}

    .gifts-title i {
        font-size: 1.2rem;
        color: #e91e63;
    }

.gifts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.gift-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: rgba(233,30,99,0.06);
}

    .gift-item i {
        margin-top: .05rem;
        color: #e91e63;
    }

/* THEMES */
.theme-gold {
    --accent: #ffd700;
    --accent2: #ffec70;
    --accent3: #ffe34d;
    --headerText: #000;
    --hoverBg: #fff8dc;
}

.theme-silver {
    --accent: #c0c0c0;
    --accent2: #e7e7e7;
    --accent3: #b9b9b9;
    --headerText: #111;
    --hoverBg: #f5f6f7;
}

.theme-bronze {
    --accent: #cd7f32;
    --accent2: #e3a86a;
    --accent3: #b87333;
    --headerText: #1a0f05;
    --hoverBg: #fff1e6;
}

.theme-diamond {
    --accent: #00c2ff;
    --accent2: #b9f2ff;
    --accent3: #7bd7ff;
    --headerText: #002030;
    --hoverBg: #e9fbff;
}
.theme-free {
    /* حس “رایگان” = سبز/نعنایی تمیز و دوستانه */
    --accent: #22c55e; /* green-500 */
    --accent2: #86efac; /* green-300 */
    --accent3: #bbf7d0; /* green-200 */
    --headerText: #052e16;
    --hoverBg: #ecfdf5;
}

/* FIX: force checkout link to behave exactly like a full-width button */
#checkoutLink.plan-button,
a#checkoutLink.plan-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 2rem 0 0 0 !important;
    text-align: center !important;
    direction: rtl !important;
}

/* اگر والدش flex/grid بود و آیتم به چپ می‌چسبید */
#checkoutLink.plan-button {
    justify-self: stretch !important; /* grid */
    align-self: stretch !important; /* flex */
}