/**
 * Smart English Worksheets — Complete Pack landing page.
 * "Modern Vibrant Learning" theme: gradient hero, card-based features,
 * the worksheet system's own 6-colour accents used throughout.
 * Loaded only on page-smart-english-worksheets-pack.php.
 *
 * @package MyTeacher_Child
 */

.mtwp-page{
	--c-vocab:#0E9A6E;      --c-vocab-tint:#E4F3EC;
	--c-grammar:#213A47;    --c-grammar-tint:#E5EAEC;
	--c-functions:#1B8A8A;  --c-functions-tint:#E1F1F1;
	--c-reading:#7A5A96;    --c-reading-tint:#EFE9F3;
	--c-writing:#B84A2A;    --c-writing-tint:#F8E9E3;
	--c-review:#C8902A;     --c-review-tint:#FAF0DD;
	overflow-x:hidden;
}
.mtwp-wrap{ max-width:1160px; margin:0 auto; padding:0 20px; }
.mtwp-page section{ padding:64px 0; }
.mtwp-page h1,.mtwp-page h2,.mtwp-page h3,.mtwp-page h4{ font-family:var(--mt-display); font-weight:800; letter-spacing:-.02em; }
.mtwp-page p{ line-height:1.6; }
.mtwp-bg-cream{ background:var(--mt-cream); }

/* Protected preview images — CSS background-image on a div, never a
   real <img>, so there's no "save image as" / drag-out / open-in-new-tab.
   Matches the pattern already used on the Teacher Bundle & Smart
   English Book landing pages. */
.mtwp-shot{
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	-webkit-user-select:none; user-select:none;
	pointer-events:none;
}
.mtwp-shot-contain{ background-size:contain; background-position:center; }

/* ---------- Hero ---------- */
.mtwp-hero{
	position:relative; overflow:hidden; color:#fff;
	background:
		radial-gradient(circle at 85% 8%, rgba(224,169,63,.35), transparent 45%),
		linear-gradient(122deg, #0A7A56 0%, #0E9A6E 16%, #1B8A8A 34%, #213A47 56%, #5B3E6B 76%, #B84A2A 100%);
	padding:50px 0 54px;
}
.mtwp-hero::before{
	content:""; position:absolute; inset:0;
	background-image:radial-gradient(circle, rgba(255,255,255,.08) 1.5px, transparent 1.5px);
	background-size:26px 26px; opacity:.5; pointer-events:none;
}
.mtwp-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.mtwp-eyebrow-chip{
	display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.35); padding:8px 16px; border-radius:999px;
	font-family:var(--mt-display); font-weight:700; font-size:.76rem; letter-spacing:.04em;
	text-transform:uppercase; margin-bottom:18px;
}
.mtwp-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.08; margin:0 0 16px; }
.mtwp-hero h1 em{
	font-style:normal; background:linear-gradient(90deg,#FFE9B8,#FFFFFF 60%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.mtwp-hero-lead{ font-size:1.03rem; color:rgba(255,255,255,.92); max-width:480px; margin-bottom:24px; }
.mtwp-hero-stats{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.mtwp-hero-stat b{ display:block; font-family:var(--mt-display); font-size:1.4rem; font-weight:800; color:#fff; }
.mtwp-hero-stat span{ font-size:.72rem; color:rgba(255,255,255,.78); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.mtwp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.mtwp-btn{
	font-family:var(--mt-display); font-weight:700; font-size:.92rem; padding:14px 26px; border-radius:999px;
	display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
	transition:transform .15s ease, box-shadow .15s ease;
}
.mtwp-btn:hover{ transform:translateY(-2px); }
.mtwp-btn-primary{ background:var(--mt-gold); color:var(--mt-navy); box-shadow:0 12px 26px rgba(224,169,63,.35); }
.mtwp-btn-primary:hover{ background:#F0BB58; color:var(--mt-navy); }
.mtwp-btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.mtwp-btn-ghost:hover{ background:rgba(255,255,255,.2); color:#fff; }

/* Small hero art — capped size, protected divs */
.mtwp-hero-art{ position:relative; display:flex; justify-content:center; align-items:center; min-height:260px; }
.mtwp-hero-cover{
	width:150px; aspect-ratio:650/918; border-radius:12px; box-shadow:var(--mt-shadow-lg);
	transform:rotate(-4deg); position:relative; z-index:3; border:4px solid #fff;
}
.mtwp-hero-fan{
	position:absolute; width:120px; aspect-ratio:650/975; border-radius:10px;
	box-shadow:0 14px 30px rgba(0,0,0,.35); border:3px solid #fff;
}
.mtwp-hero-fan.f1{ transform:rotate(11deg) translate(72px,6px); z-index:2; }
.mtwp-hero-badge-float{
	position:absolute; top:2%; right:0; background:#fff; color:var(--mt-navy); border-radius:14px;
	padding:10px 14px; box-shadow:var(--mt-shadow-lg); font-family:var(--mt-display); font-weight:800;
	font-size:.76rem; text-align:center; z-index:4; line-height:1.3;
}
.mtwp-hero-badge-float b{ display:block; font-size:1.1rem; color:var(--mt-green-deep); }

@media (max-width:880px){
	.mtwp-hero-grid{ grid-template-columns:1fr; }
	.mtwp-hero-art{ order:-1; min-height:200px; margin-bottom:6px; }
	.mtwp-hero-cover{ width:130px; }
	.mtwp-hero-fan{ width:105px; }
	.mtwp-hero-fan.f1{ transform:rotate(10deg) translate(46px,16px); }
}

/* ---------- Signature spectrum bar ---------- */
.mtwp-spectrum{ display:flex; height:8px; width:100%; }
.mtwp-spectrum i{ flex:1; display:block; }
.mtwp-spectrum .s-vocab{ background:var(--c-vocab); }
.mtwp-spectrum .s-grammar{ background:var(--c-grammar); }
.mtwp-spectrum .s-functions{ background:var(--c-functions); }
.mtwp-spectrum .s-reading{ background:var(--c-reading); }
.mtwp-spectrum .s-writing{ background:var(--c-writing); }
.mtwp-spectrum .s-review{ background:var(--c-review); }
.mtwp-spectrum-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 22px; padding:12px 20px 0; }
.mtwp-spectrum-legend span{
	display:flex; align-items:center; gap:6px; font-family:var(--mt-display); font-weight:700; font-size:.72rem;
	color:var(--mt-ink-soft); text-transform:uppercase; letter-spacing:.03em;
}
.mtwp-spectrum-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ---------- Section heads ---------- */
.mtwp-sec-head{ text-align:center; max-width:640px; margin:0 auto 38px; }
.mtwp-sec-eyebrow{
	display:inline-block; font-family:var(--mt-display); font-weight:700; font-size:.75rem;
	text-transform:uppercase; letter-spacing:.05em; color:var(--mt-green-deep); margin-bottom:10px;
}
.mtwp-sec-head h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 12px; color:var(--mt-navy); }
.mtwp-sec-head p{ color:var(--mt-ink-soft); font-size:.98rem; }

/* ---------- Two systems ---------- */
.mtwp-systems{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.mtwp-system-card{
	background:#fff; border-radius:var(--mt-radius); padding:26px; box-shadow:var(--mt-shadow);
	border:1px solid var(--mt-line); position:relative; overflow:hidden;
}
.mtwp-system-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; }
.mtwp-system-card.worksheets::before{ background:linear-gradient(90deg,var(--c-vocab),var(--c-grammar),var(--c-functions),var(--c-reading),var(--c-writing),var(--c-review)); }
.mtwp-system-card.plans::before{ background:linear-gradient(90deg,#2B2B3D,#5B3E6B); }
.mtwp-system-card .mtwp-num{ font-family:var(--mt-display); font-weight:900; font-size:2.5rem; color:var(--mt-navy); line-height:1; }
.mtwp-system-card .mtwp-num small{ font-size:1rem; font-weight:700; color:var(--mt-ink-soft); margin-left:5px; }
.mtwp-system-card h3{ font-size:1.12rem; margin:6px 0 8px; color:var(--mt-navy); }
.mtwp-system-card p{ color:var(--mt-ink-soft); margin-bottom:16px; font-size:.92rem; }
.mtwp-chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.mtwp-chip{ font-family:var(--mt-display); font-weight:700; font-size:.72rem; padding:5px 11px; border-radius:999px; }
@media (max-width:760px){ .mtwp-systems{ grid-template-columns:1fr; } }

/* ---------- Lesson-type grid — small, uncropped thumbnails ---------- */
.mtwp-type-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;
}
.mtwp-type-card{
	border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--mt-shadow); border:1px solid var(--mt-line);
	transition:transform .18s ease, box-shadow .18s ease;
}
.mtwp-type-card:hover{ transform:translateY(-4px); box-shadow:var(--mt-shadow-lg); }
.mtwp-type-card .mtwp-shot{ aspect-ratio:650/975; max-height:220px; }
.mtwp-type-card .mtwp-tc-body{ padding:12px 13px 15px; }
.mtwp-tc-tag{
	display:inline-flex; align-items:center; gap:5px; font-family:var(--mt-display); font-weight:800;
	font-size:.72rem; padding:4px 10px; border-radius:999px; margin-bottom:6px;
}
.mtwp-type-card p{ font-size:.78rem; color:var(--mt-ink-soft); margin:0; }
.mtwp-tc-vocab .mtwp-tc-tag{ background:var(--c-vocab-tint); color:var(--c-vocab); }
.mtwp-tc-grammar .mtwp-tc-tag{ background:var(--c-grammar-tint); color:var(--c-grammar); }
.mtwp-tc-functions .mtwp-tc-tag{ background:var(--c-functions-tint); color:var(--c-functions); }
.mtwp-tc-reading .mtwp-tc-tag{ background:var(--c-reading-tint); color:var(--c-reading); }
.mtwp-tc-writing .mtwp-tc-tag{ background:var(--c-writing-tint); color:var(--c-writing); }
.mtwp-tc-review .mtwp-tc-tag{ background:var(--c-review-tint); color:var(--c-review); }

/* ---------- Lesson plan showcase (dark) ---------- */
.mtwp-lp-section{ background:var(--mt-navy); color:#fff; }
.mtwp-lp-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; align-items:center; }
.mtwp-lp-section .mtwp-sec-eyebrow{ color:#F0BB58; }
.mtwp-lp-section .mtwp-sec-head{ text-align:left; margin:0 0 18px; max-width:100%; }
.mtwp-lp-section h2{ color:#fff; }
.mtwp-lp-shot{
	width:100%; max-width:220px; margin:0 auto; aspect-ratio:650/975; border-radius:14px;
	box-shadow:0 22px 50px rgba(0,0,0,.4); border:4px solid #fff;
}
.mtwp-lp-flow{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 22px; }
.mtwp-lp-flow span{
	background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); font-family:var(--mt-display);
	font-weight:700; font-size:.7rem; padding:6px 11px; border-radius:999px;
}
.mtwp-lp-flow span.on{ background:var(--mt-gold); color:var(--mt-navy); border-color:var(--mt-gold); }
.mtwp-lp-features{ display:grid; gap:14px; }
.mtwp-lp-feature{ display:flex; gap:12px; align-items:flex-start; }
.mtwp-lp-feature > div:last-child{ flex:1 1 0%; min-width:0; }
.mtwp-lp-feature .mtwp-ic{
	width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.1); display:flex;
	align-items:center; justify-content:center; font-size:1rem; flex:none; border:1px solid rgba(255,255,255,.2);
}
.mtwp-lp-feature h4{ color:#fff; font-size:.95rem; margin:0 0 3px; }
.mtwp-lp-feature p{ color:rgba(255,255,255,.72); font-size:.85rem; margin:0; }
@media (max-width:880px){ .mtwp-lp-grid{ grid-template-columns:1fr; } .mtwp-lp-section .mtwp-sec-head{ text-align:center; margin:0 auto 18px; } }

/* ---------- Textbook trust ---------- */
.mtwp-trust{ text-align:center; }
.mtwp-trust-books{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin:26px 0 24px; }
.mtwp-book-badge{
	background:#fff; border:2px solid var(--mt-line); border-radius:14px; padding:15px 20px;
	display:flex; align-items:center; gap:11px; box-shadow:var(--mt-shadow); min-width:200px;
}
.mtwp-book-badge > div:last-child{ flex:1 1 0%; min-width:0; }
.mtwp-book-badge .mtwp-check{
	width:26px; height:26px; border-radius:50%; background:var(--mt-green); color:#fff; display:flex;
	align-items:center; justify-content:center; flex:none; font-weight:800; font-size:.85rem;
}
.mtwp-book-badge b{ display:block; font-family:var(--mt-display); font-size:.9rem; color:var(--mt-navy); }
.mtwp-book-badge span{ font-size:.72rem; color:var(--mt-ink-soft); }
.mtwp-trust-quote{
	max-width:600px; margin:0 auto; font-family:var(--mt-display); font-weight:700; font-size:1.05rem;
	color:var(--mt-navy); line-height:1.5;
}
.mtwp-trust-quote span{ color:var(--mt-green-deep); }

/* ---------- Back matter grid — small, uncropped, never downloadable ---------- */
.mtwp-matter-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:14px; max-width:700px; margin:0 auto;
}
.mtwp-matter-card{
	border-radius:12px; overflow:hidden; box-shadow:var(--mt-shadow); border:1px solid var(--mt-line); background:#fff;
}
.mtwp-matter-card .mtwp-shot{
	aspect-ratio:650/918; max-height:150px; background-color:#fff;
}
.mtwp-matter-card p{
	padding:8px 10px; font-family:var(--mt-display); font-weight:700; font-size:.7rem; color:var(--mt-navy);
	text-align:center; margin:0; line-height:1.3;
}

/* ---------- Classroom strip ---------- */
.mtwp-classroom-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mtwp-cs-item{ text-align:center; padding:6px; }
.mtwp-cs-item .mtwp-cs-ic{ font-size:1.6rem; margin-bottom:8px; }
.mtwp-cs-item h4{ font-size:.98rem; margin:0 0 5px; color:var(--mt-navy); }
.mtwp-cs-item p{ color:var(--mt-ink-soft); font-size:.85rem; margin:0; }
@media (max-width:760px){ .mtwp-classroom-strip{ grid-template-columns:1fr; } }

/* ---------- Order / final CTA ---------- */
.mtwp-order{
	position:relative; overflow:hidden; color:#fff; text-align:center;
	background:linear-gradient(120deg, #0A7A56 0%, #1B8A8A 30%, #213A47 62%, #7A4A6B 85%, #B84A2A 100%);
	border-radius:26px; padding:52px 26px; margin:0 20px;
}
.mtwp-order h2{ color:#fff; font-size:clamp(1.4rem,3vw,2rem); margin:0 0 12px; }
.mtwp-order > p{ color:rgba(255,255,255,.88); max-width:540px; margin:0 auto 24px; font-size:.98rem; }
.mtwp-order-form-wrap{ max-width:480px; margin:0 auto; text-align:left; }

/* Order form (shared shortcode markup) restyled for the dark gradient card */
.mtwp-order .mt-order-form{ background:#fff; border-radius:16px; padding:24px; box-shadow:var(--mt-shadow-lg); }
.mtwp-order .mt-order-form label{ font-family:var(--mt-display); font-weight:700; font-size:.82rem; color:var(--mt-navy); display:block; margin:12px 0 5px; }
.mtwp-order .mt-order-form input[type="text"],
.mtwp-order .mt-order-form input[type="email"],
.mtwp-order .mt-order-form input[type="tel"],
.mtwp-order .mt-order-form textarea{
	width:100%; padding:10px 12px; border:1.5px solid var(--mt-line); border-radius:10px; font-family:var(--mt-sans);
	font-size:.92rem; color:var(--mt-navy);
}
.mtwp-order .mt-field-note{ font-size:.76rem; color:var(--mt-ink-soft); margin:4px 0 0; }
.mtwp-order .mt-order-format{ border:none; padding:0; margin:16px 0 0; }
.mtwp-order .mt-order-format legend{ font-family:var(--mt-display); font-weight:700; font-size:.82rem; color:var(--mt-navy); padding:0 0 6px; }
.mtwp-order .mt-radio{
	display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid var(--mt-line); border-radius:10px;
	margin-bottom:8px; font-size:.86rem; color:var(--mt-navy); cursor:pointer;
}
.mtwp-order .mt-radio .mt-price{ margin-left:auto; font-family:var(--mt-display); font-weight:800; color:var(--mt-green-deep); }
.mtwp-order .mt-order-address{ margin-top:10px; }
.mtwp-order .mt-hp{ position:absolute; left:-9999px; }
.mtwp-order button[type="submit"]{
	width:100%; margin-top:18px; background:var(--mt-gold); color:var(--mt-navy); border:none; border-radius:999px;
	padding:14px; font-family:var(--mt-display); font-weight:800; font-size:.95rem; cursor:pointer;
}
.mtwp-order button[type="submit"]:hover{ background:#F0BB58; }
.mtwp-order .mt-form-error{ background:#FBE4E0; color:#8A2E1D; padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:12px; }

/* Payment confirmation box, reused inside the gradient card */
.mtwp-order .mt-payment-box{ background:#fff; border-radius:16px; padding:26px; box-shadow:var(--mt-shadow-lg); text-align:left; }
.mtwp-order .mt-payment-check{
	width:44px; height:44px; border-radius:50%; background:var(--mt-green); color:#fff; display:flex;
	align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:12px;
}
.mtwp-order .mt-payment-box h3{ color:var(--mt-navy); margin:0 0 12px; }
.mtwp-order .mt-rib-card{ background:var(--mt-cream); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.mtwp-order .mt-rib-card p{ margin:4px 0; font-size:.88rem; color:var(--mt-navy); }
.mtwp-order .mt-payment-instr{ font-size:.88rem; color:var(--mt-ink-soft); margin-bottom:16px; }
.mtwp-order .mt-btn.mt-btn-gold{
	display:inline-flex; background:var(--mt-gold); color:var(--mt-navy); font-family:var(--mt-display); font-weight:800;
	padding:12px 22px; border-radius:999px;
}

.mtwp-back-link{ text-align:center; color:var(--mt-ink-soft); font-size:.85rem; margin-top:18px; }
.mtwp-back-link a{ color:var(--mt-green-deep); font-weight:700; }

.mtwp-footer-note{ text-align:center; padding:24px 20px 0; color:var(--mt-ink-soft); font-size:.78rem; }