/* =========================================================================
   MSC Reunion — মিরপুর সাইন্স কলেজ পুনর্মিলনী ২০২৬
   মূল Lovable/Tailwind ডিজাইন হুবহু প্লেইন CSS-এ পোর্ট করা।
   সব ক্লাস "msc-" প্রিফিক্সড, যাতে থিম/অন্য প্লাগিনের সাথে সংঘর্ষ না হয়।
   ========================================================================= */

:root {
  --msc-radius: 0.875rem;
  --msc-background: oklch(0.975 0.02 80);
  --msc-foreground: oklch(0.22 0.03 40);
  --msc-card: oklch(0.99 0.012 85);
  --msc-card-foreground: oklch(0.22 0.03 40);
  --msc-primary: oklch(0.42 0.15 20);            /* deep maroon */
  --msc-primary-foreground: oklch(0.98 0.02 85);
  --msc-secondary: oklch(0.94 0.04 80);
  --msc-secondary-foreground: oklch(0.32 0.08 30);
  --msc-muted: oklch(0.94 0.03 85);
  --msc-muted-foreground: oklch(0.45 0.04 50);
  --msc-accent: oklch(0.78 0.14 75);             /* warm gold */
  --msc-accent-foreground: oklch(0.25 0.05 40);
  --msc-destructive: oklch(0.577 0.245 27.325);
  --msc-border: oklch(0.88 0.04 75);
  --msc-input: oklch(0.92 0.03 80);
  --msc-ring: oklch(0.78 0.14 75);

  --msc-gold: oklch(0.78 0.14 75);
  --msc-gold-foreground: oklch(0.25 0.05 40);
  --msc-maroon: oklch(0.42 0.15 20);
  --msc-forest: oklch(0.42 0.1 150);
  --msc-cream: oklch(0.975 0.02 80);

  --msc-gradient-hero:
    radial-gradient(1200px 600px at 15% 10%, oklch(0.9 0.09 70 / 0.55), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, oklch(0.55 0.16 25 / 0.35), transparent 60%),
    linear-gradient(180deg, oklch(0.98 0.02 85), oklch(0.94 0.05 80));
  --msc-gradient-gold: linear-gradient(135deg, oklch(0.82 0.14 78), oklch(0.68 0.16 55));
  --msc-shadow-warm: 0 20px 60px -20px oklch(0.42 0.15 20 / 0.35);
  --msc-shadow-soft: 0 8px 24px -12px oklch(0.42 0.15 20 / 0.25);

  --msc-font-sans: "Noto Sans Bengali", ui-sans-serif, system-ui, sans-serif;
  --msc-font-display: "Noto Serif Bengali", "Noto Sans Bengali", ui-serif, serif;
}

/* বেসলাইন — শুধু আমাদের কন্টেইনারের ভেতরে, যাতে অ্যাডমিন/অন্য থিম অংশ প্রভাবিত না হয় */
.msc-root {
  background-color: var(--msc-background);
  color: var(--msc-foreground);
  font-family: var(--msc-font-sans);
  font-feature-settings: "kern", "liga";
  line-height: 1.5;
  font-size: 16px;
}
.msc-root *,
.msc-root *::before,
.msc-root *::after { box-sizing: border-box; }
.msc-root h1, .msc-root h2, .msc-root h3, .msc-root h4 {
  font-family: var(--msc-font-display);
  letter-spacing: -0.01em;
  margin: 0;
}
.msc-root p { margin: 0; }
.msc-root img { display: block; max-width: 100%; height: auto; }
.msc-root a { color: inherit; text-decoration: none; }

/* কন্টেইনার */
.msc-container { margin-inline: auto; padding-inline: 1rem; width: 100%; }
.msc-max-6xl { max-width: 72rem; }
.msc-max-4xl { max-width: 56rem; }
.msc-max-3xl { max-width: 48rem; }

/* ---- বাটন ---- */
.msc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--msc-font-sans); font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: 9999px; line-height: 1;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
  white-space: nowrap;
}
.msc-btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.msc-btn-md { padding: .65rem 1.25rem; font-size: .95rem; }
.msc-btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.msc-btn-primary { background: var(--msc-primary); color: var(--msc-primary-foreground); box-shadow: var(--msc-shadow-warm); }
.msc-btn-primary:hover { background: oklch(0.42 0.15 20 / 0.9); }
.msc-btn-outline { border-color: oklch(0.42 0.15 20 / 0.3); background: rgba(255,255,255,.6); color: var(--msc-primary); }
.msc-btn-outline:hover { background: #fff; }
.msc-btn-full { width: 100%; }
.msc-btn .msc-ic { width: 1.15em; height: 1.15em; }

.msc-icon { width: 1rem; height: 1rem; flex: none; }

/* =======================  নেভিগেশন  ======================= */
.msc-nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid oklch(0.88 0.04 75 / 0.6);
  background: oklch(0.975 0.02 80 / 0.85);
  backdrop-filter: blur(8px);
}
.msc-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .75rem;
}
.msc-brand { display: flex; align-items: center; gap: .5rem; }
.msc-brand-badge {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem;
  border-radius: 9999px; background: var(--msc-gradient-gold);
  color: var(--msc-gold-foreground); box-shadow: var(--msc-shadow-soft);
}
.msc-brand-badge .msc-icon { width: 1.25rem; height: 1.25rem; }
.msc-brand-text { font-family: var(--msc-font-display); font-size: 1rem; font-weight: 700; line-height: 1.15; color: var(--msc-primary); }
.msc-brand-sub { display: block; font-size: .75rem; font-weight: 500; color: var(--msc-muted-foreground); }
.msc-nav-links { display: none; gap: .25rem; }
.msc-nav-links a {
  border-radius: 9999px; padding: .5rem .75rem; font-size: .875rem; font-weight: 500;
  color: oklch(0.22 0.03 40 / 0.8); transition: background-color .2s, color .2s;
}
.msc-nav-links a:hover { background: oklch(0.78 0.14 75 / 0.4); color: var(--msc-primary); }

/* =======================  হিরো  ======================= */
.msc-hero { position: relative; overflow: hidden; background: var(--msc-gradient-hero); }
.msc-hero-glow {
  pointer-events: none; position: absolute; inset: 0; opacity: .4;
  background:
    radial-gradient(circle at 20% 80%, var(--msc-gold) 0, transparent 35%),
    radial-gradient(circle at 80% 10%, var(--msc-maroon) 0, transparent 40%);
}
.msc-hero-grid {
  position: relative; display: grid; gap: 2.5rem; padding-block: 4rem;
}
.msc-hero-copy { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; }
.msc-pill {
  display: inline-flex; width: fit-content; align-items: center; gap: .5rem;
  border: 1px solid oklch(0.42 0.15 20 / 0.25); background: rgba(255,255,255,.6);
  padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  color: var(--msc-primary); box-shadow: var(--msc-shadow-soft);
}
.msc-pill .msc-icon { width: .875rem; height: .875rem; }
.msc-hero-title {
  margin-top: 1.25rem; font-family: var(--msc-font-display);
  font-size: 2.25rem; font-weight: 800; line-height: 1.15; color: var(--msc-primary);
}
.msc-hero-title .msc-grad-gold {
  background: var(--msc-gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.msc-hero-lead { margin-top: 1.25rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: oklch(0.22 0.03 40 / 0.8); }
.msc-hero-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.msc-chip {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px;
  padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
}
.msc-chip-primary { background: oklch(0.42 0.15 20 / 0.1); color: var(--msc-primary); }
.msc-chip-accent  { background: oklch(0.78 0.14 75 / 0.4); color: var(--msc-accent-foreground); }
.msc-chip-forest  { background: oklch(0.42 0.1 150 / 0.15); color: var(--msc-forest); }

.msc-countdown { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 28rem; }
.msc-cd-cell {
  border-radius: 1rem; border: 1px solid oklch(0.42 0.15 20 / 0.15);
  background: oklch(0.99 0.012 85 / 0.9); padding: .75rem; text-align: center; box-shadow: var(--msc-shadow-soft);
}
.msc-cd-val { font-family: var(--msc-font-display); font-size: 1.5rem; font-weight: 800; color: var(--msc-primary); line-height: 1.1; }
.msc-cd-lbl { margin-top: .25rem; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--msc-muted-foreground); }

.msc-hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.msc-fee { font-size: .875rem; font-weight: 500; color: var(--msc-muted-foreground); }
.msc-fee b { color: var(--msc-primary); }

.msc-hero-media { position: relative; }
.msc-hero-media-glow { position: absolute; inset: -1rem; border-radius: 2rem; background: var(--msc-gradient-gold); opacity: .3; filter: blur(40px); }
.msc-hero-media-frame { position: relative; overflow: hidden; border-radius: 2rem; border: 1px solid oklch(0.42 0.15 20 / 0.15); box-shadow: var(--msc-shadow-warm); }
.msc-hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* =======================  সেকশন হেডিং  ======================= */
.msc-section { padding-block: 5rem; }
.msc-section-tint { background: oklch(0.94 0.04 80 / 0.5); }
.msc-eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: oklch(0.25 0.05 40 / 0.7); }
.msc-h2 { margin-top: .75rem; font-family: var(--msc-font-display); font-size: 1.875rem; font-weight: 700; color: var(--msc-primary); }
.msc-center { text-align: center; }
.msc-lead { margin-top: 1.25rem; font-size: 1rem; line-height: 1.7; color: oklch(0.22 0.03 40 / 0.8); }

/* =======================  এজেন্ডা  ======================= */
.msc-timeline { position: relative; margin-top: 3rem; border-left: 2px dashed oklch(0.42 0.15 20 / 0.3); padding-left: 1.5rem; list-style: none; }
.msc-timeline li { margin-bottom: 2rem; position: relative; }
.msc-timeline li:last-child { margin-bottom: 0; }
.msc-tl-dot {
  position: absolute; left: -1.7rem; top: .25rem; display: grid; place-items: center;
  height: 1.5rem; width: 1.5rem; border-radius: 9999px; background: var(--msc-gradient-gold);
  font-size: 10px; font-weight: 700; color: var(--msc-gold-foreground); box-shadow: var(--msc-shadow-soft);
}
.msc-tl-card { border-radius: 1rem; border: 1px solid var(--msc-border); background: var(--msc-card); padding: 1.25rem; box-shadow: var(--msc-shadow-soft); }
.msc-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.msc-tl-time { font-family: var(--msc-font-display); font-size: 1.125rem; font-weight: 700; color: var(--msc-primary); }
.msc-tl-title { font-size: 1rem; font-weight: 600; color: var(--msc-foreground); margin: 0; }
.msc-tl-desc { margin-top: .25rem; font-size: .875rem; color: var(--msc-muted-foreground); }

/* =======================  হাইলাইটস  ======================= */
.msc-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
.msc-grid-4 { grid-template-columns: 1fr; }
.msc-grid-2 { grid-template-columns: 1fr; }
.msc-feature {
  border-radius: 1rem; border: 1px solid var(--msc-border); background: var(--msc-card);
  padding: 1.5rem; box-shadow: var(--msc-shadow-soft); transition: transform .2s, box-shadow .2s;
}
.msc-feature:hover { transform: translateY(-.25rem); box-shadow: var(--msc-shadow-warm); }
.msc-feature-ic { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: .75rem; background: var(--msc-gradient-gold); color: var(--msc-gold-foreground); box-shadow: var(--msc-shadow-soft); }
.msc-feature-ic .msc-icon { width: 1.5rem; height: 1.5rem; }
.msc-feature h3 { margin-top: 1rem; font-family: var(--msc-font-display); font-size: 1.125rem; font-weight: 700; color: var(--msc-primary); }
.msc-feature p { margin-top: .5rem; font-size: .875rem; color: var(--msc-muted-foreground); }

/* =======================  ভেন্যু  ======================= */
.msc-venue-grid { display: grid; gap: 2rem; }
.msc-venue-lead { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: oklch(0.22 0.03 40 / 0.8); }
.msc-venue-facts { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.msc-fact { display: flex; align-items: center; gap: .75rem; border-radius: .75rem; border: 1px solid var(--msc-border); background: var(--msc-card); padding: .75rem; }
.msc-fact .msc-icon { color: var(--msc-primary); width: 1.25rem; height: 1.25rem; }
.msc-fact b { font-weight: 600; }
.msc-map { overflow: hidden; border-radius: 1rem; border: 1px solid var(--msc-border); box-shadow: var(--msc-shadow-warm); }
.msc-map iframe { display: block; height: 360px; width: 100%; border: 0; }

/* =======================  রেজিস্ট্রেশন  ======================= */
.msc-register { position: relative; overflow: hidden; padding-block: 5rem; }
.msc-register-bg { pointer-events: none; position: absolute; inset: 0; background: var(--msc-gradient-hero); opacity: .7; }
.msc-register-grid { position: relative; display: grid; gap: 2.5rem; }
.msc-pay-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.msc-pay-card { border-radius: 1rem; border: 1px solid oklch(0.42 0.15 20 / 0.2); background: var(--msc-card); padding: 1.25rem; box-shadow: var(--msc-shadow-soft); }
.msc-pay-top { display: flex; align-items: center; justify-content: space-between; }
.msc-pay-label { font-size: .875rem; font-weight: 600; color: var(--msc-muted-foreground); }
.msc-pay-amt { border-radius: 9999px; background: oklch(0.42 0.15 20 / 0.1); padding: .25rem .75rem; font-size: .75rem; font-weight: 700; color: var(--msc-primary); }
.msc-pay-num { margin-top: .5rem; font-family: var(--msc-font-display); font-size: 1.25rem; font-weight: 700; color: var(--msc-primary); }

.msc-form-card { border-radius: 1.5rem; border: 1px solid oklch(0.42 0.15 20 / 0.15); background: var(--msc-card); padding: 1.5rem; box-shadow: var(--msc-shadow-warm); }
.msc-form-grid { display: grid; gap: 1rem; }
.msc-field { display: flex; flex-direction: column; gap: .375rem; }
.msc-label { font-size: .875rem; font-weight: 500; color: oklch(0.22 0.03 40 / 0.9); }
.msc-input, .msc-textarea, .msc-select {
  width: 100%; font-family: var(--msc-font-sans); font-size: .95rem; color: var(--msc-foreground);
  background: var(--msc-background); border: 1px solid var(--msc-input); border-radius: .625rem;
  padding: .55rem .75rem; transition: border-color .2s, box-shadow .2s; line-height: 1.4;
}
.msc-input:focus, .msc-textarea:focus, .msc-select:focus {
  outline: none; border-color: var(--msc-ring); box-shadow: 0 0 0 3px oklch(0.78 0.14 75 / 0.35);
}
.msc-textarea { resize: vertical; min-height: 84px; }
.msc-err { font-size: .75rem; color: var(--msc-destructive); }
.msc-form-note { text-align: center; font-size: .75rem; color: var(--msc-muted-foreground); }

.msc-success { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 2.5rem; text-align: center; }
.msc-success .msc-icon { width: 3.5rem; height: 3.5rem; color: var(--msc-primary); }
.msc-success h3 { margin-top: 1rem; font-family: var(--msc-font-display); font-size: 1.5rem; font-weight: 700; color: var(--msc-primary); }
.msc-success p { margin-top: .5rem; max-width: 28rem; font-size: .875rem; color: var(--msc-muted-foreground); }
.msc-hidden { display: none !important; }

/* 3rd-party ফর্ম (WPForms / CF7 ইত্যাদি) embed করলে থিমের সাথে মানানসই ডিফল্ট স্টাইল।
   সংশ্লিষ্ট প্লাগিনের নিজস্ব CSS থাকলে সেটিই প্রাধান্য পাবে (এগুলো শুধু বেসলাইন)। */
.msc-form-embed { font-family: var(--msc-font-sans); color: var(--msc-foreground); }
.msc-form-embed label { font-weight: 500; color: oklch(0.22 0.03 40 / 0.9); }
.msc-form-embed input[type="text"],
.msc-form-embed input[type="email"],
.msc-form-embed input[type="tel"],
.msc-form-embed input[type="number"],
.msc-form-embed input[type="url"],
.msc-form-embed input[type="date"],
.msc-form-embed textarea,
.msc-form-embed select {
  width: 100%; font-family: var(--msc-font-sans); font-size: .95rem; color: var(--msc-foreground);
  background: var(--msc-background); border: 1px solid var(--msc-input); border-radius: .625rem;
  padding: .55rem .75rem;
}
.msc-form-embed input:focus,
.msc-form-embed textarea:focus,
.msc-form-embed select:focus {
  outline: none; border-color: var(--msc-ring); box-shadow: 0 0 0 3px oklch(0.78 0.14 75 / 0.35);
}
.msc-form-embed input[type="submit"],
.msc-form-embed button[type="submit"],
.msc-form-embed .wpforms-submit,
.msc-form-embed .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--msc-font-sans); font-weight: 600; cursor: pointer; border: 0;
  border-radius: 9999px; padding: .85rem 1.5rem; font-size: 1rem;
  background: var(--msc-primary); color: var(--msc-primary-foreground); box-shadow: var(--msc-shadow-warm);
}

/* =======================  FAQ + যোগাযোগ  ======================= */
.msc-faq-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
.msc-faq-card { border-radius: 1rem; border: 1px solid var(--msc-border); background: var(--msc-card); padding: 1.25rem; box-shadow: var(--msc-shadow-soft); }
.msc-faq-card h3 { font-family: var(--msc-font-display); font-size: 1rem; font-weight: 700; color: var(--msc-primary); }
.msc-faq-card p { margin-top: .5rem; font-size: .875rem; color: var(--msc-muted-foreground); }
.msc-contact { margin-top: 2.5rem; border-radius: 1.5rem; border: 1px solid oklch(0.42 0.15 20 / 0.15); background: var(--msc-gradient-gold); padding: 1.5rem; color: var(--msc-gold-foreground); box-shadow: var(--msc-shadow-warm); }
.msc-contact-grid { display: grid; gap: 1rem; }
.msc-contact h3 { font-family: var(--msc-font-display); font-size: 1.25rem; font-weight: 700; }
.msc-contact p { margin-top: .25rem; font-size: .875rem; opacity: .9; }
.msc-contact-links { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; font-weight: 600; }
.msc-contact-links a { display: inline-flex; align-items: center; gap: .5rem; }
.msc-contact-links a:hover { text-decoration: underline; }

/* =======================  ফুটার  ======================= */
.msc-footer { border-top: 1px solid var(--msc-border); background: oklch(0.94 0.04 80 / 0.6); }
.msc-footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; padding-block: 1.5rem; font-size: .875rem; color: var(--msc-muted-foreground); }
.msc-footer-inner a { font-weight: 500; color: var(--msc-primary); }
.msc-footer-inner a:hover { text-decoration: underline; }

/* =======================  টোস্ট (নোটিফিকেশন)  ======================= */
.msc-toast-wrap { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 24rem); }
.msc-toast { border-radius: .75rem; padding: .75rem 1rem; font-size: .9rem; font-weight: 500; box-shadow: var(--msc-shadow-warm); color: #fff; animation: msc-toast-in .25s ease; }
.msc-toast-success { background: oklch(0.42 0.1 150); }
.msc-toast-error { background: var(--msc-destructive); }
@keyframes msc-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* =======================  রেসপন্সিভ  ======================= */
@media (min-width: 640px) {
  .msc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .msc-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .msc-form-grid { grid-template-columns: repeat(2, 1fr); }
  .msc-field-full { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .msc-nav-links { display: flex; }
  .msc-hero-grid { grid-template-columns: 1.05fr 0.95fr; padding-block: 6rem; }
  .msc-hero-title { font-size: 3.75rem; }
  .msc-hero-lead { font-size: 1.125rem; }
  .msc-h2 { font-size: 2.25rem; }
  .msc-venue-grid { grid-template-columns: 1fr 1.1fr; }
  .msc-register-grid { grid-template-columns: 0.9fr 1.1fr; }
  .msc-faq-grid { grid-template-columns: repeat(2, 1fr); }
  .msc-contact-grid { grid-template-columns: 2fr 1fr; align-items: center; }
  .msc-footer-inner { flex-direction: row; }
  .msc-countdown { gap: .75rem; }
  .msc-cd-cell { padding: 1rem; }
  .msc-cd-val { font-size: 1.875rem; }
  .msc-form-card { padding: 2rem; }
  .msc-contact { padding: 2rem; }
}
@media (min-width: 1024px) {
  .msc-grid-4 { grid-template-columns: repeat(4, 1fr); }
}