/* =============================================

   ISLAMIC QALAM — PREMIUM MEMBERSHIP

   ============================================= */



.premium-main {

    --premium-green: #123e2b;

    --premium-green-light: #20583d;

    --premium-gold: #bf9446;

    --premium-gold-light: #e7c785;

    --premium-cream: #fffdf8;

    --premium-muted: #68736b;



    width: 100%;

    margin-top: 125px;

    padding: 25px 20px 80px;

}



.premium-main * {

    box-sizing: border-box;

}



.premium-main a {

    text-decoration: none;

}



/* HERO */



.premium-hero {

    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 260px;

    align-items: center;

    gap: 35px;



    width: min(1200px, 100%);

    min-height: 415px;

    margin: 0 auto;

    padding: 65px;



    overflow: hidden;

    border-radius: 22px;

    background: linear-gradient(

        125deg,

        #0c3021,

        #184b34 75%,

        #20583d

    );

}



.premium-hero::after {

    content: "";

    position: absolute;

    right: -100px;

    bottom: -200px;



    width: 400px;

    height: 400px;



    border: 1px solid rgba(231, 199, 133, 0.2);

    border-radius: 50%;

    pointer-events: none;

}



.premium-hero-content {

    position: relative;

    z-index: 1;

    max-width: 740px;

}



.premium-eyebrow,

.premium-section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;



    color: var(--premium-gold-light);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}



.premium-hero h1 {

    margin: 20px 0;

    color: #ffffff;



    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(2.25rem, 4.5vw, 4rem);

    line-height: 1.16;

}



.premium-hero h1 span {

    display: block;

    color: var(--premium-gold-light);

}



.premium-hero-content > p {

    max-width: 660px;

    color: rgba(255, 255, 255, 0.83);

    font-size: 1.06rem;

    line-height: 1.85;

}



.premium-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;

}



.premium-primary-link,

.premium-outline-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;



    min-height: 49px;

    padding: 13px 21px;



    border-radius: 9px;

    font-size: 0.92rem;

    font-weight: 800;



    transition: *background* 0.2s ease,

                transform 0.2s ease;

}



.premium-primary-link {

    background: var(--premium-gold);

    color: #173426;

}



.premium-primary-link:hover {

    background: var(--premium-gold-light);

    color: #173426;

    transform: translateY(-2px);

}



.premium-outline-link {

    border: 1px solid rgba(255, 255, 255, 0.38);

    color: #ffffff;

}



.premium-outline-link:hover {

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

}



.premium-hero-decoration {

    display: grid;

    place-items: center;



    width: 230px;

    height: 230px;

    border: 1px solid rgba(231, 199, 133, 0.45);

    border-radius: 50%;

}



.premium-decoration-inner {

    display: grid;

    place-items: center;



    width: 180px;

    height: 180px;

    border: 1px solid rgba(231, 199, 133, 0.28);

    border-radius: 50%;



    background: rgba(255, 255, 255, 0.035);

    color: var(--premium-gold-light);

    font-size: 5rem;

}



/* SHARED SECTION */



.premium-section {

    width: min(1120px, 100%);

    margin: 95px auto 0;

}



.premium-section-heading {

    max-width: 720px;

    margin: 0 auto 42px;

    text-align: center;

}



.premium-section-eyebrow {

    color: #a87831;

}



.premium-section-heading h2 {

    margin: 13px 0;

    color: var(--premium-green);



    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(1.9rem, 3.5vw, 2.75rem);

    line-height: 1.25;

}



.premium-section-heading p {

    color: var(--premium-muted);

    font-size: 1rem;

    line-height: 1.7;

}



/* BENEFITS */



.premium-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 19px;

}



.premium-benefit {

    padding: 28px 23px;

    border: 1px solid rgba(18, 62, 43, 0.12);

    border-radius: 15px;



    background: var(--premium-cream);

    box-shadow: 0 10px 30px rgba(18, 62, 43, 0.045);

}



.premium-benefit-icon {

    display: grid;

    place-items: center;



    width: 53px;

    height: 53px;

    margin-bottom: 23px;



    border-radius: 13px;

    background: #f6ebd6;

    color: #98691f;

    font-size: 1.3rem;

}



.premium-benefit h3 {

    margin: 0 0 12px;

    color: var(--premium-green);



    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.22rem;

    line-height: 1.3;

}



.premium-benefit p {

    margin: 0;

    color: var(--premium-muted);

    font-size: 0.91rem;

    line-height: 1.75;

}



/* PRICING */



.premium-pricing {

    scroll-margin-top: 125px;

}



.premium-plans-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 25px;



    max-width: 960px;

    margin: 0 auto;

}



.premium-plan {

    display: flex;

    flex-direction: column;



    min-width: 0;

    padding: 36px;



    border: 1px solid rgba(18, 62, 43, 0.16);

    border-radius: 18px;

    background: var(--premium-cream);



    box-shadow: 0 12px 35px rgba(18, 62, 43, 0.055);

}



.premium-plan-monthly {

    border: 2px solid var(--premium-gold);

    background: linear-gradient(

        180deg,

        #fffaf0,

        #fffdf8 37%

    );

}



.premium-plan-topline {

    margin-bottom: 23px;

}



.premium-plan-type {

    display: inline-flex;

    align-items: center;

    gap: 8px;



    padding: 8px 12px;



    border-radius: 100px;

    background: #f7ebd2;

    color: #845b24;



    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.3px;

}



.premium-plan-pass .premium-plan-type {

    background: #e9f1ec;

    color: var(--premium-green);

}



.premium-plan h3 {

    margin: 0 0 12px;

    color: var(--premium-green);



    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.95rem;

    line-height: 1.25;

}



.premium-plan-intro {

    min-height: 55px;

    margin: 0;

    color: var(--premium-muted);



    font-size: 0.94rem;

    line-height: 1.65;

}



.premium-plan-price {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 10px;



    margin: 26px 0;

}



.premium-price-amount {

    color: var(--premium-green);

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(2.65rem, 5vw, 3.7rem);

    font-weight: 700;

    line-height: 1;

}



.premium-price-unit {

    color: var(--premium-muted);

    font-size: 0.9rem;

    font-weight: 600;

}



.premium-plan-divider {

    width: 100%;

    height: 1px;

    background: rgba(18, 62, 43, 0.13);

}



.premium-plan-features {

    display: flex;

    flex-direction: column;

    gap: 16px;



    margin: 29px 0 33px;

    padding: 0;

    list-style: none;

}



.premium-plan-features li {

    display: flex;

    align-items: flex-start;

    gap: 13px;



    color: #344e40;

    font-size: 0.94rem;

    line-height: 1.5;

}



.premium-plan-features i {

    flex: 0 0 auto;

    margin-top: 4px;

    color: #19804b;

}



.premium-plan-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;



    width: 100%;

    min-height: 52px;

    margin-top: auto;

    padding: 14px 18px;



    border-radius: 9px;

    background: var(--premium-green);

    color: #ffffff;



    font-size: 0.94rem;

    font-weight: 800;

    text-align: center;



    transition: *background* 0.2s ease,

                transform 0.2s ease;

}



.premium-plan-monthly .premium-plan-button {

    background: var(--premium-gold);

    color: #173426;

}



.premium-plan-button:hover {

    background: var(--premium-green-light);

    color: #ffffff;

    transform: translateY(-2px);

}



.premium-plan-monthly .premium-plan-button:hover {

    background: var(--premium-gold-light);

    color: #173426;

}



.premium-plan-footnote {

    min-height: 58px;

    margin: 17px 0 0;

    color: var(--premium-muted);



    font-size: 0.79rem;

    line-height: 1.65;

    text-align: center;

}



.premium-pricing-note {

    max-width: 700px;

    margin: 22px auto 0;

    color: var(--premium-muted);



    font-size: 0.83rem;

    line-height: 1.65;

    text-align: center;

}



/* EXISTING MEMBER */



.premium-existing-member {

    display: flex;

    align-items: center;

    gap: 17px;



    max-width: 960px;

    margin: 0 auto 22px;

    padding: 18px 21px;



    border: 1px solid #9cd2ad;

    border-radius: 12px;

    background: #e9f7ed;

    color: #195733;

}



.premium-existing-member[hidden] {

    display: none;

}



.premium-existing-member > i {

    font-size: 1.55rem;

}



.premium-existing-member div {

    flex: 1;

}



.premium-existing-member strong {

    font-size: 0.98rem;

}



.premium-existing-member p {

    margin: 4px 0 0;

    font-size: 0.86rem;

}



.premium-existing-member a {

    padding: 10px 14px;

    border-radius: 8px;

    background: #195733;

    color: #ffffff;

    font-size: 0.85rem;

    font-weight: 800;

}



/* FREE COLLECTION */



.premium-free-note {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 22px;



    width: min(1050px, 100%);

    margin: 95px auto 0;

    padding: 30px;



    border: 1px solid rgba(18, 62, 43, 0.14);

    border-radius: 17px;

    background: #f0f5ed;

}



.premium-free-note-icon {

    display: grid;

    place-items: center;



    width: 62px;

    height: 62px;



    border-radius: 14px;

    background: #dcebdc;

    color: var(--premium-green);

    font-size: 1.5rem;

}



.premium-free-note h2 {

    margin: 0 0 7px;

    color: var(--premium-green);



    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.5rem;

}



.premium-free-note p {

    margin: 0;

    color: var(--premium-muted);

    font-size: 0.91rem;

    line-height: 1.65;

}



.premium-free-note a {

    display: inline-flex;

    align-items: center;

    gap: 9px;



    color: var(--premium-green);

    font-size: 0.9rem;

    font-weight: 800;

    white-space: nowrap;

}



/* FAQ */



.premium-faq-list {

    max-width: 830px;

    margin: 0 auto;

}



.premium-faq-list details {

    margin-bottom: 12px;

    padding: 0 22px;



    border: 1px solid rgba(18, 62, 43, 0.14);

    border-radius: 11px;

    background: var(--premium-cream);

}



.premium-faq-list summary {

    position: relative;

    padding: 21px 26px 21px 0;



    color: var(--premium-green);

    font-size: 0.99rem;

    font-weight: 800;

    line-height: 1.5;



    cursor: pointer;

}



.premium-faq-list details p {

    margin: 0;

    padding: 0 0 22px;

    color: var(--premium-muted);



    font-size: 0.94rem;

    line-height: 1.75;

}



/* RESPONSIVE */



@media (max-width: 1020px) {

    .premium-benefits-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .premium-hero {

        padding: 45px;

        grid-template-columns: minmax(0, 1fr) 170px;

    }



    .premium-hero-decoration {

        width: 170px;

        height: 170px;

    }



    .premium-decoration-inner {

        width: 130px;

        height: 130px;

        font-size: 3.5rem;

    }

}



@media (max-width: 700px) {

    .premium-main {

        margin-top: 100px;

        padding: 15px 14px 55px;

    }



    .premium-hero {

        display: block;

        min-height: auto;

        padding: 40px 25px;

    }



    .premium-hero-decoration {

        display: none;

    }



    .premium-section {

        margin-top: 67px;

    }



    .premium-benefits-grid,

    .premium-plans-grid {

        grid-template-columns: 1fr;

    }



    .premium-section-heading {

        margin-bottom: 30px;

    }



    .premium-plan {

        padding: 29px 24px;

    }



    .premium-plan-intro,

    .premium-plan-footnote {

        min-height: 0;

    }



    .premium-free-note {

        grid-template-columns: 1fr;

        justify-items: center;

        margin-top: 65px;

        padding: 28px 23px;

        text-align: center;

    }



    .premium-existing-member {

        flex-wrap: wrap;

    }



    .premium-existing-member a {

        width: 100%;

        text-align: center;

    }

}



@media (max-width: 400px) {

    .premium-hero-actions > a {

        width: 100%;

    }



    .premium-plan {

        padding: 26px 18px;

    }

}