/* ================================================================
   MARLIN STEM VIRTUAL ACADEMY
   Components Styles
   components.css

   Covers:
   01. MarlBot Chatbot      — floating AI chat assistant
   02. WhatsApp Float       — fixed bottom-left button
   03. Footer               — four-column layout + bottom bar
   04. Toast Notifications  — success / error feedback
   05. Page Loader          — initial loading screen
   06. Back to Top          — scroll to top button
================================================================ */


/* ================================================================
   01. MARLBOT CHATBOT
   Floating chat widget — bottom right corner.
   
   Structure:
   .chatbot-fab          — the round trigger button
   .chatbot-window       — the chat panel (hidden by default)
     .chatbot-window__header
     .chatbot-window__messages
     .chatbot-window__quick-replies
     .chatbot-window__input-row
================================================================ */


/* ---- Trigger button (FAB) ---- */

.chatbot-fab {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    z-index:         var(--z-modal);

    width:           60px;
    height:          60px;
    border-radius:   50%;

    background:      var(--navy-800);
    border:          3px solid var(--cyan-500);
    color:           var(--cyan-500);
    font-size:       24px;

    display:         flex;
    align-items:     center;
    justify-content: center;

    cursor:          pointer;
    transition:      var(--transition);

    /* Pulsing glow ring — draws attention */
    animation: fabGlow 3s ease-in-out infinite;
}

@keyframes fabGlow {
    0%,  100% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.30),
            0 0 0 0 rgba(200, 165, 92, 0.40);
    }
    50% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.30),
            0 0 0 10px rgba(200, 165, 92, 0.00);
    }
}

.chatbot-fab:hover {
    background:  var(--cyan-500);
    color:       var(--navy-800);
    transform:   scale(1.10);
    animation:   none;
    box-shadow:  var(--shadow-cyan);
}

/* Tooltip label on hover */
.chatbot-fab::before {
    content:         'Chat with MarlBot';
    position:        absolute;
    right:           calc(100% + 12px);
    top:             50%;
    transform:       translateY(-50%);
    background:      var(--navy-800);
    color:           var(--white);
    font-family:     var(--font-body);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-semi);
    white-space:     nowrap;
    padding:         6px 12px;
    border-radius:   var(--radius);
    border:          1px solid var(--navy-600);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--duration-base) var(--ease);
}

.chatbot-fab:hover::before {
    opacity: 1;
}


/* ---- Chat window ---- */

.chatbot-window {
    position:       fixed;
    bottom:         104px;
    right:          28px;
    z-index:        var(--z-modal);

    width:          360px;
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    border:         1px solid var(--grey-200);
    box-shadow:     var(--shadow-xl);

    /* Hidden by default — JS adds .is-open */
    display:        flex;
    flex-direction: column;
    transform:      translateY(16px) scale(0.97);
    opacity:        0;
    pointer-events: none;
    transform-origin: bottom right;

    transition:
        transform var(--duration-base) var(--ease-spring),
        opacity   var(--duration-base) var(--ease);
}

.chatbot-window.is-open {
    transform:      translateY(0) scale(1);
    opacity:        1;
    pointer-events: all;
}


/* ---- Window header ---- */

.chatbot-window__header {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-4) var(--space-5);
    background:  var(--navy-800);
    flex-shrink: 0;
}

.chatbot-window__avatar {
    width:           42px;
    height:          42px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--cyan-500), var(--navy-600));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    color:           var(--white);
    flex-shrink:     0;
    box-shadow:      0 0 0 2px rgba(200, 165, 92, 0.30);
}

.chatbot-window__identity {
    flex: 1;
}

.chatbot-window__name {
    font-size:   var(--text-base);
    font-weight: var(--weight-bold);
    color:       var(--white);
    line-height: 1.2;
}

.chatbot-window__status {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   var(--text-xs);
    color:       var(--cyan-500);
    font-weight: var(--weight-medium);
    margin-top:  2px;
}

/* Green pulsing dot */
.chatbot-window__status::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--cyan-500);
    animation:     statusPulse 2.5s ease-in-out infinite;
    flex-shrink:   0;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}

/* Close button */
.chatbot-window__close {
    width:           32px;
    height:          32px;
    border-radius:   var(--radius);
    background:      rgba(255, 248, 235, 0.08);
    color:           rgba(255, 255, 255, 0.60);
    font-size:       18px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--transition);
    cursor:          pointer;
    border:          none;
    flex-shrink:     0;
}

.chatbot-window__close:hover {
    background: rgba(255, 255, 255, 0.15);
    color:      var(--white);
}


/* ---- Message area ---- */

.chatbot-window__messages {
    flex:                    1;
    max-height:              320px;
    overflow-y:              auto;
    padding:                 var(--space-4);
    background:              var(--grey-50);
    display:                 flex;
    flex-direction:          column;
    gap:                     var(--space-3);
    scroll-behavior:         smooth;

    /* Custom scrollbar inside chat */
    scrollbar-width:         thin;
    scrollbar-color:         var(--grey-300) transparent;
}

.chatbot-window__messages::-webkit-scrollbar       { width: 3px; }
.chatbot-window__messages::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: var(--radius-full); }


/* Individual message bubble */
.chat-message {
    max-width:     86%;
    padding:       10px var(--space-4);
    border-radius: var(--radius);
    font-size:     var(--text-sm);
    line-height:   var(--leading-relaxed);
    white-space:   pre-line;
    animation:     messageIn 0.25s var(--ease-out) both;
}

@keyframes messageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Bot message — left aligned */
.chat-message--bot {
    background:              var(--white);
    color:                   var(--grey-700);
    border:                  1px solid var(--grey-200);
    align-self:              flex-start;
    border-bottom-left-radius: 3px;
}

/* User message — right aligned */
.chat-message--user {
    background:               var(--navy-800);
    color:                    var(--white);
    align-self:               flex-end;
    border-bottom-right-radius: 3px;
}


/* ---- Typing indicator ---- */

.chat-typing {
    display:     flex;
    align-items: center;
    gap:         4px;
    padding:     10px var(--space-4);
    background:  var(--white);
    border:      1px solid var(--grey-200);
    border-radius:   var(--radius);
    border-bottom-left-radius: 3px;
    align-self:  flex-start;
}

.chat-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--grey-400);
    animation:     typingBounce 1s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.20s; }
.chat-typing span:nth-child(3) { animation-delay: 0.40s; }

@keyframes typingBounce {
    0%,  60%, 100% { transform: translateY(0);    opacity: 0.40; }
    30%             { transform: translateY(-6px); opacity: 1.00; }
}


/* ---- Quick reply chips ---- */

.chatbot-window__quick-replies {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-2);
    padding:    var(--space-3) var(--space-4);
    background: var(--white);
    border-top: 1px solid var(--grey-200);
}

.chat-chip {
    background:    var(--grey-100);
    border:        1px solid var(--grey-200);
    color:         var(--grey-600);
    padding:       6px var(--space-3);
    border-radius: var(--radius-full);
    font-family:   var(--font-body);
    font-size:     var(--text-xs);
    font-weight:   var(--weight-medium);
    cursor:        pointer;
    transition:    var(--transition-fast);
    white-space:   nowrap;
}

.chat-chip:hover {
    background:   var(--cyan-500);
    border-color: var(--cyan-500);
    color:        var(--navy-800);
    font-weight:  var(--weight-bold);
}


/* ---- Input row ---- */

.chatbot-window__input-row {
    display:     flex;
    gap:         var(--space-2);
    padding:     var(--space-3) var(--space-4);
    background:  var(--white);
    border-top:  1px solid var(--grey-200);
    flex-shrink: 0;
}

.chatbot-window__input {
    flex:          1;
    border:        1.5px solid var(--grey-200);
    border-radius: var(--radius);
    padding:       9px var(--space-3);
    font-family:   var(--font-body);
    font-size:     var(--text-sm);
    color:         var(--grey-900);
    background:    var(--grey-50);
    outline:       none;
    transition:    var(--transition-fast);
}

.chatbot-window__input:focus {
    border-color: var(--cyan-600);
    background:   var(--white);
    box-shadow:   0 0 0 3px rgba(0, 150, 200, 0.10);
}

.chatbot-window__input::placeholder {
    color: var(--grey-300);
}

.chatbot-window__send {
    width:           38px;
    height:          38px;
    border-radius:   var(--radius);
    background:      var(--navy-800);
    color:           var(--white);
    font-size:       17px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    cursor:          pointer;
    border:          none;
    transition:      var(--transition-fast);
}

.chatbot-window__send:hover {
    background: var(--cyan-500);
    color:      var(--navy-800);
}


/* ================================================================
   02. WHATSAPP FLOAT BUTTON
   Fixed bottom-left — quick contact option
================================================================ */

.wa-float {
    position:        fixed;
    bottom:          28px;
    left:            28px;
    z-index:         var(--z-modal);

    width:           56px;
    height:          56px;
    border-radius:   50%;

    background:      #25D366;
    color:           var(--white);
    font-size:       26px;

    display:         flex;
    align-items:     center;
    justify-content: center;

    text-decoration: none;
    transition:      var(--transition);
    box-shadow:      0 4px 20px rgba(37, 211, 102, 0.45);
}

.wa-float:hover {
    transform:   scale(1.12);
    box-shadow:  0 8px 30px rgba(37, 211, 102, 0.60);
    background:  #20ba58;
}

/* Tooltip on hover */
.wa-float::before {
    content:        'Chat on WhatsApp';
    position:       absolute;
    left:           calc(100% + 12px);
    top:            50%;
    transform:      translateY(-50%);
    background:     #075e54;
    color:          var(--white);
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-semi);
    white-space:    nowrap;
    padding:        6px 12px;
    border-radius:  var(--radius);
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--duration-base) var(--ease);
}

.wa-float:hover::before {
    opacity: 1;
}


/* ================================================================
   03. FOOTER
   Four-column layout — brand, curricula, courses, company
================================================================ */

.footer {
    background:  var(--grey-900);
    color:       var(--white);
    padding-top: var(--space-20);
}


/* ---- Main grid ---- */

.footer__grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-16);
    padding:               0 var(--section-x) var(--space-16);
    border-bottom:         1px solid rgba(255, 255, 255, 0.07);
}


/* ---- Brand column ---- */

.footer__logo {
    display:         inline-flex;
    align-items:     center;
    gap:             14px;
    max-width:       360px;
    color:           var(--white);
    text-decoration: none;
}

.footer__logo-badge {
    width:           54px;
    height:          54px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
    border-radius:   var(--radius-sm);
    background:      var(--white);
    box-shadow:      0 14px 30px rgba(0, 0, 0, 0.22);
}

.footer__logo-badge img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    transform:       scale(1.58);
}

.footer__logo-text {
    font-family:    var(--font-display);
    font-size:      clamp(16px, 1.6vw, 21px);
    font-weight:    var(--weight-black);
    line-height:    1.08;
    letter-spacing: 0;
    text-transform: uppercase;
}

.footer__logo-text strong {
    color:       var(--accent-green);
    font-weight: var(--weight-black);
}

.footer__brand-desc {
    font-size:     var(--text-sm);
    color:         rgba(255, 255, 255, 0.40);
    line-height:   var(--leading-relaxed);
    margin:        var(--space-5) 0 var(--space-6);
    max-width:     300px;
}

/* Social icons row */
.footer__socials {
    display:   flex;
    gap:       var(--space-3);
    flex-wrap: wrap;
}

.footer__social {
    width:           38px;
    height:          38px;
    border-radius:   var(--radius);
    background:      rgba(255, 255, 255, 0.08);
    color:           var(--social-color, rgba(255, 255, 255, 0.72));
    font-size:       19px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    transition:      var(--transition);
    border:          1px solid rgba(255, 255, 255, 0.10);
}

.footer__social:hover {
    background:   var(--social-color, var(--cyan-500));
    color:        var(--social-contrast, var(--white));
    border-color: var(--social-color, var(--cyan-500));
    transform:    translateY(-2px);
    box-shadow:   0 10px 24px rgba(0, 0, 0, 0.22);
}

.footer__social--x         { --social-color: #ffffff; --social-contrast: #0f172a; }
.footer__social--facebook  { --social-color: #1877f2; }
.footer__social--instagram { --social-color: #e4405f; }
.footer__social--linkedin  { --social-color: #0a66c2; }
.footer__social--youtube   { --social-color: #ff0000; }
.footer__social--tiktok    { --social-color: #ffffff; --social-contrast: #0f172a; }
.footer__social--whatsapp  { --social-color: #25d366; --social-contrast: #073b1d; }


/* ---- Link columns ---- */

.footer__col-title {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          rgba(255, 255, 255, 0.30);
    margin-bottom:  var(--space-5);
}

.footer__links {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.footer__links a {
    font-size:       var(--text-sm);
    color:           rgba(255, 255, 255, 0.50);
    text-decoration: none;
    transition:      color var(--duration-fast) var(--ease);
    line-height:     1.3;
}

.footer__links a:hover {
    color: var(--cyan-500);
}


/* ---- Contact info in footer ---- */

.footer__contact-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    color:       rgba(255, 255, 255, 0.50);
    margin-bottom:var(--space-3);
}

.footer__contact-item:last-child {
    margin-bottom: 0;
}

.footer__contact-item i {
    font-size:   16px;
    color:       var(--cyan-500);
    flex-shrink: 0;
    margin-top:  1px;
}


/* ---- Bottom bar ---- */

.footer__bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-4);
    padding:         var(--space-6) var(--section-x);
}

.footer__copyright {
    font-size: var(--text-sm);
    color:     rgba(255, 255, 255, 0.30);
}

.footer__copyright a {
    color:           var(--cyan-500);
    text-decoration: none;
    font-weight:     var(--weight-medium);
}

.footer__copyright a:hover {
    text-decoration: underline;
}

/* Legal links */
.footer__legal {
    display: flex;
    gap:     var(--space-6);
}

.footer__legal a {
    font-size:       var(--text-xs);
    color:           rgba(255, 255, 255, 0.30);
    text-decoration: none;
    transition:      color var(--duration-fast) var(--ease);
}

.footer__legal a:hover {
    color: rgba(255, 255, 255, 0.70);
}


/* ================================================================
   04. TOAST NOTIFICATIONS
   Slide in from bottom right — feedback after form actions
================================================================ */

.toast-container {
    position:       fixed;
    bottom:         var(--space-6);
    right:          var(--space-6);
    z-index:        var(--z-toast);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    pointer-events: none;
}

.toast {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    min-width:     300px;
    max-width:     380px;
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-medium);
    line-height:   var(--leading-relaxed);
    box-shadow:    var(--shadow-lg);
    pointer-events:all;

    /* Slide in from right */
    animation: toastSlideIn 0.35s var(--ease-spring) both;
}

@keyframes toastSlideIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.toast.is-leaving {
    animation: toastSlideOut 0.25s var(--ease-in) forwards;
}

@keyframes toastSlideOut {
    to { transform: translateX(110%); opacity: 0; }
}

/* Toast variants */
.toast--success {
    background:   var(--success-bg);
    color:        var(--success);
    border:       1px solid rgba(22, 163, 74, 0.25);
    border-left:  3px solid var(--success);
}

.toast--error {
    background:   var(--error-bg);
    color:        var(--error);
    border:       1px solid rgba(220, 38, 38, 0.25);
    border-left:  3px solid var(--error);
}

.toast--info {
    background:   var(--cyan-100);
    color:        var(--cyan-700);
    border:       1px solid rgba(0, 150, 200, 0.25);
    border-left:  3px solid var(--cyan-600);
}

/* Toast icon */
.toast__icon {
    font-size:   20px;
    flex-shrink: 0;
    margin-top:  1px;
}

/* Toast close button */
.toast__close {
    margin-left: auto;
    font-size:   16px;
    opacity:     0.50;
    cursor:      pointer;
    flex-shrink: 0;
    transition:  opacity var(--duration-fast) var(--ease);
    border:      none;
    background:  none;
    color:       inherit;
    padding:     0;
    line-height: 1;
}

.toast__close:hover {
    opacity: 1;
}


/* ================================================================
   05. PAGE LOADER
   Full-screen loading overlay — shown briefly on first load
================================================================ */

.page-loader {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      var(--navy-900);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-5);

    transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.page-loader.is-hidden {
    opacity:    0;
    visibility: hidden;
    pointer-events: none;
}

/* Spinning ring */
.page-loader__spinner {
    width:        52px;
    height:       52px;
    border:       3px solid rgba(200, 165, 92, 0.20);
    border-top-color: var(--cyan-500);
    border-radius:50%;
    animation:    loaderSpin 0.75s linear infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

/* Logo mark inside loader */
.page-loader__logo {
    font-family: var(--font-display);
    font-size:   var(--text-xl);
    font-weight: var(--weight-bold);
    color:       var(--white);
    letter-spacing: 0.02em;
}

.page-loader__logo span {
    color: var(--cyan-500);
}


/* ================================================================
   06. BACK TO TOP BUTTON
   Appears after user scrolls 400px — smooth scroll to top
================================================================ */

.back-to-top {
    position:        fixed;
    bottom:          96px;    /* Sits above the chatbot FAB */
    right:           28px;
    z-index:         var(--z-fixed);

    width:           44px;
    height:          44px;
    border-radius:   var(--radius);
    background:      var(--white);
    color:           var(--navy-800);
    font-size:       20px;
    border:          1px solid var(--grey-200);
    box-shadow:      var(--shadow-md);

    display:         flex;
    align-items:     center;
    justify-content: center;

    cursor:          pointer;
    transition:      var(--transition);

    /* Hidden until user scrolls */
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(10px);
}

/* Visible state — JS adds this after 400px scroll */
.back-to-top.is-visible {
    opacity:        1;
    pointer-events: all;
    transform:      translateY(0);
}

.back-to-top:hover {
    background:   var(--navy-800);
    color:        var(--white);
    border-color: var(--navy-800);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-lg);
}


/* ================================================================
   RESPONSIVE — COMPONENTS
================================================================ */

/* Tablet */
@media (max-width: 900px) {

    /* Footer — 2 column layout */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-10);
    }
}

/* Mobile */
@media (max-width: 600px) {

    /* Chatbot window — full width on mobile */
    .chatbot-window {
        width:  calc(100vw - 56px);
        right:  var(--space-4);
        bottom: 92px;
    }

    /* Hide chatbot tooltip on mobile */
    .chatbot-fab::before { display: none; }
    .wa-float::before    { display: none; }

    /* Toast — full width */
    .toast {
        min-width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }

    .toast-container {
        right:  var(--space-3);
        bottom: var(--space-3);
        left:   var(--space-3);
    }

    /* Footer — single column */
    .footer__grid {
        grid-template-columns: 1fr;
        gap:                   var(--space-8);
        padding-bottom:        var(--space-10);
    }

    .footer__bottom {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }

    .footer__logo {
        max-width: 100%;
    }

    .footer__logo-text {
        font-size: 15px;
    }

    /* Back to top — move away from chatbot */
    .back-to-top {
        bottom: 92px;
        right:  var(--space-4);
    }
}

/* Very small phones */
@media (max-width: 380px) {

    .chatbot-fab { width: 54px; height: 54px; font-size: 22px; }
    .wa-float    { width: 50px; height: 50px; font-size: 24px; }
}