/* =========================================================
   Naukri4Job — Reference-style pages (services, courses,
   cart, registration). Self-contained; loads after app.css.
   Palette: teal #134e4a · red #dc2626 · hero #eef2f7 · footer #1f2a37
   ========================================================= */

/* ---------- Hero band (big thin centred title) ---------- */
.pg-hero{ background:#eef2f7; padding:70px 20px; text-align:center; }
.pg-hero h1{ font-family:'Poppins',sans-serif; font-weight:300; color:#374151;
  font-size:clamp(2rem,5vw,4rem); line-height:1.1; margin:0; letter-spacing:-.01em; }
.pg-hero .crumb{ color:#6b7280; font-size:.9rem; margin-top:10px; }

/* ---------- Content wrapper ---------- */
.pg-wrap{ max-width:1180px; margin:0 auto; padding:56px 22px 64px; }
.pg-sec{ margin-bottom:40px; }
.pg-sec h2{ font-family:'Poppins',sans-serif; font-weight:700; color:#1f2937;
  font-size:clamp(1.5rem,3vw,2rem); margin:0 0 16px; }
.pg-sec p{ color:#6b7280; font-size:1.05rem; line-height:1.85; margin:0 0 14px; max-width:1000px; }
.pg-sec p.dark{ color:#374151; }
.pg-list{ list-style:none; margin:0; padding:0; }
.pg-list li{ color:#4b5563; font-size:1.05rem; line-height:1.6; padding:9px 0; }

/* ---------- Price + Add to cart ---------- */
.pg-divider{ border:0; border-top:1px solid #e5e7eb; margin:36px 0 26px; }
.pg-price{ font-family:'Poppins',sans-serif; font-weight:700; color:#111827;
  font-size:clamp(1.8rem,4vw,2.3rem); margin:0 0 22px; }
.pg-price .r{ font-weight:600; }
.btn-teal{ display:inline-flex; align-items:center; gap:10px; background:#134e4a; color:#fff;
  border:none; font-weight:600; font-size:1.02rem; padding:15px 30px; border-radius:999px;
  cursor:pointer; text-decoration:none; transition:.15s; font-family:inherit; }
.btn-teal:hover{ background:#0d3b38; }
.btn-outline-teal{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:#134e4a; border:1.6px solid #134e4a; font-weight:600; font-size:1rem;
  padding:13px 26px; border-radius:999px; cursor:pointer; text-decoration:none; transition:.15s; }
.btn-outline-teal:hover{ background:#134e4a; color:#fff; }
.btn-red{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#dc2626;
  color:#fff; border:none; font-weight:700; font-size:1.02rem; padding:15px 34px; border-radius:999px;
  cursor:pointer; text-decoration:none; transition:.15s; font-family:inherit; }
.btn-red:hover{ background:#b91c1c; }
.pg-addon{ display:flex; gap:12px; align-items:flex-start; border:1.5px solid #e5e7eb;
  border-radius:12px; padding:14px 16px; margin:0 0 20px; max-width:520px; cursor:pointer; }
.pg-addon input{ margin-top:4px; }
.pg-addon b{ color:#111827; } .pg-addon small{ display:block; color:#6b7280; }

/* ---------- Cart (reference table) ---------- */
.cart-title{ text-align:center; font-family:'Poppins',sans-serif; font-weight:300;
  font-size:clamp(2.2rem,5vw,3.4rem); color:#374151; margin:10px 0 34px; }
.cart-tbl{ width:100%; border-collapse:collapse; }
.cart-tbl th{ text-align:left; font-weight:700; color:#111827; font-size:1.05rem;
  padding:14px 10px; border-bottom:1px solid #e5e7eb; }
.cart-tbl td{ padding:20px 10px; border-bottom:1px solid #eef0f2; color:#374151; font-size:1.05rem; vertical-align:middle; }
.cart-tbl th.r,.cart-tbl td.r{ text-align:right; }
.cart-tbl th.c,.cart-tbl td.c{ text-align:center; }
.cart-remove{ display:inline-grid; place-items:center; width:44px; height:44px; border:none;
  background:#e23744; color:#fff; border-radius:10px; cursor:pointer; }
.cart-remove:hover{ background:#c92e3a; }
.cart-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:24px 10px; }
.cart-total{ font-size:1.4rem; font-weight:700; color:#111827; }
.cart-empty{ text-align:center; color:#6b7280; padding:40px 0; }

/* ---------- Registration (two-column, reference) ---------- */
.reg-head{ text-align:center; max-width:760px; margin:0 auto 30px; }
.reg-head h1{ font-family:'Poppins',sans-serif; font-weight:300; color:#374151;
  font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.15; margin:0 0 12px; }
.reg-head p{ color:#6b7280; font-size:1.08rem; margin:0; }
.reg-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:34px; align-items:start; max-width:1120px; margin:0 auto; }
.reg-card{ background:#fff; border:1px solid #edf0f3; border-radius:16px; box-shadow:0 20px 50px -34px rgba(16,24,40,.4); padding:30px; }
.reg-row{ display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center; margin-bottom:16px; }
.reg-row > label{ font-weight:600; color:#374151; font-size:.95rem; }
.reg-row .req{ color:#dc2626; }
.reg-row input,.reg-row select{ width:100%; padding:12px 14px; border:1.5px solid #e2e6ea;
  border-radius:999px; font:inherit; color:#1f2937; background:#fff; }
.reg-row textarea{ width:100%; padding:12px 14px; border:1.5px solid #e2e6ea; border-radius:16px; font:inherit; }
.reg-row input:focus,.reg-row select:focus,.reg-row textarea:focus{ outline:none; border-color:#134e4a; box-shadow:0 0 0 3px rgba(19,78,74,.12); }
.reg-exp{ display:flex; gap:18px; align-items:center; }
.reg-exp label{ display:flex; align-items:center; gap:6px; color:#4b5563; font-weight:500; }
.reg-exp input[type=number]{ max-width:90px; }
.reg-file{ display:flex; align-items:center; gap:10px; }
.reg-consent{ display:flex; gap:10px; align-items:flex-start; color:#6b7280; font-size:.86rem; margin:6px 0 18px; }
.reg-consent input{ margin-top:3px; }
/* promo card */
.promo{ background:linear-gradient(180deg,#eef6ff,#f7fbff); border:1px solid #e3eefb; border-radius:18px; padding:28px 24px; text-align:center; }
.promo h3{ font-family:'Poppins',sans-serif; color:#0f172a; font-size:1.5rem; margin:0 0 4px; }
.promo .q{ color:#111827; font-weight:600; margin:0 0 16px; }
.promo .q .accent{ color:#dc2626; }
.promo-shot{ position:relative; max-width:280px; margin:0 auto 16px; }
.promo-shot img{ width:100%; border-radius:12px; border:1px solid #e5e7eb; display:block; }
.promo-metrics{ display:flex; justify-content:center; gap:22px; margin:10px 0 16px; font-size:.9rem; color:#374151; }
.promo-metrics b{ display:block; }
.promo-metrics .good{ color:#059669; } .promo-metrics .avg{ color:#d97706; }
.promo small{ display:block; color:#6b7280; margin-top:8px; }

/* ---------- Reference footer (4 dark columns) ---------- */
.ft{ background:#1f2a37; color:#cbd5e1; padding:52px 22px 30px; }
.ft-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ft-grid h4{ color:#fff; font-family:'Poppins',sans-serif; font-size:1.15rem; margin:0 0 16px; }
.ft-grid a{ display:block; color:#cbd5e1; text-decoration:none; padding:7px 0; font-size:.95rem; }
.ft-grid a:hover{ color:#fff; }
.ft-bottom{ max-width:1180px; margin:34px auto 0; padding-top:20px; border-top:1px solid #334155;
  color:#94a3b8; font-size:.85rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .reg-grid{ grid-template-columns:1fr; }
  .ft-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .pg-hero{ padding:48px 18px; }
  .pg-wrap{ padding:38px 18px 48px; }
  .reg-row{ grid-template-columns:1fr; gap:6px; }
  .reg-row > label{ margin-bottom:2px; }
  .cart-tbl thead{ display:none; }
  .cart-tbl, .cart-tbl tbody, .cart-tbl tr, .cart-tbl td{ display:block; width:100%; }
  .cart-tbl tr{ border:1px solid #eef0f2; border-radius:12px; margin-bottom:14px; padding:8px 12px; }
  .cart-tbl td{ border:none; padding:8px 4px; display:flex; justify-content:space-between; }
  .cart-tbl td::before{ content:attr(data-l); font-weight:600; color:#6b7280; }
  .cart-tbl td.c::before{ content:""; }
  .cart-foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .ft-grid{ grid-template-columns:1fr; }
  .ft-bottom{ justify-content:center; text-align:center; }
}

/* ---------- Registration: phone + password toggle ---------- */
.reg-phone{ display:flex; gap:8px; align-items:center; }
.reg-phone .reg-dial{ flex:0 0 auto; width:auto; max-width:150px; padding-left:12px; padding-right:8px; }
.reg-phone input[type=tel]{ flex:1 1 auto; min-width:0; }
.reg-pass{ position:relative; display:flex; }
.reg-pass input{ width:100%; padding-right:46px; }
.reg-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none;
  cursor:pointer; color:#94a3b8; padding:6px; display:grid; place-items:center; line-height:0; }
.reg-eye:hover{ color:#134e4a; }
@media (max-width:640px){ .reg-phone .reg-dial{ max-width:120px; } }