/* Checkout, receipt and My Account pages (templates/shop.php) */
body.tag-shop { margin: 0; background: #121010; color: #1d1b1a; font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ts-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: #0c0b0b; border-bottom: 1px solid #2a2524; }
.ts-logo img { height: 38px; display: block; }
.ts-back { color: #d8d2cf; text-decoration: none; font-size: 14px; } .ts-back:hover { color: #fff; }
.ts-main { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; }
.ts-h1 { color: #fff; font-size: clamp(22px, 4vw, 30px); margin: 4px 0 10px; text-align: center; }
.ts-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 0; margin: 0 0 20px; color: #cfc8c5; font-size: 13.5px; }
.ts-card { background: #fff; border-radius: 18px; padding: clamp(18px, 4vw, 34px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ts-help { text-align: center; color: #8d8582; font-size: 13px; margin-top: 18px; }
/* WooCommerce forms, calmer and bigger */
.tag-shop .woocommerce { font-size: 15px; }
.tag-shop .woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.tag-shop .woocommerce form .form-row label { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; display: block; }
.tag-shop .woocommerce input.input-text, .tag-shop .woocommerce select, .tag-shop .woocommerce textarea, .tag-shop .select2-container .select2-selection--single {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 14px; border: 1.5px solid #dcd6d3; border-radius: 10px; font-size: 15px; background: #fff; color: #1d1b1a; }
.tag-shop .select2-container .select2-selection--single .select2-selection__rendered { line-height: 22px; padding: 0; }
.tag-shop .select2-container .select2-selection--single .select2-selection__arrow { top: 10px; right: 8px; }
.tag-shop .woocommerce input.input-text:focus { border-color: #992035; outline: none; box-shadow: 0 0 0 3px rgba(153,32,53,.15); }
.tag-shop .woocommerce .col2-set { width: 100%; float: none; } .tag-shop .woocommerce .col2-set .col-1, .tag-shop .woocommerce .col2-set .col-2 { width: 100%; float: none; }
.tag-shop .woocommerce .woocommerce-billing-fields h3, .tag-shop #order_review_heading { font-size: 18px; margin: 0 0 14px; }
.tag-shop .woocommerce .woocommerce-account-fields { margin-top: 4px; }
.tag-shop .woocommerce table.shop_table { border-radius: 12px; border-color: #ece7e4; }
.tag-shop .woocommerce #payment { background: #f7f4f2; border-radius: 14px; }
.tag-shop .woocommerce #payment ul.payment_methods { border-bottom-color: #ece7e4; }
.tag-shop .woocommerce #payment div.payment_box { background: #fff; color: #3a3533; border-radius: 10px; } .tag-shop .woocommerce #payment div.payment_box::before { border-bottom-color: #fff; }
.tag-shop .woocommerce button.button, .tag-shop .woocommerce a.button, .tag-shop .woocommerce #place_order {
  background: #992035; color: #fff; border-radius: 12px; padding: 15px 22px; font-size: 16px; font-weight: 600; border: none; }
.tag-shop .woocommerce #place_order { width: 100%; }
.tag-shop .woocommerce button.button:hover, .tag-shop .woocommerce #place_order:hover { background: #7f1a2c; color: #fff; }
.tag-shop .woocommerce-info, .tag-shop .woocommerce-message, .tag-shop .woocommerce-error { border-radius: 12px; border-top-color: #992035; background: #f7f4f2; color: #3a3533; }
.tag-shop .woocommerce-info::before, .tag-shop .woocommerce-message::before { color: #992035; }
.tag-shop .woocommerce a { color: #992035; }
/* Two columns on wide screens: details left, order and payment right */
@media (min-width: 860px) {
  .ts-main:not(.ts-account) { max-width: 1040px; }
  .tag-shop form.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
  .tag-shop form.checkout > .woocommerce-NoticeGroup, .tag-shop form.checkout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .tag-shop form.checkout #customer_details { grid-column: 1; }
  .tag-shop form.checkout #order_review_heading, .tag-shop form.checkout #order_review { grid-column: 2; }
  .tag-shop form.checkout #order_review_heading { grid-row: 1; margin-top: 0; } .tag-shop form.checkout #order_review { grid-row: 2; }
  .tag-shop form.checkout #customer_details { grid-row: 1 / span 2; }
}
/* My Account */
.ts-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.ts-account .woocommerce-MyAccount-navigation li a { display: block; padding: 8px 14px; border-radius: 99px; background: #f3efed; text-decoration: none; color: #3a3533; font-size: 14px; }
.ts-account .woocommerce-MyAccount-navigation li.is-active a { background: #992035; color: #fff; }
.ts-account .woocommerce-MyAccount-navigation, .ts-account .woocommerce-MyAccount-content { width: 100%; float: none; }

/* Phones: 16px text in form fields, so iPhones don't zoom in when a field is tapped */
@media (max-width: 800px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } }

.ts-ic { height: 1em; width: auto; fill: currentColor; vertical-align: -.125em; margin-right: 4px; }

/* Checkout, premium: quiet links instead of blue boxes, a calm order card, clear trust points */
.tag-shop .woocommerce-form-login-toggle, .tag-shop .woocommerce-form-coupon-toggle { display: inline-block; margin: 0 18px 14px 0; }
.tag-shop .woocommerce-form-login-toggle .wc-block-components-notice-banner, .tag-shop .woocommerce-form-coupon-toggle .wc-block-components-notice-banner {
  display: inline-flex; padding: 0; margin: 0; border: 0; background: none; color: #6f6865; font-size: 14px; gap: 0; }
.tag-shop .woocommerce-form-login-toggle .wc-block-components-notice-banner > svg, .tag-shop .woocommerce-form-coupon-toggle .wc-block-components-notice-banner > svg { display: none; }
.tag-shop .woocommerce-form-login-toggle a, .tag-shop .woocommerce-form-coupon-toggle a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(153,32,53,.35); }
.tag-shop .wc-block-components-notice-banner { border-radius: 12px; border: 1px solid #ecd9dd; background: #fbf4f5; color: #3a3533; }
.tag-shop .wc-block-components-notice-banner > svg { background: #992035 !important; fill: #fff; border-radius: 50%; }
.tag-shop .woocommerce .woocommerce-billing-fields h3, .tag-shop #order_review_heading { font-size: 19px; letter-spacing: -.02em; }
.tag-shop form.checkout #order_review { border: 1px solid #efe6e2; border-radius: 16px; padding: 18px; background: linear-gradient(180deg, #fffdfc, #faf6f4); }
.tag-shop .woocommerce table.shop_table { border: 0; margin: 0 0 16px; }
.tag-shop .woocommerce table.shop_table th, .tag-shop .woocommerce table.shop_table td { border-color: #efe6e2; padding: 12px 6px; }
.tag-shop .woocommerce table.shop_table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #8c7f7b; }
.tag-shop .woocommerce table.shop_table .order-total th, .tag-shop .woocommerce table.shop_table .order-total td { font-size: 18px; color: #1d1215; border-top: 1.5px solid #e6d9d4; }
.tag-shop .woocommerce table.shop_table .product-name { font-weight: 600; }
.ts-perks { display: grid; gap: 8px; margin: 0 0 14px; }
.ts-perks div { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; font-size: 13.5px; line-height: 1.4; }
.ts-perks div::before { content: ""; grid-row: span 2; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #992035 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ts-perks b { color: #1d1215; } .ts-perks span { color: #7a706c; }
.ts-usd { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #efe6e2; font-size: 13.5px; line-height: 1.55; color: #5a514e; }
.ts-usd b { color: #1d1215; }
.tag-shop .woocommerce #payment { background: #fff; border: 1px solid #efe6e2; }
.tag-shop .woocommerce #place_order { background: linear-gradient(135deg, #b3283f, #7d1a2c); box-shadow: 0 12px 26px rgba(153,32,53,.32); padding: 17px 22px; font-size: 16.5px; }
.tag-shop .woocommerce-privacy-policy-text { font-size: 12.5px; color: #8c837f; }
.ts-card { border-radius: 22px; }

.ts-help a { color: #d8a3ad; text-decoration: none; font-weight: 600; } .ts-help a:hover { color: #fff; }

/* Forgot / new password: a narrow centred card with an icon, big title and full-width field */
.ts-pass .ts-main { max-width: 480px; padding-top: 48px; }
.ts-pass .ts-card { padding: 38px 34px 30px; border-radius: 24px; }
.ts-pass-head { text-align: center; margin-bottom: 22px; }
.ts-pass-ic { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #b3283f, #7d1a2c); box-shadow: 0 12px 26px rgba(153,32,53,.35); }
.ts-pass-ic svg { width: 30px; height: 30px; }
.ts-pass-head h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.03em; color: #1d1215; }
.ts-pass-head p { margin: 0; color: #7a706c; font-size: 15px; line-height: 1.6; }
.ts-pass .woocommerce-ResetPassword > p:first-of-type:not(.form-row), .ts-pass .woocommerce-message, .ts-pass .wc-block-components-notice-banner.is-success { display: none; } /* WooCommerce's own sentence: replaced by the heading above */
.ts-pass .woocommerce form .form-row { width: 100% !important; float: none !important; }
.ts-pass .woocommerce form .form-row input.input-text { min-height: 52px; font-size: 16px; border-radius: 12px; }
.ts-pass .woocommerce button.button { width: 100%; padding: 16px; font-size: 16px; border-radius: 12px; background: linear-gradient(135deg, #b3283f, #7d1a2c); box-shadow: 0 12px 26px rgba(153,32,53,.3); margin-top: 6px; }
.ts-pass-back { text-align: center; margin: 18px 0 0; font-size: 14px; }
.ts-pass-back a { color: #992035; font-weight: 600; text-decoration: none; }
.ts-pass .woocommerce-password-strength, .ts-pass .woocommerce-password-hint { font-size: 13px; border-radius: 10px; margin-top: 8px; }
@media (max-width: 520px) { .ts-pass .ts-main { padding-top: 24px; } .ts-pass .ts-card { padding: 28px 20px 24px; } }
.ts-pass .woocommerce > p:not(.ts-pass-back) { display: none; } /* WooCommerce's own "email sent" sentence: the heading says it */
/* "You're getting" at the top of checkout */
.ts-getting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #f7efe9; border: 1px solid #ecdcd2; }
.ts-getting > span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a6f66; }
.ts-getting b { font-size: 15.5px; color: #2a1a1c; }
.ts-getting em { font-style: normal; font-size: 18px; font-weight: 700; color: #8e1212; white-space: nowrap; }
.woocommerce-checkout .description { font-size: 12.5px; color: #7a6a6c; margin-top: 4px; display: block !important; }
/* Subtle calligraphy behind checkout and account pages */
@font-face { font-family: "KFGQPC Uthmanic Hafs"; src: url("fonts/kfgqpc-hafs.woff2") format("woff2"); font-display: swap; }
body.tag-shop::before, body.tag-shop::after { position: fixed; z-index: -1; pointer-events: none; font-family: "KFGQPC Uthmanic Hafs", serif; direction: rtl; line-height: 1.3; white-space: nowrap; color: #e4adb6; opacity: .05; }
body.tag-shop::before { content: "ٱقْرَأْ بِٱسْمِ رَبِّكَ"; top: 4vh; right: -3vw; font-size: clamp(110px, 15vw, 250px); }
body.tag-shop::after { content: "وَقُل رَّبِّ زِدْنِى عِلْمًا"; bottom: -3vh; left: -5vw; font-size: clamp(80px, 10vw, 180px); transform: rotate(-5deg); }

/* Premium white: a glossy card with a warm edge, gold-wine accents (v2.34) */
.ts-trust { gap: 8px; }
.ts-trust li { display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(229,176,185,.22); color: #f1e4e0; font-weight: 500; }
.ts-trust li .ts-ic { fill: #e4adb6; }
.ts-card { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fffbf8 60%, #fdf6f2 100%); border: 1px solid rgba(229,176,185,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 6px rgba(229,176,185,.07), inset 0 1px 0 #fff; }
.ts-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #7d1a2c, #cb6374, #f3d2b8, #cb6374, #7d1a2c); }
.ts-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none; background: radial-gradient(80% 100% at 85% 0%, rgba(229,176,185,.18), transparent 70%); }
.ts-card > * { position: relative; z-index: 1; }
.ts-getting { background: linear-gradient(135deg, #fbefe9, #f6e3dc); border: 1px solid #ecd2c6; box-shadow: inset 4px 0 0 #b3283f, 0 6px 18px rgba(153,32,53,.08); }
.ts-getting em { font-size: 20px; background: linear-gradient(180deg, #b3283f, #6e1424); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag-shop .woocommerce input.input-text, .tag-shop .woocommerce select, .tag-shop .select2-container .select2-selection--single { background: #fffdfc; border-color: #e6dcd7; box-shadow: inset 0 1px 2px rgba(60,30,30,.05); transition: border-color .15s, box-shadow .15s; }
.tag-shop .woocommerce input.input-text:hover { border-color: #d6c4bd; }
.tag-shop .woocommerce input.input-text:focus { border-color: #b3283f; box-shadow: 0 0 0 4px rgba(179,40,63,.12); background: #fff; }
.tag-shop form.checkout #order_review { background: linear-gradient(180deg, #ffffff, #fbf4f1); border-color: #eedfd9; box-shadow: 0 10px 30px rgba(120,40,50,.08); }
.tag-shop .woocommerce #place_order { position: relative; overflow: hidden; background: linear-gradient(135deg, #c92f48, #8e1a2e 60%, #6e1424); box-shadow: 0 14px 30px rgba(153,32,53,.38), inset 0 1px 0 rgba(255,255,255,.3); letter-spacing: .01em; }
.tag-shop .woocommerce #place_order::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation: tsShine 3.2s ease-in-out infinite; }
@keyframes tsShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.ts-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: #6f6461; }
.ts-secure svg { width: 12px; height: 12px; fill: #2f8a5b; }
/* Under the card: proof, review, guarantee, payment methods */
.ts-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 12px; }
.ts-stat { text-align: center; padding: 14px 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(229,176,185,.18); }
.ts-stat b { display: block; color: #fff; font-size: 19px; } .ts-stat span { color: #b9aca8; font-size: 12.5px; }
.ts-stars { font-style: normal; color: #f5c451; letter-spacing: 1px; font-size: .8em; }
.ts-quote { margin: 0 0 12px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(229,176,185,.18); color: #efe5e1; }
.ts-quote p { margin: 6px 0 8px; font-size: 14.5px; line-height: 1.6; font-style: italic; } .ts-quote cite { font-style: normal; font-size: 12.5px; color: #b9aca8; }
.ts-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-assure div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.ts-assure b { display: block; color: #fff; font-size: 14px; margin-bottom: 3px; } .ts-assure span { color: #b9aca8; font-size: 12.5px; line-height: 1.45; }
.ts-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; color: #9d918d; font-size: 12.5px; }
.ts-pay span { margin-right: 4px; } .ts-pay em { font-style: normal; font-weight: 600; color: #e9dcd8; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
@media (max-width: 640px) { .ts-proof { grid-template-columns: repeat(3, 1fr); gap: 6px; } .ts-stat b { font-size: 15px; } .ts-stat span { font-size: 11px; } .ts-assure { grid-template-columns: 1fr; } .ts-trust li { font-size: 12.5px; padding: 5px 10px; } }
.tag-shop #payment .place-order { display: flex; flex-wrap: wrap; }
.tag-shop #payment .place-order > * { flex-basis: 100%; }
.ts-secure { order: 10; }
.tag-shop .woocommerce form .form-row .description { position: static !important; background: none !important; color: #7a6a6c !important; padding: 4px 0 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.tag-shop .woocommerce form .form-row .description::before { display: none !important; }
/* account menu pills sit on one line; with a single page there is no menu at all */
.ts-account .woocommerce-MyAccount-navigation ul { align-items: center; }
.ts-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; line-height: 1.2; }
.ts-account .woocommerce-MyAccount-navigation li a { text-decoration: none !important; }
.ts-account .woocommerce-MyAccount-navigation:has(li:only-child) { display: none; }
.ts-acc-title { font-size: 20px; font-weight: 600; margin: 0 0 16px; }

/* The steps on the checkout page */
.ts-steps { list-style: none; counter-reset: ts; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; }
.ts-steps li { counter-increment: ts; display: grid; gap: 1px; padding: 10px 10px 10px 42px; position: relative; border-radius: 12px; background: #fff; border: 1px solid #ecdcd2; font-size: 13px; color: #2a1a1c; }
.ts-steps li::before { content: counter(ts); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, #c2405a, #8e2236); }
.ts-steps small { color: #8a6f66; font-size: 11.5px; line-height: 1.35; }
.ts-after { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #5d4a45; } .ts-after a { color: #b2304b; font-weight: 600; }
@media (max-width: 560px) { .ts-steps { grid-template-columns: 1fr; } }
/* Phones: the card at the top already names the course and its price, so the order table keeps only the total
   (plus any delivery or discount line), and the three promises sit on one line. Payment comes up by about half a screen. */
@media (max-width: 859px) {
  .tag-shop #order_review_heading, .tag-shop .woocommerce-checkout-review-order-table thead,
  .tag-shop .woocommerce-checkout-review-order-table .cart_item, .tag-shop .woocommerce-checkout-review-order-table .cart-subtotal { display: none; }
  .ts-perks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .ts-perks div { grid-template-columns: 18px auto; column-gap: 5px; font-size: 12.5px; white-space: nowrap; }
  .ts-perks div::before { grid-row: auto; width: 15px; height: 15px; background-size: 9px; }
  .ts-perks span { display: none; }
}