:root {
    --primary-green: #0a5f25;
    --secondary-green: #147934;
    --primary-orange: #f39c12;
    --text-dark: #333;
    --text-light: #fff;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- FIXED WRAPPER (Ito ang pipigil sa pagkasira ng layout) --- */
.sas-landing-page {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    height: 100vh; /* Sapilitang 100% ng screen */
    width: 100%;
    overflow: hidden; /* Pinipigilan ang buong page na mag-scroll */
    display: flex;
    flex-direction: column;
    position: relative;
}

.sas-landing-page a { text-decoration: none; color: inherit; }
.sas-landing-page ul { list-style: none; }

.sas-landing-page .slide-container {
    flex: 1;
    height: 100%;
    overflow-y: scroll; /* Dito lang dapat umiikot ang scroll */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.sas-landing-page .slide-container::-webkit-scrollbar { display: none; }

.sas-landing-page .slide {
    scroll-snap-align: start;
    height: 100vh;
    min-height: 100vh;
    flex: 0 0 100vh; /* FIX PARA SA SLIDE 3: Pinipigilan itong lumiit */
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ===== HEADER (FIXED DESIGN PARA DI MAWALA) ===== */
.sas-landing-page header {
    position: fixed; /* Ginawang fixed para laging nakadikit sa screen */
    top: 0; left: 0; 
    width: 100%; 
    padding: 20px 50px;
    display: flex; justify-content: space-between; 
    align-items: center; 
    z-index: 9999;
    background: transparent;
}
.sas-landing-page .header-left { 
    display: flex; 
    align-items: center; 
    gap: 15px;
 }
.sas-landing-page .header-text h1 { 
    font-family: 'Kaushan Script', cursive; 
    color: #1b5e20; 
    font-size: 1.5rem; 
    margin: 0; 
    line-height: 1;
 }
.sas-landing-page .header-text p { 
    font-size: 13px; 
    color: #1b5e20; margin: 0; 
    font-family: 'Montserrat', sans-serif;
    margin-top: 5px;
 }
.sas-landing-page header nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sas-landing-page header nav ul li a {
    color: #1b5e20 !important; 
    font-weight: 700; 
    text-decoration: none; 
    font-size: 0.95rem; 
    transition: color 0.3s;
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page header nav ul li a:hover {
    color: #f39c12 !important;
} }

/* JS (landing_page.js) already toggles .active on the nav link matching
   the current scroll-snapped section -- it just had no visual treatment
   of its own, so the "current section" state was invisible until you
   actually hovered. Persistent orange + underline (same orange as
   :hover) makes it read as "you are here" without relying on hover. */
.sas-landing-page header nav ul li a.active {
    color: #f39c12 !important;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* ===== HEADER COLOR CHANGE ON CONTACT SLIDE ===== */
.sas-landing-page header.header-white .header-text h1,
.sas-landing-page header.header-white .header-text p,
.sas-landing-page header.header-white nav ul li a {
    color: #ffffff !important;
    transition: color 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) { .sas-landing-page header.header-white nav ul li a:hover {
    color: var(--primary-orange) !important;
} }

.sas-landing-page header.header-white nav ul li a.active {
    color: var(--primary-orange) !important;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* ===== SLIDE 1: HERO (GLOWING TOP RECTANGLE) ===== */
.sas-landing-page .hero {
    position: relative; height: 100vh;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: url('../img/bg.jpg') center/cover no-repeat;
}

.sas-landing-page .hero::before {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    background: 
        /* 1. White Glow sa Taas */
        linear-gradient(to bottom, rgba(255, 255, 255, 1) 8%, rgba(255, 255, 255, 0.89) 15%, rgba(255, 255, 255, 0) 40%),
        /* 2. Dark Green Glow sa Baba */
        linear-gradient(to top, rgba(10, 95, 37, 1) 8%, rgba(10, 95, 37, 0.8) 15%, rgba(10, 95, 37, 0) 50%),
        /* 3. Green Tint sa buong image */
        linear-gradient(rgba(10, 95, 37, 0.35), rgba(10, 95, 37, 0.35));
    
    /* Ito ang magba-blur sa image na nasa likod niya */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    
    z-index: 1; pointer-events: none;
}
    

.sas-landing-page .hero-content { position: relative; z-index: 2; max-width: 960px; padding: 0 20px; width: 100%; }
.sas-landing-page .hero-content h2 {
    /* clamp(min, preferred-vw, max) instead of a fixed 150px/900px --
       scales smoothly with viewport width instead of a hard breakpoint
       jump, and can never exceed the viewport since it's not a fixed px
       width anymore. At the 150px ceiling (hit at any viewport >=1000px),
       "SAS-CONNECT" needs ~875px on one line -- the container's max-width
       was 900px, but its own 20px side padding left only ~860px of
       actual content area, ~15px short, so the heading wrapped to two
       lines on every desktop size instead of the one line it was meant
       to read as. Widened to 960px (content area ~920px) so it comfortably
       clears that without touching the font size. */
    font-size: clamp(42px, 15vw, 150px);
    font-family: 'Oswald', sans-serif; color: #ffffff; line-height: 1.1;
    letter-spacing: 3px; margin-bottom: 5px; width: 100%; max-width: 960px;
}
.sas-landing-page .hero-content .orange { color: #f39c12; }

/* Hero heading entrance -- a plain, unified fade-in. Kept deliberately
   simple (no per-letter effect, no glide/letter-spacing motion) since the
   parent .hero-content already handles the slide/scale entrance
   (landingEnter, below); this just brings the heading's opacity in a
   touch after that starts, so it settles in cleanly rather than being an
   afterthought of the parent's own motion. */
.sas-landing-page .hero-content .hero-heading {
    opacity: 0;
    /* Slowed to roughly match how long the subtitle paragraph takes to
       finish typing (js/landing_page.js: ~150ms start delay + 132 chars *
       20ms per char =~ 2.8s total) -- at the old 1s this settled long
       before the paragraph was even half typed, which read as two
       unrelated animations rather than one entrance. */
    animation: heroHeadingIn 2.2s ease-out 0.15s forwards;
}
@keyframes heroHeadingIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sas-landing-page .hero-content .hero-heading { animation: none; opacity: 1; }
}
.sas-landing-page .hero-content p { font-size: 1.1rem; color: #ffffff; margin-bottom: 40px; font-weight: 500; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

/* Subtitle typewriter cursor element is kept in the markup (in case it's
   wanted again later) but hidden entirely -- no blinking bar next to the
   typed text. */
.sas-landing-page .hero-content .typewriter-cursor {
    display: none;
}

.sas-landing-page .hero-buttons { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.sas-landing-page .btn-transparent-outline,
.sas-landing-page .btn-hero-primary,
.sas-landing-page .btn-hero-link {
    padding: 12px 35px; border-radius: 50px; width: 220px;
    font-weight: 600; font-family: 'Montserrat', sans-serif; text-align: center;
    cursor: pointer; transition: 0.3s;
}
.sas-landing-page .btn-transparent-outline {
    background: transparent; color: #ffffff; border: 2px solid #ffffff;
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-transparent-outline:hover { background: rgba(255, 255, 255, 0.2); } }

.sas-landing-page .btn-hero-primary {
    background: var(--primary-orange); color: #ffffff; border: 2px solid var(--primary-orange);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(243,156,18,0.35);
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-hero-primary:hover {
    background: #d98800; border-color: #d98800;
    box-shadow: 0 12px 25px rgba(243,156,18,0.45);
} }

.sas-landing-page .btn-hero-link {
    background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.4);
}
@media (hover: hover) and (pointer: fine) { .sas-landing-page .btn-hero-link:hover {
    border-color: #ffffff; background: rgba(255, 255, 255, 0.1);
} }

/* ===== SHARED: DECORATIVE GLOW BLOBS =====
   IMPORTANT: this base class MUST stay defined - without it these blobs
   have no `position`, so they render as normal 400-550px block elements
   in the document flow and push the real slide content down/out of view. */
.glow-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ===== SLIDE 2: AI ASSISTANT ===== */
.sas-landing-page .ai-section {
    background: url('../img/bg.jpg') center/cover;
    position: relative;
}
.sas-landing-page .ai-glow-green{
    width: 550px; height: 550px;
    background: var(--primary-green);
    top: 92%; left: 15%;
    opacity: 0.35;
    filter: blur(110px);
}
.ai-glow-gold {
    width: 420px; height: 420px;
    background: var(--primary-orange);
    top: 6%; left: 88%;
    opacity: 0.25;
    filter: blur(110px);
}
.ai-section::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(236,236,236,0.85), rgba(236,236,236,0.98));
    z-index: 1;
    /* Added light blur here as well */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.ai-content-wrapper { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; }
.ai-banner {
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white; text-align: center; padding: 20px;
    padding-top: 110px;
    position: relative; overflow: hidden;
}
.ai-banner::before {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}
@keyframes gridMove { 0% { transform: translate(0,0); } 100% { transform: translate(20px,20px); } }
.ai-banner h2 { font-family: 'Oswald', sans-serif; font-size: clamp(22px, 6vw, 36px); letter-spacing: 1px; text-transform: uppercase; position: relative; z-index: 1; opacity: 0; transform: translateY(20px); }
.ai-banner p { position: relative; z-index: 1; opacity: 0; transform: translateY(20px); }
/* Same fadeUp entrance already used on .services h2/p -- this section's
   heading/text rendered fully visible on load with no scroll-triggered
   entrance at all, unlike every other slide's headings. A dedicated
   keyframe (not the shared fadeUp) is used for the paragraph only so its
   resting opacity stays 0.9 (the original design), not fadeUp's 1. */
.ai-section.in-view .ai-banner h2 { animation: fadeUp 0.8s var(--ease-out-expo) forwards; }
.ai-section.in-view .ai-banner p { animation: aiBannerTextIn 0.8s var(--ease-out-expo) 0.15s forwards; }
@keyframes aiBannerTextIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 0.9; transform: translateY(0); }
}

.chat-container {
    max-width: 860px; width: 92%; margin: 30px auto;
    background: #fff; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden; display: flex; flex-direction: column;
    flex: 1; max-height: 68vh; min-height: 420px;
    opacity: 0; transform: translateY(30px) scale(0.97);
}
@media (max-width: 700px) {
    .chat-container { width: 96%; max-height: 72vh; min-height: 380px; }
    .chat-body { padding: 14px; }
    .chat-bubble { padding: 10px 16px; font-size: 14px; }

    /* Header never had any mobile handling -- fixed 20px/50px padding plus
       a 30px-gap nav next to the logo overflowed any screen under ~900px.
       Compacted to fit while keeping the exact same left-to-right row as
       desktop (logo left, nav right) -- no wrap, no centering, no nav
       dropping below the logo. */
    .sas-landing-page header {
        padding: 10px 14px;
    }
    .sas-landing-page .header-left { gap: 8px; }
    .sas-landing-page .header-left img { width: 38px; }
    .sas-landing-page .header-text h1 { font-size: 0.85rem; }
    .sas-landing-page .header-text p { display: none; } /* tagline -- logo+name alone already identify the site at this width */
    .sas-landing-page header nav ul { gap: 10px; }
    .sas-landing-page header nav ul li a { font-size: 0.72rem; white-space: nowrap; }
}

@media (max-width: 700px) {
    .sas-landing-page .contacts-grid { grid-template-columns: 1fr 1fr; }

    /* Every .slide is locked to exactly 100vh with overflow:hidden, which
       works on desktop where each section's content fits in one screen --
       on mobile, stacked cards (services' 5, contacts' 6+1) run well past
       100vh and the excess was just invisible/unreachable, not merely
       tight. Letting a slide grow past 100vh and scroll internally when its
       content demands it fixes that without changing the scroll-snap
       one-section-at-a-time feel on sections that DO already fit. */
    .sas-landing-page .slide {
        height: auto; min-height: 100vh; flex: 0 0 auto; overflow-y: auto;
    }
    /* .assistance-card had min-width:300px with no fallback -- forced onto
       the same row as .contacts-grid (flex:2) by flex-wrap alone since both
       items could still shrink-to-fit rather than actually wrap. Giving it
       a full-width flex-basis makes it wrap onto its own row for real. */
    .sas-landing-page .contacts-container > .assistance-card { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 380px) {
    /* Even the compacted single row above gets tight with a 4-link nav
       plus the full "Student Affairs and Services" title on the smallest
       phones. Rather than ever wrapping nav below the logo or centering
       the header, drop the title text and keep just the logo mark --
       the icon alone still identifies the site, and this frees enough
       width for nav to stay on the same row, right where it is on
       desktop. */
    .sas-landing-page .header-text { display: none; }
    .sas-landing-page header nav ul { gap: 8px; }
    .sas-landing-page header nav ul li a { font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .sas-landing-page .contacts-grid { grid-template-columns: 1fr; }
    .sas-landing-page .assistance-card { padding: 20px; }
    .contact-card { padding: 14px; }
}
.ai-section.in-view .chat-container {
    animation: chatSlideIn 0.8s var(--ease-out-expo) forwards;
}
@keyframes chatSlideIn {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-header {
    background: linear-gradient(135deg, var(--secondary-green), var(--primary-green));
    color: white; padding: 15px 20px;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    font-size: 14px; font-weight: bold;
}
.online-dot {
    display: inline-block; width: 10px; height: 10px;
    background: #00ff00; border-radius: 50%;
    box-shadow: 0 0 10px #00ff00;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { opacity: 1; box-shadow: 0 0 10px #00ff00; }
    50% { opacity: 0.7; box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
}
.chat-body {
    padding: 20px; background: #f4f7f6;
    flex: 1; display: flex; flex-direction: column; overflow-y: auto;
}
.chat-bubble {
    background: #e8f5e9; border: 1px solid #c8e6c9;
    padding: 12px 20px; border-radius: 20px;
    margin-bottom: 10px; align-self: flex-start; max-width: 80%;
    opacity: 0; transform: scale(0.8);
}
.ai-section.in-view .chat-bubble:nth-child(1) { animation: bubblePop 0.4s var(--ease-out-expo) 0.5s forwards; }
.ai-section.in-view .chat-bubble:nth-child(2) { animation: bubblePop 0.4s var(--ease-out-expo) 0.8s forwards; }
@keyframes bubblePop { to { opacity: 1; transform: scale(1); } }

/* Dynamically-appended messages (js/landing_ai_chat.js) -- the two static
   greeting bubbles above stay as plain .chat-bubble (entrance-animated via
   the nth-child rules above). Every bubble added by JS gets .dynamic too,
   which overrides the base .chat-bubble's opacity:0/scale(0.8) (meant only
   for that one-time entrance animation) so new messages render visible
   immediately instead of staying invisible forever. .user distinguishes the
   visitor's own messages; .loading is the "Nag-iisip..." placeholder. */
.chat-bubble.dynamic { opacity: 1; transform: none; }
.chat-bubble.user {
    background: linear-gradient(135deg, var(--secondary-green), var(--primary-green));
    border: none; color: #fff;
    align-self: flex-end;
}
.chat-bubble.loading { opacity: 0.6; font-style: italic; }

/* AI avatar next to dynamically-appended AI replies (not the two static
   greeting bubbles above, which keep their own entrance-animation
   nth-child selectors untouched) -- gives each reply a clear "who said
   this" anchor instead of just a floating bubble. */
.chat-row {
    display: flex; align-items: flex-end; gap: 8px;
    align-self: flex-start; max-width: 85%; margin-bottom: 10px;
}
.chat-row .chat-bubble { margin-bottom: 0; }
.ai-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--secondary-green), var(--primary-green));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 13px; box-shadow: 0 2px 6px rgba(10,95,37,0.3);
}
.chat-bubble p { margin: 0 0 8px 0; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 0 0 8px 0; padding-left: 20px; }
.chat-bubble ul:last-child { margin-bottom: 0; }
.chat-bubble li { margin-bottom: 4px; }

.suggested-questions { margin-top: auto; text-align: center; padding-top: 20px; }
.suggested-questions p { font-size: 12px; color: #666; margin-bottom: 10px; }
.pill-btn {
    background: white; border: 1px solid #ddd;
    padding: 10px 22px; border-radius: 25px;
    margin: 5px; cursor: pointer; font-size: 14px;
    transition: all 0.3s var(--ease-out-expo);
    position: relative; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) { .pill-btn:hover {
    background: var(--primary-green); color: white;
    border-color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(10,95,37,0.2);
} }
.pill-btn:active { transform: translateY(0); }

.chat-input {
    display: flex; padding: 15px; background: #f4f7f6;
    border-top: 1px solid #e0e0e0; gap: 10px;
}
.chat-input input {
    flex: 1; padding: 12px 20px; border-radius: 30px;
    border: 1px solid #ddd; outline: none; font-size: 16px;
    transition: all 0.3s; background: white;
}
.chat-input input:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(10,95,37,0.1);
}
.chat-input button {
    width: 45px; height: 45px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white; border: none; cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) and (pointer: fine) { .chat-input button:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 5px 20px rgba(10,95,37,0.3); } }
.chat-input button:active { transform: scale(0.95); }

/* ===== SLIDE 3: SERVICES ===== */
.sas-landing-page .services {
    background: url('../img/bg3.jpg') center/cover;
    /* ...same as before... */
}
.services::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.441), rgba(255,255,255,0.97));
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.sas-landing-page .services::-webkit-scrollbar { display: none; }
.services-glow-green {
    width: 550px; height: 550px;
    background: var(--primary-green);
    top: 8%; left: 15%;
    opacity: 0.4;
    filter: blur(110px);

    
}
.services-glow-gold-1 {
    width: 460px; height: 460px;
    background: var(--primary-orange);
    top: 92%; left: 65%;
    opacity: 0.35;
    filter: blur(110px);
}
.services-wrapper { position: relative; z-index: 10; text-align: center; width: 100%; margin-top: 120px; padding-bottom: 40px; }
.services h2 {
    font-family: 'Oswald', sans-serif; color: var(--primary-orange);
    font-size: clamp(28px, 8vw, 50px); line-height: 1.1; margin-bottom: 4px;
    opacity: 0; transform: translateY(20px);
}
.services.in-view h2 {
    animation: fadeUp 0.8s var(--ease-out-expo) forwards;
}
.services-wrapper p {
    font-family: 'Montserrat', sans-serif;
    color: #555; margin-bottom: 45px; max-width: 800px; margin-inline: auto;
    opacity: 0; transform: translateY(20px);
}
.services.in-view .services-wrapper p {
    animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto;
}
.sas-landing-page .service-card {
    margin-top: 20px;
    background: linear-gradient(145deg, var(--secondary-green), var(--primary-green));
    color: white; padding: 30px 20px; border-radius: 20px;
    text-align: left; min-height: 250px;
    transition: all 0.4s var(--ease-out-expo);
    position: relative; overflow: hidden;
    opacity: 0; transform: translateY(40px);
    border: 1px solid rgba(255,255,255,0.1);
}
.services.in-view .service-card:nth-child(1) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.3s forwards; }
.services.in-view .service-card:nth-child(2) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.4s forwards; }
.services.in-view .service-card:nth-child(3) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.5s forwards; }
.services.in-view .service-card:nth-child(4) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.6s forwards; }
.services.in-view .service-card:nth-child(5) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.7s forwards; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.service-card.settled {
    opacity: 1; transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) { .service-card:hover, .service-card.settled:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
} }
@media (hover: hover) and (pointer: fine) { .service-card:hover .service-icon {
    transform: scale(1.1) rotate(-5deg);
} }
.service-card h3 { margin-bottom: 15px; font-size: 20px; position: relative; z-index: 1; }
.service-icon {
    display: block; font-size: 26px;
    margin-bottom: 12px; position: relative; z-index: 1;
    transition: all 0.3s var(--ease-out-expo);
}
.service-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; margin-bottom: 15px; opacity: 0.9; position: relative; z-index: 1;
    color: #fff;
}
.service-card ul {
    font-family: 'Montserrat', sans-serif;
    list-style: disc; margin-left: 20px; font-size: 13px; opacity: 0.9; position: relative; z-index: 1;
}
.service-card li { margin-bottom: 4px; transition: transform 0.2s; }
@media (hover: hover) and (pointer: fine) { .service-card:hover li { transform: translateX(4px); } }

/* ===== SLIDE 4: CONTACTS ===== */
.sas-landing-page .contacts {
    background: url('../img/bg2.jpg') center/cover;
    padding: 0 50px; color: white; justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
}
.sas-landing-page .contacts::-webkit-scrollbar { display: none; }
.glow-green-contacts {
    width: 500px; height: 500px;
    background: var(--primary-orange);
    top: 10%; left: 70%;
    opacity: 0.3;
    filter: blur(120px);
}
.contacts::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(10,95,37,0.95), rgba(10,95,37,0.6) 40%, rgba(5,55,20,0.25) 65%, transparent 90%);
    z-index: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.contacts-inner {
    position: relative; z-index: 10;
    width: 100%; max-width: 1200px; margin: 0 auto;
}
.sas-landing-page .contacts-header {
    margin-bottom: 30px; margin-top: 120px;
    opacity: 0; transform: translateY(20px);
}
.contacts.in-view .contacts-header {
    animation: fadeUp var(--anim-section, 0.8s var(--ease-out-expo)) 0.1s forwards;
}
.contacts-header h2 { font-family: 'Oswald', sans-serif; font-size: clamp(26px, 8vw, 45px); line-height: 1; }
.contacts-header h3 { font-size: 20px; font-weight: 500; opacity: 0.9; margin-top: 10px;}
.contacts-container { display: flex; gap: 30px; flex-wrap: wrap; }
.contacts-grid { flex: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.contact-card {
    background: rgba(244,246,245,0.95); color: var(--text-dark);
    padding: 18px; border-radius: 15px;
    display: flex; flex-direction: column; align-items: flex-start;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(40px);
}
.contacts.in-view .contact-card:nth-child(1) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.15s forwards; }
.contacts.in-view .contact-card:nth-child(2) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.2s forwards; }
.contacts.in-view .contact-card:nth-child(3) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.25s forwards; }
.contacts.in-view .contact-card:nth-child(4) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.3s forwards; }
.contacts.in-view .contact-card:nth-child(5) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.35s forwards; }
.contacts.in-view .contact-card:nth-child(6) { animation: cardSlideUp 0.6s var(--ease-out-expo) 0.4s forwards; }
.contact-card.settled {
    opacity: 1; transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) { .contact-card:hover, .contact-card.settled:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    background: #fff;
} }
.contact-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #dcedc8, #c5e1a5);
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    color: var(--primary-green); font-size: 18px;
    margin-bottom: 15px; transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) { .contact-card:hover .contact-icon {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white;
} }
.contact-card h4 { font-size: 15px; margin-bottom: 5px; color: var(--primary-green); }
.contact-card p { font-size: 12px; color: #555; line-height: 1.5; }

.assistance-card {
    flex: 1; background: rgba(232,245,233,0.95); color: var(--text-dark);
    padding: 30px; border-radius: 20px; min-width: 300px;
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
    opacity: 0; transform: translateY(40px);
}
.contacts.in-view .assistance-card {
    animation: cardSlideUp 0.6s var(--ease-out-expo) 0.45s forwards;
}
.assistance-card.settled {
    opacity: 1; transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) { .assistance-card:hover, .assistance-card.settled:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
} }
.assistance-card h3 { color: var(--primary-green); font-size: 22px; margin-bottom: 10px; }
.assistance-card > p { font-size: 14px; margin-bottom: 20px; color: #444; }
.action-block {
    display: flex; align-items: flex-start; gap: 15px;
    margin-bottom: 20px; background: white;
    padding: 15px; border-radius: 12px;
    transition: all 0.3s var(--ease-out-expo);
    border: 1px solid rgba(0,0,0,0.05);
}
@media (hover: hover) and (pointer: fine) { .action-block:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); } }
.action-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 16px; transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) { .action-block:hover .action-icon { transform: scale(1.1) rotate(5deg); } }
.action-content p { font-size: 13px; margin-bottom: 10px; line-height: 1.4; }

.btn {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s var(--ease-out-expo);
}
.btn-orange {
    background: var(--primary-orange);
}
@media (hover: hover) and (pointer: fine) { .btn-orange:hover {
    background: #d98800;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(243,156,18,0.3);
} }
.btn-green {
    background: var(--primary-green);
}
@media (hover: hover) and (pointer: fine) { .btn-green:hover {
    background: var(--secondary-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(10,95,37,0.3);
} }
.action-content .btn { padding: 8px 15px; font-size: 13px; width: 100%; }
.security-note {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: #555; margin-top: 20px;
    padding: 10px; background: rgba(255,255,255,0.5); border-radius: 8px;
}
.security-note i { color: var(--primary-green); font-size: 16px; }

.site-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 15px;
    opacity: 0; transform: translateY(15px);
}
.contacts.in-view .site-footer {
    animation: fadeUp 0.6s var(--ease-out-expo) 0.6s forwards;
}
.footer-tagline {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--primary-orange);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.footer-copyright {
    font-size: 12px; color: rgba(255,255,255,0.75);
}
.footer-socials {
    display: flex; gap: 12px;
}
.footer-socials a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px;
    transition: all 0.3s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) { .footer-socials a:hover {
    background: var(--primary-orange);
    transform: translateY(-3px);
} }

/* Replace the tab and form styling from the previous CSS with this: */

/* ===== MODAL / POP-UP WITH BACKGROUND BLUR ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
    
    /* Changed to 9999 to cover the header */
    z-index: 9999; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out-expo), visibility 0.4s;
}


.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== TOAST NOTIFICATION =====
   Non-blocking, auto-dismissing, no backdrop -- for purely informational
   messages (e.g. the post-logout confirmation) that shouldn't stop the
   user with a modal they have to acknowledge. Higher z-index than
   .modal-overlay so it stays visible even if it fires while a modal
   happens to be open. */
.toast {
    /* Text-only, centered, no box -- deliberately not a card: just the
       message itself floating over the page. */
    position: fixed;
    top: 28px;
    left: 50%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    color: var(--primary-green);
    padding: 0;
    border: none;
    box-shadow: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    max-width: min(90vw, 420px);
    text-align: center;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: transform 0.35s var(--ease-out-expo), opacity 0.35s ease;
    pointer-events: none;
}

/* The landing toast is invisible most of the time; theme.css gives .toast pointer-events:auto,
   which made this empty box swallow clicks on the nav links (Home / AI Assistant / ...). */
body .toast { pointer-events: none; }

.toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.toast i {
    font-size: 17px;
    color: inherit;
    flex-shrink: 0;
}

.toast.toast-error {
    color: #ef4444;
}

@media (max-width: 480px) {
    .toast {
        left: 50%;
        right: auto;
        top: 20px;
        max-width: 90vw;
    }
}

/* Make the modal slightly wider to accommodate the columns, and allow scrolling if the screen is small */
.modal-content {
    background: #ffffff;
    padding: var(--modal-padding, 36px);
    border-radius: 20px;
    width: 90%;
    max-width: 550px; /* Increased from 420px to fit columns better */
    max-height: 90vh; /* Prevents it from going off-screen vertically */
    overflow-y: auto; /* Adds a scrollbar inside the modal if needed */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s var(--ease-out-expo);
    font-family: 'Montserrat', sans-serif;

    scrollbar-width: thin;
    scrollbar-color: rgba(10, 95, 37, 0.4) transparent;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .input-group {
    flex: 1; /* Makes both inputs share the space equally */
}

/* For the Year Level field to perfectly match half the width */
.half-width {
    width: calc(50% - 7.5px);
}

/* Responsive adjustment for mobile screens */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    .half-width {
        width: 100%;
    }
    .modal-content { padding: 24px; }
}

.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    background: none; border: none;
    font-size: 28px; color: #888;
    cursor: pointer; transition: color 0.3s;
}

@media (hover: hover) and (pointer: fine) { .close-btn:hover { color: var(--primary-orange); } }

/* --- FORM SPECIFIC STYLES --- */
.form-header {
    text-align: center;
    margin-bottom: var(--modal-section-gap, 22px);
}

.form-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-green);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--modal-header-gap, 10px);
}

.form-header p {
    font-size: 13px;
    color: #666;
}

.auth-form {
    display: none;
    flex-direction: column;
    gap: var(--modal-field-gap, 16px);
}

.auth-form.active-form { 
    display: flex; 
    animation: fadeInForm 0.4s var(--ease-out-expo); 
}

@keyframes fadeInForm { 
    from { opacity: 0; transform: translateX(10px); } 
    to { opacity: 1; transform: translateX(0); } 
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--modal-label-gap, 6px);
}

/* Forgot-password modal's two sub-steps (index.php's #forgotOtpStep/
   #forgotPasswordStep) previously had no display:flex/gap at all -- the
   OTP input and "Verify Code" button sat with 0px of intentional spacing
   between them, unlike every sibling form on this page. */
#forgotOtpStep, #forgotPasswordStep {
    display: flex;
    flex-direction: column;
}
/* display:flex above means sibling margins here ADD rather than collapse
   (flex items don't margin-collapse) -- so each gap is set on exactly one
   side, not both, to avoid doubling up. */
#forgotOtpStep .input-group, #forgotPasswordStep .input-group {
    margin-bottom: var(--modal-field-gap, 16px); /* New Password -> Confirm New Password */
}
#forgotOtpStep .input-group:last-of-type, #forgotPasswordStep .input-group:last-of-type {
    margin-bottom: var(--modal-action-gap, 24px); /* last field -> the button */
}
#forgotOtpStep > .btn, #forgotPasswordStep > .btn {
    margin-bottom: var(--modal-field-gap, 16px);
}

.input-group label {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.auth-form input {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    outline: none; 
    transition: all 0.3s;
    background: #fff;
}

.auth-form input:focus { 
    border-color: var(--primary-green); 
    box-shadow: 0 0 0 3px rgba(10,95,37,0.1);
}

.forgot-link {
    text-align: right;
    font-size: 12px;
    color: #4285f4;
    text-decoration: none;
    margin-top: -5px;
    margin-bottom: 5px;
}

@media (hover: hover) and (pointer: fine) { .forgot-link:hover {
    text-decoration: underline;
} }

/* Gradient Button Matching Your Design */
.btn-gradient {
    background: linear-gradient(90deg, #d4b528, var(--primary-green));
    color: white;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: none;
    padding: 12px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
}

@media (hover: hover) and (pointer: fine) { .btn-gradient:hover {
    background: linear-gradient(90deg, #e3c435, var(--secondary-green));
    color: white;
    font-weight: 600;
} }

.auth-footer {
    text-align: center;
    font-size: 12px;
    color: #555;
    margin-top: 10px;
}

.auth-footer a {
    color: #4285f4;
    text-decoration: none;
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) { .auth-footer a:hover {
    text-decoration: underline;
} }

.w-100 { width: 100%; }

/* =========================================
   REGISTRATION INFO BOX
   ========================================= */
.registration-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #e8f5e9; 
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #c8e6c9;
    margin-top: 5px;
    margin-bottom: 5px;
}

.registration-info i {
    color: var(--primary-green);
    font-size: 14px;
    margin-top: 2px;
}

.registration-info p {
    font-size: 12px;
    color: #444;
    line-height: 1.4;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================
   HIDDEN SCROLLBAR (STILL SCROLLABLE)
   ========================================= */
.modal-content::-webkit-scrollbar {
    display: none; /* Hides it in Chrome, Safari, Edge */
}

.modal-content {
    -ms-overflow-style: none;  /* Hides it in IE and Edge */
    scrollbar-width: none;  /* Hides it in Firefox */
}
/* =========================================
   MODAL LOGO
   ========================================= */
.modal-logo {
    width: 85px; /* Adjust this number to make your logo bigger or smaller */
    height: auto;
    margin-bottom: 12px; /* Adds breathing room between the logo and the text */
    display: inline-block;
}

/* ============================================================
   SAS-CONNECT: REGISTRATION FORM DROPDOWN (SELECT) STYLING
   Ensure standard cross-browser appearance matching the design.
   ============================================================ */

/* Target all dropdowns within the authentication forms */
.auth-form select {
    /* Step 1: Apply Base Input Styles (padding, border, font, etc.) */
    padding: 12px 15px;
    border-radius: 8px; /* Matching the standard rounded look */
    border: 1px solid #ddd;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--text-dark); /* '#333' for readability */
    width: 100%;
    background: #fff; /* Ensure a clean white background */
    outline: none; /* Turn off default focus outline */
    transition: all 0.3s; /* Smooth transitions for hover/focus */

    /* Step 2: Disable Default Native Styling (appearance)
       This is mandatory to apply custom arrows consistently. */
    -moz-appearance: none;
    -webkit-appearance: none; /* Safari/Chrome */
    appearance: none;    /* Firefox */

    /* Step 3: Add Custom Arrow Image (SVG)
       This caret style is consistent with a secure, professional design.
       The SVG down-arrow is embedded as a data URI for efficiency. */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center; /* Position on the far right */
    background-size: 12px 12px; /* Ensure appropriate sizing */
}

/* Step 4: Add Focus Styles (Match Input:Focus)
   Applies the green border and subtle green shadow. */
.auth-form select:focus {
    border-color: var(--primary-green); /* '#0a5f25' */
    box-shadow: 0 0 0 3px rgba(10, 95, 37, 0.1); /* Subtle green glow[cite: 11] */
}

/* Registration's own submit validation applies this class to any required
   field still empty when "Create Account" is pressed -- js/landing_page.js
   sets `novalidate` on the form so this custom, on-brand red highlight
   shows instead of the browser's plain default "fill out this field"
   tooltip, matching the rest of this app's custom-styled feedback
   (toasts, alerts) rather than native browser chrome. Cleared the moment
   the user starts typing/selecting in that field. */
.auth-form input.field-error,
.auth-form select.field-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
    animation: fieldErrorShake 0.4s ease;
}
@keyframes fieldErrorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Step 5: Option Group Label Styling (Optional but recommended)
   Gives optgroups (like education majors) a distinct look. */
.auth-form optgroup {
    font-weight: 600;
    color: var(--primary-green); /* '#0a5f25' */
    background-color: #f8f9fa; /* Light grey background for labels */
    padding: 5px;
}

/* Step 6: Option styling (Optional, ensuring consistent text color) */
.auth-form option {
    color: var(--text-dark); /* '#333' */
}

/* Step 7: Placeholder style (The first, disabled selected option) */
.auth-form select option:first-child:disabled:selected {
    color: #888; /* Muted color for the "Select your course" text */
}

/* Password strength/requirement indicator (Registration + Forgot Password
   reset) now lives in css/password_strength.css -- shared verbatim with
   Forced Password Change and Profile Settings' Change Password, replacing
   the old green-checkmark checklist that used to be styled here. */

/* ===== LANDING PAGE ENTER ANIMATION ===== */
@keyframes landingEnter {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pag-apply ng animation sa unang pag-load ng hero section -- slowed to
   roughly match how long the subtitle paragraph takes to finish typing
   (js/landing_page.js: ~2.8s total), so the whole hero entrance (this
   block's own slide/scale, the heading's fade, and the subtitle typing)
   settles together instead of the container/heading arriving almost
   instantly while the paragraph keeps typing for seconds afterward. */
.sas-landing-page .hero .hero-content {
    /* Duration deliberately matches the subtitle's typing-effect length (see
       comment above) -- not part of the standard --anim-* tiers, but the
       easing curve is still the shared --ease-out-expo token (was a literal
       cubic-bezier spelling the same value). */
    animation: landingEnter 2.6s var(--ease-out-expo) forwards;
}

/* Sunod-sunod na pag-fade in para sa mga header elements */
.sas-landing-page header {
    animation: fadeInHeader 0.8s ease-out forwards;
}

@keyframes fadeInHeader {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== MOBILE SERVICE CARD SIZING (appended at file-end on purpose) =====
   The unconditional base .service-card rule (padding:30px 20px,
   min-height:250px) sits later in this file than the old 700px-media-query
   override that tried to shrink its padding -- same selector specificity,
   so the later, unconditional rule always won regardless of viewport,
   silently making that mobile override dead code (confirmed live: at
   375px width, computed padding/min-height still read the desktop
   30px 20px / 250px, never the mobile values). A fixed 250px min-height
   also forced tall empty space under any card whose text was shorter
   than that on mobile. Placing the real override here, after the base
   rule, is what actually wins the cascade. */
@media (max-width: 700px) {
    .sas-landing-page .service-card { padding: 20px 16px; min-height: auto; }
}
/* Links in the Contacts cards (set in Admin > Institution Info) */
.contact-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-link:focus-visible { color: var(--primary-green, #1b5e20); }
@media (hover: hover) and (pointer: fine) { .contact-link:hover { color: var(--primary-green, #1b5e20); } }
.contact-card .contact-link strong { font-weight: 700; }

.forgot-row { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: -5px 0 8px; }
.forgot-row .forgot-link { margin: 0; }

/* The post-logout message is plain text only (theme.css gave every .toast a white box). It sits below the top bar, in dark green with a soft white
   glow so it reads over the photo; an error is red. */
body #toast.toast { top: 96px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
    color: #14471a; text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.8); backdrop-filter: none !important; }
body #toast.toast.toast-error { color: #c62828; }
body #toast.toast i { color: #14471a; }
body #toast.toast.toast-error i { color: #c62828; }