/* ==========================================================================
   Intelsense — Premium Subscription page
   Scoped under .subscription-premium so shared .page-14/.area-2/.area-4/
   .box-area-3 classes on other pages stay untouched. Appearance only — every
   checkbox id/class, #pricTable, the coupon/terms/pay logic and the
   .thide/.tshow toggle are left exactly as the JS expects. Base #00256b.
   ========================================================================== */

.subscription-premium{
    --u-navy:      #00256b;
    --u-navy-deep: #001a4d;
    --u-navy-mid:  #143a86;
    --u-ink:       #1d2b47;
    --u-ink-soft:  #45577a;
    --u-amber:     #f99e1e;
    --u-surface:   #ffffff;
    --u-tint:      #f4f7fc;
    --u-line:      rgba(0, 37, 107, .10);
    --u-shadow:    0 1px 2px rgba(0, 37, 107, .05), 0 12px 30px rgba(0, 37, 107, .08);
    --u-shadow-lg: 0 18px 44px rgba(0, 37, 107, .16);
    --u-radius:    16px;
    --u-ease:      cubic-bezier(.4, 0, .2, 1);

    font-family: 'Poppins', sans-serif;
    color: var(--u-ink);
}

/* ------------------------------------------------------------------ hero */

.subscription-premium .page-14{
    float: none;
    width: 100%;
    height: auto;
    padding: 88px 0 74px;
    background:
        linear-gradient(120deg, rgba(0, 37, 107, .90) 0%, rgba(0, 26, 77, .82) 100%),
        url(../images/page-bnnr7.jpg) center / cover no-repeat;
}

.subscription-premium .page-inr24{ float: none; width: 100%; }

.subscription-premium .page-inr24 h1{
    color: #fff;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: clamp(30px, 4.4vw, 48px);
    margin: 0 0 16px;
    line-height: 1.1;
}

.subscription-premium .page-inr24 ul{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 16px 7px 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    list-style: none;
    float: none;
    width: auto;
}

.subscription-premium .page-inr24 ul li{ display: inline-flex; align-items: center; gap: 8px; list-style: none; }
.subscription-premium .page-inr24 ul li .fa{ color: #ffd07a; font-size: 13px; }
.subscription-premium .page-inr24 ul li a{ color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.subscription-premium .page-inr24 ul li a:hover{ text-decoration: underline; }

/* --------------------------------------------------------- section shells */

.subscription-premium .area-2,
.subscription-premium .area-4{
    float: none;
    width: 100%;
    padding: 62px 0;
}

.subscription-premium .area-2{ background: var(--u-surface); }
.subscription-premium .area-4{ background: var(--u-tint); }
.subscription-premium .area-4 + .area-4,
.subscription-premium section.area-4{ background: var(--u-surface); }

.subscription-premium .area-inr2,
.subscription-premium .page-inr4,
.subscription-premium .page-inr25{ float: none; width: 100%; }

/* headings — kill the legacy floating :before bar, add clean underline */
.subscription-premium .area-inr2 h2,
.subscription-premium .area-4 .page-inr25 h2{
    position: relative;
    text-align: left;
    text-transform: none;
    background: transparent;
    border-left: 0;
    color: var(--u-navy);
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 26px;
    padding-bottom: 16px;
    line-height: 1.15;
}

.subscription-premium .area-inr2 h2::before{ display: none !important; }

.subscription-premium .area-inr2 h2::after,
.subscription-premium .area-4 .page-inr25 h2::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--u-amber), #ffca6b);
}

.subscription-premium .area-2 .row,
.subscription-premium .area-4 .row{ align-items: center; row-gap: 28px; }

.subscription-premium .area-inr2 p,
.subscription-premium .area-4 .page-inr25 p{
    color: var(--u-ink);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 14px;
}

.subscription-premium .area-inr2 h4{
    margin: 22px 0 12px;
    font-size: 19px;
    font-weight: 700;
    color: var(--u-navy);
}

.subscription-premium .area-2 img,
.subscription-premium .area-4 img{
    max-width: 100%;
    height: auto;
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow);
}

/* sample-report links */
.subscription-premium .area-4 .new-span{ color: var(--u-navy) !important; font-weight: 700; }
.subscription-premium .area-4 .page-inr25 p .fa-circle{ color: var(--u-amber) !important; font-size: 8px; margin-right: 8px; }
.subscription-premium .area-4 a{ color: var(--u-navy-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.subscription-premium .area-4 a:hover{ color: var(--u-navy); }

/* =====================================================  PRICING CARDS  ==== */

.subscription-premium section.area-4 .form-signin .col-lg-3{ margin-bottom: 24px; }

.subscription-premium .page-inr-7{ padding: 0; height: 100%; }

.subscription-premium .box-area-3{
    height: 100%;
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow);
    overflow: hidden;
    background: var(--u-surface);
    transition: transform .18s var(--u-ease), box-shadow .18s var(--u-ease), border-color .18s var(--u-ease);
}

.subscription-premium .box-area-3:hover{
    transform: translateY(-4px);
    box-shadow: var(--u-shadow-lg);
}

/* selected plan — highlight the card */
.subscription-premium .box-area-3:has(input:checked){
    border-color: var(--u-navy);
    box-shadow: 0 0 0 2px var(--u-navy), var(--u-shadow-lg);
}

/* plan-name header — was yellow, now navy */
.subscription-premium .page-inr-7 h4{
    text-align: center;
    background: linear-gradient(135deg, var(--u-navy) 0%, var(--u-navy-deep) 100%);
    color: #fff;
    padding: 16px 12px;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* option row — stacked & centred so nothing wraps in the narrow card.
   flex `order` re-sequences the existing spans: price, period, then select. */
.subscription-premium .subsTable{
    float: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 24px 18px 26px;
    text-align: center;
    cursor: pointer;
}

.subscription-premium .amountSp{
    order: 1;
    width: auto;
    float: none;
    color: var(--u-navy) !important;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.subscription-premium .yearSp{
    order: 2;
    width: auto;
    float: none;
    color: var(--u-ink-soft) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* the native checkbox becomes a clear "Select" control */
.subscription-premium .inputSp{
    order: 3;
    width: auto;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 18px;
    border: 1px solid var(--u-line);
    border-radius: 999px;
    background: var(--u-tint);
    color: var(--u-navy) !important;
    font-size: 13px;
    font-weight: 600;
    transition: background .18s var(--u-ease), border-color .18s var(--u-ease);
}

.subscription-premium .inputSp::after{
    content: "Select plan";
}

.subscription-premium .subsTable:hover .inputSp{
    border-color: var(--u-navy);
    background: #e7eefb;
}

.subscription-premium .inputSp input[type="checkbox"]{
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--u-navy);
    cursor: pointer;
}

/* selected state — swap the pill label and fill it navy */
.subscription-premium .box-area-3:has(input:checked) .inputSp{
    background: var(--u-navy);
    border-color: var(--u-navy);
    color: #fff !important;
}

.subscription-premium .box-area-3:has(input:checked) .inputSp::after{
    content: "Selected";
}

/* =====================================================  SUMMARY CARD  ==== */

/* widen the summary column (Bootstrap makes it 33%) so the card is roomy:
   the coupon control fits inside and "Payable Amount (GST Included)" stays
   on one line. */
.subscription-premium section.area-4 .form-signin > .col-lg-4{
    flex: 0 0 100%;
    max-width: 620px;
    margin: 34px auto 0 !important;
    float: none;
}

/* The summary is a <table> whose cells the JS fills. We convert it to a clean
   block/flex layout (display toggled by JS via .thide/.tshow — not set here). */
.subscription-premium #pricTable{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg);
    padding: 30px 32px 32px;
}

.subscription-premium #pricTable,
.subscription-premium #pricTable tbody{ display: block; width: 100%; }

.subscription-premium #pricTable tr{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}

.subscription-premium #pricTable tr:empty{ display: none; padding: 0; }

.subscription-premium #pricTable td{
    display: block;
    border: 0;
    padding: 0;
    vertical-align: middle;
    color: var(--u-ink);
    font-size: 15px;
}

/* label / value rows (Total, Discount, Payable) */
.subscription-premium #pricTable #lbTotalamount,
.subscription-premium #pricTable #lbDiscount,
.subscription-premium #pricTable #lbPayableamount{
    color: var(--u-ink-soft);
    font-weight: 500;
    white-space: nowrap;          /* keep labels on one line */
}

.subscription-premium #pricTable #txtTotalamount,
.subscription-premium #pricTable #txtDiscount,
.subscription-premium #pricTable #txtPayableamount{
    text-align: right;
    font-weight: 700;
    color: var(--u-navy);
}

/* payable row emphasised, divider above it */
.subscription-premium #pricTable tr:has(#lbPayableamount){
    border-top: 1px solid var(--u-line);
    margin-top: 6px;
    padding-top: 16px;
}

.subscription-premium #pricTable #lbPayableamount{ font-size: 16px; font-weight: 600; color: var(--u-ink); }
.subscription-premium #pricTable #txtPayableamount{ color: var(--u-navy); font-size: 22px; font-weight: 800; }

/* full-width rows: coupon, terms, button */
.subscription-premium #pricTable tr:has(> td[colspan]){ display: block; }
.subscription-premium #pricTable td[colspan]{ width: 100%; }

/* the button lives in a stray <div class="page-body"> inside a <tr> */
.subscription-premium #pricTable .page-body{ display: block; width: 100%; }
.subscription-premium #pricTable .page-body td{ display: block; width: 100%; }

/* coupon field + apply */
.subscription-premium #txtcoupon{
    flex: 1;
    height: 44px !important;
    border: 1px solid #7c8aa8 !important;   /* 3.47:1 on white — non-text AA */
    border-radius: 10px 0 0 10px !important;
    padding: 10px 14px !important;
    font-size: 14px;
    outline: none;
}

.subscription-premium #txtcoupon:focus{
    border-color: var(--u-navy-mid) !important;
    box-shadow: 0 0 0 3px rgba(20, 58, 134, .15);
}

.subscription-premium #pricTable .btn-secondary{
    height: 44px;
    border-radius: 0 10px 10px 0 !important;
    background: var(--u-navy);
    border-color: var(--u-navy);
    color: #fff;
    font-weight: 600;
    padding: 0 20px;
}

.subscription-premium #pricTable .btn-secondary:hover{
    background: var(--u-navy-deep);
    border-color: var(--u-navy-deep);
}

/* terms row */
.subscription-premium #pricTable #terms{
    width: 18px;
    height: 18px;
    accent-color: var(--u-navy);
    margin-right: 8px;
    vertical-align: -3px;
}

.subscription-premium #pricTable label{ color: var(--u-ink); font-size: 14px; }

.subscription-premium #pricTable label a{
    color: var(--u-navy-mid);
    font-weight: 600;
    text-decoration: underline;
}

/* pay / verify button (base .btn-primary already navy site-wide) */
.subscription-premium #pay-btn,
.subscription-premium #verify-btn{
    border-radius: 999px !important;
    padding: 14px 20px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 8px 22px rgba(0, 37, 107, .22);
    transition: transform .18s var(--u-ease), box-shadow .18s var(--u-ease);
}

.subscription-premium #pay-btn:not(:disabled):hover,
.subscription-premium #verify-btn:not(:disabled):hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 37, 107, .32);
}

.subscription-premium #pay-btn:disabled{ opacity: .5; }

/* helper texts */
.subscription-premium .text-danger{ color: #b3261e !important; font-weight: 500; }

/* -------------------------------------------------------------- a11y focus */

.subscription-premium a:focus-visible,
.subscription-premium button:focus-visible,
.subscription-premium input:focus-visible{
    outline: 3px solid var(--u-navy-mid);
    outline-offset: 2px;
    border-radius: 6px;
}

.subscription-premium .page-14 a:focus-visible{ outline-color: #ffd07a; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 991.98px){
    .subscription-premium .page-14{ padding: 62px 0 52px; }
    .subscription-premium .area-2,
    .subscription-premium .area-4{ padding: 46px 0; }
    .subscription-premium .page-inr-7{ margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce){
    .subscription-premium .box-area-3,
    .subscription-premium #pay-btn,
    .subscription-premium #verify-btn{ transition: none; }
    .subscription-premium .box-area-3:hover,
    .subscription-premium #pay-btn:hover{ transform: none; }
}