/* =====================================================================
   Service pages — the light theme.

   The four service pages (Study in Malaysia, International Pathways,
   Student Placement, Career Support) were built as standalone dark
   "futuristic" pages: each carries its own <style> block, a violet palette
   (#A100FF / #5C1AC3 / #5B4DFF / #D06CFF), a particle canvas and a
   cursor-following glow. Every other page on the site is a white sheet
   built on the site.css tokens, so these four were the last dark corner.

   This file re-skins them WITHOUT rewriting their markup, which is why it
   works in three layers:

     1. Palette — the pages' own tokens (--blue, --bg, --border …) are
        re-pointed at the brand, so every var() accent follows for free.
     2. Classes — the pages' own classes (.spill, .step-card, .cbtn …) are
        restyled to the site's light equivalents.
     3. Inline declarations — the markup carries ~120 colour declarations
        inline (color:#fff, background:rgba(161,0,255,.06) …). An inline
        style can only be beaten with !important, and the selectors below
        are attribute-matched against the exact retired values. Delete this
        layer the day the markup is rewritten in the site's own language.

   Loaded only by the four service templates, AFTER their own <style>.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Palette — the pages' tokens, re-pointed at the brand
 * ------------------------------------------------------------------ */
:root {
  --blue:   #2559E8;                     /* --brand-600 */
  --purple: #1B3FAF;                     /* --brand-800 */
  --cyan:   #3B6BF0;                     /* --brand-500 */
  --orange: #FF171F;                     /* --accent-500 */
  --pink:   #FF171F;                     /* --accent-500 */
  --bg:     #FFFFFF;                     /* --surface */
  --bg2:    #F8FAFC;                     /* --surface-2 */
  --border: #E2E8F0;                     /* --line */
  --border-glow: rgba(37, 89, 232, 0.22);
}

html body {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #475569 !important;             /* --body */
}

/* the particle canvas and the cursor glow are the dark page's signature;
   on white they read as noise, so both are switched off rather than recoloured */
#ud-canvas,
#ud-glow { display: none !important; }

/* the page also restyles the scrollbar for a dark ground */
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

.ud-page { color: #475569; }

/* ------------------------------------------------------------------ *
 * 1b. The retired violet family
 *
 * The dark palette was written into the markup in two spacings
 * (rgba(161,0,255,.06) and rgba(161, 0, 255, 0.07)), so the attribute
 * matches are truncated before the first comma and listed for both. This
 * block sits ABOVE the class layer on purpose: an element that carries
 * both a violet inline value and one of the page's classes (a card, a
 * pill) keeps the class styling, because that is declared later.
 * ------------------------------------------------------------------ */
.ud-page [style*="background:rgba(161"],
.ud-page [style*="background: rgba(161"],
.ud-page [style*="background:rgba(92"],
.ud-page [style*="background: rgba(92"],
.ud-page [style*="background:rgba(91"],
.ud-page [style*="background: rgba(91"],
.ud-page [style*="background:rgba(208"],
.ud-page [style*="background: rgba(208"] { background-color: #F3F7FE !important; }

/* the same hues wherever they are only a hairline or a faint accent —
   border-color shows only if a border already exists, and nothing here
   touches type colour */
.ud-page [style*="161,0,255"], .ud-page [style*="161, 0, 255"],
.ud-page [style*="92,26,195"], .ud-page [style*="92, 26, 195"],
.ud-page [style*="91,77,255"], .ud-page [style*="91, 77, 255"],
.ud-page [style*="208,108,255"], .ud-page [style*="208, 108, 255"] {
  border-color: #DBE8FE !important;
}

/* the two gradient tiles the violet palette also drew */
.ud-page [style*="linear-gradient(135deg,rgba(161"],
.ud-page [style*="linear-gradient(135deg,#D06CFF"] {
  background-image: none !important;
  background-color: #F3F7FE !important;
}

/* ------------------------------------------------------------------ *
 * 2. Type
 *
 * Sizes, weights and line-heights are left exactly as the pages had them —
 * only the colours were written for a dark ground. (The headings and
 * paragraphs need !important because the markup sets them inline.)
 * ------------------------------------------------------------------ */
.ud-page h1,
.ud-page h2,
.ud-page h3,
.ud-page h4,
.ud-page h5,
.ud-page h6 {
  color: #0F172A !important;             /* --ink */
  text-shadow: none !important;
}
.ud-page p,
.ud-page li { color: #475569 !important; text-shadow: none !important; }
.ud-page .sec-head p { color: #5A6B80 !important; }   /* --muted */

/* the accent words in the headings keep a gradient — now the brand's */
.gtext {
  background: linear-gradient(135deg, #2559E8 0%, #1B3FAF 55%, #FF171F 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none !important;               /* was a violet glow */
}

/* ------------------------------------------------------------------ *
 * 3. Hero and its decorative layers
 * ------------------------------------------------------------------ */
/* 70vh of dark hero was atmosphere; on white it is just empty, so the
   height comes from the content with a normal section rhythm */
.service-hero {
  min-height: 0 !important;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
/* the violet grid becomes the site's blueprint, masked out as it falls */
.ud-grid {
  background-image:
    linear-gradient(rgba(37, 89, 232, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 89, 232, 0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(78% 62% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(78% 62% at 50% 0%, #000 0%, transparent 78%);
}
.hshape { opacity: 0.18; }
.hshape-1 { border-color: #DBE8FE; }
.hshape-2 { border-color: #FFDCDC; }

/* ------------------------------------------------------------------ *
 * 4. Sections
 * ------------------------------------------------------------------ */
.sp { padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; }
/* The markup flags its alternating bands with an inline dark wash
   (background:rgba(0,0,0,.2)). On a white page that band is --surface-2,
   which is exactly how the homepage alternates its own sections. */
.ud-page section[style*="rgba(0,0,0"] { background: #F8FAFC !important; }

/* ------------------------------------------------------------------ *
 * 5. Pills, cards, buttons
 * ------------------------------------------------------------------ */
.ud-page .spill {
  background: #F3F7FE !important;
  border: 1px solid #DBE8FE !important;
  color: #1B3FAF !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ud-page .spill i { color: #2559E8; }

/* Every card the four pages define. The dark set was translucent white over
   a near-black ground; on white the same treatment is invisible, so each one
   becomes the site's white card with a hairline and the soft shadow. */
.ud-page .gcard,
.ud-page .step-card,
.ud-page .dest-card,
.ud-page .ben-card,
.ud-page .path-card,
.ud-page .svc-card,
.ud-page .serv-card,
.ud-page .feat-card,
.ud-page .level-card,
.ud-page .subject-card,
.ud-page .benefit-card,
.ud-page .journey-card-sm,
.ud-page .stat-card-sm,
.ud-page .stat-box,
.ud-page .doc-item {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;      /* the dark cards were glass */
}
/* One hover for all of them: the page CSS gave each its own violet wash. */
.ud-page .gcard:hover,
.ud-page .step-card:hover,
.ud-page .dest-card:hover,
.ud-page .ben-card:hover,
.ud-page .path-card:hover,
.ud-page .svc-card:hover,
.ud-page .serv-card:hover,
.ud-page .feat-card:hover,
.ud-page .level-card:hover,
.ud-page .subject-card:hover,
.ud-page .benefit-card:hover,
.ud-page .journey-card-sm:hover,
.ud-page .stat-card-sm:hover,
.ud-page .stat-box:hover,
.ud-page .doc-item:hover {
  background: #FFFFFF !important;
  border-color: #A9C4F8 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
.ud-page .flag-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}
/* the number chips and icon tiles were violet-tinted circles */
.ud-page .step-num,
.ud-page .stat-num,
.ud-page .feat-icon {
  background-image: none !important;
  background-color: #F3F7FE !important;
  border: 1px solid #DBE8FE !important;
  color: #1B3FAF !important;
}

/* Buttons: the site's primary, then an outline for any second button in the
   same row — the pages pair "Apply" with "WhatsApp us". Uppercase and the
   shine sweep were part of the dark look. */
.ud-page .cbtn {
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent !important;
  border-radius: 10px;
  background: #2559E8 !important;
  color: #FFFFFF !important;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 20px rgba(37, 89, 232, 0.22);
}
.ud-page .cbtn::before { display: none; }
.ud-page .cbtn:hover {
  background: #1D4ED8 !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(37, 89, 232, 0.30);
  transform: translateY(-2px);
}
.ud-page .cbtn ~ .cbtn {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #1D4ED8 !important;
  box-shadow: none;
}
.ud-page .cbtn ~ .cbtn:hover {
  background: #F8FAFC !important;
  border-color: #A9C4F8 !important;
  color: #1D4ED8 !important;
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 6. Forms — the career-coaching page carries a booking form
 * ------------------------------------------------------------------ */
.ud-page .form-label { color: #0F172A; }
.ud-page .form-input,
.ud-page .form-select {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px;
  color: #0F172A !important;
}
.ud-page .form-input::placeholder { color: #94A3B8; }
/* the dropdown list itself was styled for a dark ground */
.ud-page select option { background: #FFFFFF; color: #0F172A; }
.ud-page .form-input:focus,
.ud-page .form-select:focus {
  border-color: #2559E8 !important;
  box-shadow: 0 0 0 3px rgba(37, 89, 232, 0.14) !important;
}

/* ------------------------------------------------------------------ *
 * 7. Inline declarations — the dark palette written into the markup
 * ------------------------------------------------------------------ */
/* White was the default type colour; on white it has to be ink — except
   inside a coloured chip, where it stays white. */
.ud-page [style*="color:#fff"] { color: #0F172A !important; }
.ud-page [style*="linear-gradient"] [style*="color:#fff"],
.ud-page [style*="background:var(--blue)"] [style*="color:#fff"],
.ud-page [style*="background:var(--purple)"] [style*="color:#fff"],
.ud-page [style*="background:var(--cyan)"] [style*="color:#fff"],
.ud-page [style*="background:var(--orange)"] [style*="color:#fff"] {
  color: #FFFFFF !important;
}
/* the greys used for body copy on a dark ground */
.ud-page [style*="color:#64748b"],
.ud-page [style*="color:#94a3b8"],
.ud-page [style*="color:#cbd5e1"] { color: #5A6B80 !important; }
.ud-page [style*="color:#e2e8f0"] { color: #0F172A !important; }
/* white at 35–40% read as "faint" on dark; on white it is nothing at all */
.ud-page [style*="color:rgba(255,255,255"] { color: #5A6B80 !important; }