/*
 * Package cards (.tq-pkgs section + .tq-pkg card): the home page "Our Most Popular Courses" row
 * and the dashboard Upgrade page share these. Light/dark follow html[data-theme].
 */

/* ======================= home package cards (.tq-pkgs / .tq-pkg) ======================= */
/* light: soft cream section, white cards, navy text and deeper golds so they read on white.
   dark: black section and cards with bright gold. The navy box itself looks the same in both. */
.tq-pkgs {
    --pkg-bg: radial-gradient(ellipse at 50% 0%, rgba(243, 188, 30, .14), transparent 55%), linear-gradient(180deg, #fffaf0, #f6f8fd);
    --pkg-streak: rgba(224, 165, 20, .7);
    --pkg-streak-glow: rgba(243, 188, 30, .25);
    --pkg-title: #06256f;
    --pkg-text: #06256f;
    --pkg-muted: #8a93a3;
    --pkg-line: rgba(6, 37, 111, .1);
    --pkg-card-bg: radial-gradient(ellipse at 50% 18%, rgba(243, 188, 30, .16), transparent 55%), linear-gradient(180deg, #ffffff, #fffdf7);
    --pkg-card-edge: rgba(224, 165, 20, .28);
    --pkg-card-shadow: 0 20px 44px rgba(6, 37, 111, .1), inset 0 1px 0 #fff;
    --pkg-card-shadow-hover: 0 24px 50px rgba(6, 37, 111, .14), 0 0 30px rgba(243, 188, 30, .22);
    --pkg-panel-bg: linear-gradient(180deg, #fffaf0, #fff4dc);
    --pkg-panel-edge: rgba(224, 165, 20, .35);
    --pkg-glow: rgba(243, 188, 30, .38);
    --pkg-gold-ui: #d39a0d;
    --pkg-gold-ink: #a87300;
    --pkg-gold-ink-hover: #7a5200;
    --pkg-gold-text: linear-gradient(180deg, #e0a514, #c98f0a 55%, #9a6806);

    position: relative;
    overflow: hidden;
    background: var(--pkg-bg);
}

html[data-theme="dark"] .tq-pkgs {
    --pkg-bg: radial-gradient(ellipse at 50% 0%, rgba(243, 188, 30, .08), transparent 55%), #030303;
    --pkg-streak: rgba(255, 215, 106, .9);
    --pkg-streak-glow: rgba(243, 188, 30, .45);
    --pkg-title: #fff;
    --pkg-text: #fff;
    --pkg-muted: #a3a9b8;
    --pkg-line: rgba(255, 255, 255, .12);
    --pkg-card-bg: radial-gradient(ellipse at 50% 18%, rgba(243, 188, 30, .14), transparent 55%), linear-gradient(180deg, #0b0b0d, #050505);
    --pkg-card-edge: rgba(255, 255, 255, .13);
    --pkg-card-shadow: 0 24px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    --pkg-card-shadow-hover: 0 26px 56px rgba(0, 0, 0, .6), 0 0 34px rgba(243, 188, 30, .14);
    --pkg-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    --pkg-panel-edge: rgba(255, 255, 255, .16);
    --pkg-glow: rgba(243, 188, 30, .5);
    --pkg-gold-ui: #f3bc1e;
    --pkg-gold-ink: #f3bc1e;
    --pkg-gold-ink-hover: #ffd76a;
    --pkg-gold-text: linear-gradient(180deg, #fff2a8, #ffd76a 35%, #e0a514 70%, #b77716);
}

.tq-pkgs .container {
    position: relative;
    z-index: 1;
}

.tq-pkgs .site-title {
    color: var(--pkg-title);
}

.tq-pkgs .site-title .text-gradient {
    background: var(--pkg-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- card ---------- */
.tq-pkg {
    display: flex;
    flex-direction: column;
    height: calc(100% - 34px);
    margin-top: 34px;
    padding: 0 14px 16px;
    border: 1px solid var(--pkg-card-edge);
    border-radius: 26px;
    background: var(--pkg-card-bg);
    box-shadow: var(--pkg-card-shadow);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.tq-pkg:hover {
    border-color: rgba(243, 188, 30, .55);
    box-shadow: var(--pkg-card-shadow-hover);
}

/* ---------- the box (drawn in 3D: front face plus the left side) ---------- */
/* pulled up so the box pokes out above the card's top edge, as in the design */
.tq-pkg__stage {
    position: relative;
    display: block;
    margin-top: -34px;
    padding: 0 0 18px;
    perspective: 900px;
}

/* gold glow behind the box and a light flare under it */
.tq-pkg__stage::before,
.tq-pkg__stage::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%);
}

.tq-pkg__stage::before {
    top: 8%;
    width: 80%;
    height: 78%;
    background: radial-gradient(closest-side, var(--pkg-glow), rgba(243, 188, 30, .1) 60%, transparent);
    filter: blur(14px);
}

.tq-pkg__stage::after {
    bottom: 10px;
    width: 92%;
    height: 14px;
    background: radial-gradient(closest-side, rgba(255, 230, 150, .95), rgba(243, 188, 30, .45) 45%, transparent);
    filter: blur(2px);
}

.tq-pkg__box {
    position: relative;
    z-index: 1;
    display: block;
    width: 68%;
    aspect-ratio: .8;
    margin: 0 auto 0 22%;
    transform-style: preserve-3d;
    transform: rotateY(24deg) rotateX(2deg);
    transition: transform .5s ease;
}

.tq-pkg:hover .tq-pkg__box {
    transform: rotateY(18deg) rotateX(2deg) translateY(-4px);
}

/* uploaded plan image: takes the box's place, about the same height, never cropped */
.tq-pkg__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 88%;
    aspect-ratio: 1;
    margin: 0 auto;
    transition: transform .5s ease;
}

.tq-pkg__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
}

.tq-pkg:hover .tq-pkg__photo {
    transform: translateY(-4px);
}

.tq-pkg__front,
.tq-pkg__side {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    container-type: inline-size;
}

.tq-pkg__front {
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9% 0 0;
    border: 1px solid rgba(255, 215, 106, .55);
    background: linear-gradient(135deg, transparent 62%, rgba(77, 143, 255, .1) 62%, transparent 80%),
        linear-gradient(160deg, #12204a, #0a1330 45%, #060b1d);
    box-shadow: 0 0 24px rgba(243, 188, 30, .4), inset 0 0 22px rgba(0, 0, 0, .55);
}

/* gold corner fold top-left and a gold slash bottom-right */
.tq-pkg__front::before,
.tq-pkg__front::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.tq-pkg__front::before {
    top: 0;
    left: 0;
    width: 15%;
    height: 15%;
    background: linear-gradient(135deg, #ffd76a, #e0a514 50%, transparent 50%);
}

.tq-pkg__front::after {
    right: -4%;
    bottom: 18%;
    width: 26%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ffd76a);
    transform: rotate(-42deg);
}

.tq-pkg__brand {
    display: flex;
    align-items: center;
    gap: 4cqw;
}

.tq-pkg__brand img {
    width: 17cqw;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.tq-pkg__brand-text {
    display: flex;
    flex-direction: column;
    padding-left: 4cqw;
    border-left: 1px solid #f3bc1e;
    line-height: 1.1;
}

.tq-pkg__brand-text strong {
    color: #fff;
    font-size: 10cqw;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.tq-pkg__brand-text small {
    display: flex;
    align-items: center;
    gap: 1.5cqw;
    color: #e6e9f2;
    font-size: 4cqw;
    font-weight: 600;
    white-space: nowrap;
}

.tq-pkg__brand-text small::before,
.tq-pkg__brand-text small::after {
    content: "";
    width: 4cqw;
    height: 1px;
    background: #f3bc1e;
}

/* the plan's name, shrunk for longer words so it always fits the face */
.tq-pkg__word {
    margin: 7cqw 0 0;
    padding-bottom: 4cqw;
    border-bottom: 1.5px solid;
    border-image: linear-gradient(90deg, transparent, #ffd76a, transparent) 1;
    background: linear-gradient(180deg, #ffffff, #e9ecf3 45%, #a9b0bf 55%, #f4f6fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: min(29cqw, calc(122cqw / var(--len, 3)));
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55));
}

.tq-pkg__band {
    align-self: stretch;
    margin-top: auto;
    margin-bottom: 15%;
    padding: 4cqw 0;
    border-top: 1.5px solid #e0a514;
    border-bottom: 1.5px solid #e0a514;
    background: linear-gradient(90deg, rgba(10, 22, 58, .9), rgba(20, 36, 84, .95), rgba(10, 22, 58, .9));
    text-align: center;
    color: #ffd76a;
    font-size: 13cqw;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #8a5a06, 0 0 14px rgba(243, 188, 30, .45);
}

/* left side of the box, folded back from the front's left edge */
.tq-pkg__side {
    left: -24%;
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* % here, not cqw: a container's own padding would resolve cqw against the viewport */
    padding: 4% 0 3%;
    border: 1px solid rgba(255, 215, 106, .35);
    background: linear-gradient(180deg, #0a0f20, #04060f);
    transform-origin: right center;
    transform: rotateY(-90deg);
}

.tq-pkg__side-logo img {
    width: 62cqw;
    height: auto;
}

.tq-pkg__side-name {
    flex: 1;
    min-height: 0;
    margin: 10cqw 0;
    color: #ffd76a;
    font-size: 40cqw;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

.tq-pkg__side-name b {
    margin-bottom: .35em;
    color: #fff;
    font-weight: 900;
}

.tq-pkg__side-brand {
    color: #fff;
    font-size: 17cqw;
    font-weight: 800;
    text-transform: uppercase;
}

/* ---------- price ---------- */
.tq-pkg__price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--pkg-panel-edge);
    border-radius: 18px;
    background: var(--pkg-panel-bg);
}

.tq-pkg__price del {
    color: var(--pkg-muted);
    font-size: 17px;
    font-weight: 700;
    text-decoration-thickness: 2px;
}

.tq-pkg__price-sep {
    width: 1px;
    height: 24px;
    background: var(--pkg-panel-edge);
}

.tq-pkg__price strong {
    background: var(--pkg-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.1;
    filter: drop-shadow(0 0 10px rgba(243, 188, 30, .3));
}

/* ---------- perks ---------- */
.tq-pkg__perks {
    margin: 0 0 12px;
    padding: 0 4px;
    list-style: none;
}

.tq-pkg__perks li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--pkg-text);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
}

/* divider between rows starts after the icon */
.tq-pkg__perks li + li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    height: 1px;
    background: var(--pkg-line);
}

.tq-pkg__perks span {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--pkg-gold-ui);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--pkg-gold-ui);
    font-size: 15px;
    box-shadow: 0 0 12px rgba(243, 188, 30, .18);
}

/* ---------- buttons ---------- */
.tq-pkg__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 50px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}

.tq-pkg__btn .fa-arrow-right {
    transition: transform .25s ease;
}

.tq-pkg__btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

.tq-pkg__btn--ghost {
    height: 42px;
    margin: auto 0 10px;
    border: 1.5px solid var(--pkg-gold-ui);
    color: var(--pkg-gold-ink);
    font-size: 13.5px;
}

.tq-pkg__btn--ghost:hover {
    background: rgba(243, 188, 30, .1);
    color: var(--pkg-gold-ink-hover);
}

.tq-pkg__btn--gold {
    height: 50px;
    background: linear-gradient(180deg, #ffe48a, #f3bc1e 55%, #e0a514);
    color: #151515;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 26px rgba(243, 188, 30, .35);
}

.tq-pkg__btn--gold:hover {
    color: #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 32px rgba(243, 188, 30, .55);
}

/* ---------- dashboard Upgrade page extras ---------- */
/* whichever button follows the perks sits at the bottom, so cards line up even without "View All Courses" */
.tq-pkg__perks + .tq-pkg__btn {
    margin-top: auto;
}

/* disabled main button: "Active Plan" / "Included" */
.tq-pkg__btn--done {
    height: 50px;
    border: 1.5px dashed var(--pkg-panel-edge);
    background: var(--pkg-panel-bg);
    color: var(--pkg-muted);
    font-size: 14px;
    cursor: default;
}

/* small label over the price, e.g. "Upgrade price" */
.tq-pkg__price--noted {
    flex-wrap: wrap;
    row-gap: 2px;
}

.tq-pkg__price-note {
    flex: 0 0 100%;
    color: var(--pkg-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

/* the user's current package: gold outline and a "Your Package" pill between the box and the price */
.tq-pkg--current {
    border-color: var(--pkg-gold-ui);
    box-shadow: var(--pkg-card-shadow), 0 0 0 1px var(--pkg-gold-ui);
}

.tq-pkg__flag {
    align-self: center;
    margin: -6px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 50px;
    background: linear-gradient(180deg, #ffe48a, #f3bc1e 55%, #e0a514);
    color: #151515;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(243, 188, 30, .35);
}

@media (prefers-reduced-motion: reduce) {

    .tq-pkg,
    .tq-pkg__box,
    .tq-pkg__btn .fa-arrow-right {
        transition: none;
    }
}