/*
========================================
-> FILE: edvdo-student-activity-detail.css
-> MODULE: Student Activity Detail UI
-> CREATED BY: vikrant@edvdo.com
-> DESCRIPTION:Contains all UI styles for AI Weekly Activity Detail
========================================
*/
.wellness-survey-app-wrapper { box-sizing: border-box; background-color: transparent; display: flex; justify-content: center; align-items: center; border-radius: 16px; }
.wellness-survey-app-wrapper * { box-sizing: border-box; }
.wellness-app-container { width: 100%; height: 85vh; max-height: 750px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.wellness-app-header { padding: 20px; border-bottom: 1px solid #f3f4f6; z-index: 10; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.wellness-header-left { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 50%;}
.wellness-header-right {flex: 1; display: flex; flex-direction: column; justify-content: center; width: 50%;}
.wellness-progress-text { font-size: 15px; color: #111827; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wellness-progress-text strong { font-size: 16px; font-weight: 700; white-space: nowrap; }
.wellness-progress-subtext { font-weight: 400; color: #4b5563; font-size: 14px; }
.wellness-progress-bar-bg { background: #e2e8f0; height: 8px; border-radius: 99px; width: 100%; overflow: hidden; }
.wellness-progress-bar-fill { background: #818cf8; height: 100%; width: 33%; transition: width 0.4s ease; border-radius: 99px; }
.wellness-pattern-card { background: #F0F4FF; border-radius: 8px; padding: 20px; width: 100%; font-size: 13px; color: #4b5563; line-height: 1.5; border: none; }
.wellness-pattern-card strong { color: #111827; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.wellness-chat-feed { flex: 1; padding: 40px; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
.wellness-chat-feed::-webkit-scrollbar { display: none; }
.wellness-chat-row { display: none; flex-direction: column; opacity: 0; transform: translateY(15px); transition: all 0.4s ease; }
.wellness-chat-row.visible { display: flex; opacity: 1; transform: translateY(0); }
.wellness-sys-group { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.wellness-avatar { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; margin-top: 4px; }
.wellness-avatar img { width: 100%; height: 100%; object-fit: contain; }
.wellness-sys-bubble-stack { display: flex; flex-direction: column; gap: 6px; }
.wellness-sys-bubble { font-size: 16px; color: #111827; background: #FFF8F1; padding: 14px 18px; border-radius: 16px 16px 16px 4px; max-width: fit-content; line-height: 1.5; border: none; }
.wellness-user-bubble { align-self: flex-end; background: #F3F4F6; color: #111827; padding: 14px 18px; border-radius: 16px 16px 4px 16px; font-size: 14px; border: none; margin-top: 12px; margin-bottom: 40px; max-width: 85%; display: inline-block; font-weight: 500; }
.wellness-interactive-area { margin-left: 100px; margin-top: 8px; }
.wellness-grid-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 350px; margin-top: 16px; }
.wellness-option-btn { background: #F3F4F6; border: 1.5px solid transparent; padding: 12px 16px; border-radius: 99px; cursor: pointer; font-size: 16px; color: #374151; text-align: left; transition: 0.2s; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.wellness-option-btn:hover:not(:disabled) { background: #E5E7EB; }
.wellness-option-btn.selected { background: #FFFFFF; color: #111827; border-color: #4a5ee5; font-weight: 600; box-shadow: 0 2px 6px rgba(74, 94, 229, 0.08); }
.wellness-option-btn.selected::after { content: '\2714'; margin-left: auto; font-weight: bold; background: #4a5ee5; color: white; border-radius: 4px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.wellness-option-btn:disabled, .wellness-pill-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wellness-pill-container { display: flex; flex-wrap: wrap; gap: 12px; max-width: 650px; margin-top: 16px; }
.wellness-pill-btn { background: #F3F4F6; border: 1.5px solid transparent; padding: 12px 20px; border-radius: 99px; cursor: pointer; font-size: 16px; color: #475569; transition: 0.2s; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.wellness-pill-btn:hover:not(:disabled) { background: #E5E7EB; }
.wellness-pill-btn.selected { background: #FFFFFF; color: #111827; border-color: #4a5ee5; box-shadow: 0 2px 6px rgba(74, 94, 229, 0.08); }
.wellness-modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 100; }
.wellness-modal-box { background: #f8fafc; padding: 24px; border-radius: 16px; width: 320px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); position: relative; }
.wellness-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; padding: 4px; line-height: 1; }
.wellness-modal-title { font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 16px; text-align: left; }
.wellness-modal-input { width: 100%; padding: 14px 16px; border-radius: 99px; border: 1px solid #cbd5e1; outline: none; font-size: 14px; margin-bottom: 20px; box-sizing: border-box; background: #fff; }
.wellness-modal-btn { width: 100%; padding: 14px; border-radius: 8px; background: #4a5ee5; color: #fff; font-weight: 600; font-size: 15px; border: none; cursor: pointer; transition: 0.2s; }
.wellness-slider-box-container { max-width: 600px; padding: 10px 0; margin-top: 16px; }
.wellness-slider-wrapper { display: flex; align-items: center; gap: 24px; margin-bottom: 12px; }
.wellness-confidence-slider { -webkit-appearance: none; width: 100%; background: #e2e8f0; height: 10px; border-radius: 99px; outline: none; }
.wellness-confidence-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid #e2e8f0; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.wellness-slider-val { font-size: 24px; font-weight: 700; color: #4a5ee5; min-width: 60px; text-align: right; }
.wellness-slider-labels { display: flex; justify-content: space-between; padding-right: 84px; font-size: 13px; color: #94a3b8; font-weight: 500; }
.wellness-mobile-input-container { display: none; margin-top: 10px; }
.wellness-app-footer { padding: 20px 40px; border-top: 1px solid #f3f4f6; background: #fff; display: flex; justify-content: space-between; border-radius: 0 0 12px 12px; }
.wellness-action-btn { padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; border: none; }
.wellness-btn-back { background: #fff; color: #4a5ee5; border: 1px solid #cbd5e1; visibility: hidden; }
.wellness-btn-primary { background: #4a5ee5; color: white; min-width: 140px; }
.wellness-btn-primary:disabled { background: #cbd5e1; color: #f8fafc; cursor: not-allowed; }
.wellness-final-screen { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px; height: 100%; overflow-y: auto; }
.wellness-final-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; width: 100%; max-width: 650px; }
.wellness-final-header h2 { font-size: 22px; color: #10b981; font-weight: 600; margin: 0; }
.wellness-result-card { background: #fff; border: 1px solid #e2e8f0; padding: 28px; border-radius: 16px; margin-bottom: 24px; width: 100%; max-width: 650px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
.wellness-result-card h4 { margin-bottom: 12px; color: #0f172a; font-size: 18px; font-weight: 700; }
.wellness-result-card p { color: #475569; font-size: 15px; line-height: 1.6; }
.wellness-card-tip { background: #fffbeb; border-color: #fde68a; }
.wellness-card-tip h4 { color: #b45309; display: flex; align-items: center; gap: 8px; }

/*
========================================
-> MODULE: Student Dashboard Activity List
-> FILE: edvdo-student-dashboard-activity-list.css
-> CREATED BY: vikrant@edvdo.com
-> PAGE: Student Dashboard (Activity Section)
-> TASK ID:
-> DESCRIPTION: Styles for activity cards displayed on student dashboard.
========================================
*/

/*
========================================
-> DASHBOARD ACTIVITY LIST CSS
========================================
*/
/* Main Wrappers */
.edvdo-student-activities-dashboard-container { width: 100%; margin: auto; }
.edvdo-student-activities-dashboard-header { display: flex; flex-direction: column; justify-content: space-between; }

/* Header & Typography */
.act-container { width: 100%; box-sizing: border-box; }
.act-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 20px; background-color: #fff; }
.act-header h1 { font-size: 26px; font-weight: 700; color: #111827; margin: 0; }
.act-header p { font-size: 15px; color: #6b7280; margin: 6px 0 0; }

/* Hero / Welcome Banner */
.act-welcome { display: flex; align-items: center; justify-content: center; background: transparent; border: none; gap: 5%; }
.act-welcome-text { max-width: 320px; }
.act-welcome h2 { font-size: 40px; color: #3b82f6; font-weight: 600; margin: 0 0 12px 0; }
.act-welcome p { font-size: 17px; color: #374151; line-height: 1.5; margin: 0; }

/* Section Titles */
.act-section-title { font-size: 16px; color: #4b5563; font-weight: 600; margin: 0 0 16px 0; }

/* ========================================
   ACTIVITY CARDS (WITH ELEMENTOR FIX)
======================================== */
.edvdo-student-activities-dashboard-container .act-card { display: flex; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; transition: box-shadow 0.2s ease, border-color 0.2s ease; width: 100%; box-sizing: border-box !important; text-decoration: none !important; color: inherit; }
.edvdo-student-activities-dashboard-container .act-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.03); }

/* Shielding all children inside the card from Elementor's wildcards */
.edvdo-student-activities-dashboard-container .act-card *, .edvdo-student-activities-dashboard-container .act-card :after, .edvdo-student-activities-dashboard-container .act-card :before { box-sizing: border-box; }

/* Circular Icons */
.act-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; flex-shrink: 0; }

/* Icon Background Colors */
.bg-blue { background-color: #eef2ff; } 
.bg-orange { background-color: #fffbeb; }

/* Card Content Typography */
.act-content { flex: 1; min-width: 0; padding-right: 20px; }
.act-content h4 { font-size: 16px; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 10px; margin: 0 0 4px 0; }
.act-content p { font-size: 14px; color: #4b5563; line-height: 1.5; margin: 0; }

/* Meta Data (1 min) */
.act-meta-row { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.act-meta-text { font-size: 13px; color: #3b82f6; display: flex; align-items: center; font-weight: 500; }

/* Standard Buttons */
.act-btn { border: 1px solid #3b82f6; color: #3b82f6; background: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; margin-left: auto; text-decoration: none; display: inline-block; transition: background 0.2s ease; }
.act-btn:hover { background: #f8fafc; }

/* ========================================
   SHORTCODE BUTTON FIX 
======================================== */
.act-shortcode-wrapper { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; max-height: 48px; }

/* Target ONLY the links and buttons inside the shortcode. No wildcards! */
.edvdo-student-activities-dashboard-container .act-shortcode-wrapper a, .edvdo-student-activities-dashboard-container .act-shortcode-wrapper button { white-space: nowrap !important; margin: 0 !important; }

/* ========================================
   ELEMENTOR IMAGE FIXES
======================================== */
.edvdo-student-activities-dashboard-container .act-welcome img { width: 100%; max-width: 340px; height: auto; border-radius: unset; box-shadow: none; }
.edvdo-student-activities-dashboard-container .act-icon img { width: 24px; height: 24px; display: block; border: none; border-radius: 0; box-shadow: none; max-width: none; }
.edvdo-student-activities-dashboard-container .act-clock-icon { width: 14px !important; height: 14px !important; margin-right: 6px; border-radius: 0; box-shadow: none; }

/*assisment popup -----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Background Overlay - Max Z-Index to beat page builders */
#edvdo_assessment_overlay { visibility: hidden; opacity: 0; display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.75) !important; z-index: 2147483647 !important; align-items: center !important; justify-content: center !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; }

/* Trigger Class */
#edvdo_assessment_overlay.show-popup { visibility: visible !important; opacity: 1 !important; }

/* Popup Container Box */
#edvdo_assessment_overlay .edvdo_assessment_popup { width: 660px !important; max-width: 90vw !important; height: 462px !important; max-height: 90vh !important; background-color: #ffffff !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px !important; box-sizing: border-box !important; text-align: center !important; overflow-y: auto !important; }

/* The 'X' Close Button */
#edvdo_assessment_overlay .edvdo_assessment_close { position: absolute !important; top: 16px !important; right: 16px !important; background: transparent !important; border: none !important; font-size: 24px !important; cursor: pointer !important; color: #111111 !important; padding: 8px !important; line-height: 1 !important; min-width: 0 !important; min-height: 0 !important; }

/* Typography */
#edvdo_assessment_overlay .edvdo_assessment_title { color: #0b0c38 !important; font-size: 28px !important; font-weight: 700 !important; margin: 0 0 12px 0 !important; font-family: sans-serif !important; line-height: 1.2 !important; }
#edvdo_assessment_overlay .edvdo_assessment_subtitle { color: #717171 !important; font-size: 16px !important; margin: 0 0 40px 0 !important; font-family: sans-serif !important; line-height: 1.5 !important; }

/* Image Container - Flexbox to center the overlap */
#edvdo_assessment_overlay .edvdo_assessment_illustration { margin-bottom: 40px !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; }

/* Base Desktop Size for Images */
#edvdo_assessment_overlay .edvdo_assessment_illustration img { width: 64px !important; height: 64px !important; object-fit: cover !important; border-radius: 50% !important; border: 3px solid #ffffff !important; margin-left: -16px !important; position: relative !important; transition: all 0.3s ease !important; }

/* Remove overlap from the first image so it stays centered */
#edvdo_assessment_overlay .edvdo_assessment_illustration img:first-child { margin-left: 0 !important; } 

/* The Blue Start Button */
#edvdo_assessment_overlay .edvdo_assessment_btn { width: 85% !important; display: block !important; padding: 16px 0 !important; background-color: #4c56e3 !important; color: #ffffff !important; font-family: sans-serif !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; border-radius: 12px !important; transition: background-color 0.2s ease !important; box-sizing: border-box !important; flex-shrink: 0 !important; min-height: 52px !important; position: relative !important; z-index: 10 !important; }
#edvdo_assessment_overlay .edvdo_assessment_btn:hover { background-color: #3a42b9 !important; }

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
    .act-welcome { padding: 30px 0; gap: 40px; } 
    .act-welcome h2 { font-size: 36px; } 
}

@media (min-width: 481px) and (max-width: 1024px) {
    .wellness-app-header { padding: 15px; flex-direction: column;}
    .wellness-header-left { width: 100%;}
    .wellness-header-right { width: 100%;}
    .act-welcome { flex-direction: column; text-align: center; padding: 30px 0; gap: 30px; } 
    .act-welcome p { margin: 0 auto; }
}

@media (min-width: 320px) and (max-width: 480px) {
   .wellness-app-header { padding: 15px; flex-direction: column; }     .wellness-header-left, .wellness-header-right { width: 100%; }     /* 1. Make Image (Avatar) Smaller */.wellness-avatar { width: 50px; height: 50px; }     .wellness-sys-group { gap: 10px; }     /* 2. Adjust Spacing for Smaller Avatar */.wellness-chat-feed { padding: 20px; }     .wellness-interactive-area { margin-left: 60px; /* Aligns with 50px avatar + 10px gap */ margin-top: 4px; }     /* 3. Make Text (Chat Bubbles) Smaller */.wellness-sys-bubble { font-size: 14px; padding: 10px 14px; }     .wellness-user-bubble { font-size: 13px; padding: 10px 14px; margin-bottom: 24px; max-width: 90%; }          /* 4. Make Options (Buttons & Pills) Smaller */.wellness-grid-options { gap: 8px; grid-template-columns: 1fr; /* Optional: stacks grid items on very small screens */ }     .wellness-option-btn { font-size: 14px; padding: 10px 12px; gap: 8px; }          .wellness-pill-container { gap: 8px; }     .wellness-pill-btn { font-size: 14px; padding: 8px 16px; gap: 6px; }     /* 5. Make Footer Actions Smaller */.wellness-app-footer { padding: 15px 20px; }     .wellness-action-btn { padding: 10px 24px; font-size: 14px; }     .wellness-btn-primary { min-width: 110px; }          /* Additional: Scale down slider if present */.wellness-slider-wrapper { gap: 16px; }     .wellness-slider-val { font-size: 20px; min-width: 45px; }
.wellness-slider-wrapper {
    position: relative;
}

.wellness-slider-labels {
    display: flex;
    justify-content: space-between;
}

.wellness-slider-labels span:last-child {
    position: relative;
    left: 45px; 
}
    .edvdo-student-activities-dashboard-container { padding: 0; }
    .act-welcome { flex-direction: column; text-align: center; padding: 20px 0; gap: 20px; }
    .edvdo-student-activities-dashboard-container .act-welcome img { max-width: 250px; } 
    .act-welcome h2 { font-size: 30px; }
    .edvdo-student-activities-dashboard-container .act-card { padding: 16px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
    
    /* Make wrappers 100% width on mobile */
    .edvdo-student-activities-dashboard-container .act-card .act-btn, .edvdo-student-activities-dashboard-container .act-card .act-shortcode-wrapper { display: block; width: 100%; margin: 15px 0 0 0; text-align: center; order: 3; max-height: none; }
    
    /* Force specific buttons to stretch */
    .edvdo-student-activities-dashboard-container .act-card .act-shortcode-wrapper a, .edvdo-student-activities-dashboard-container .act-card .act-shortcode-wrapper button { width: 100% !important; display: block !important; }
    .edvdo-student-activities-dashboard-container .act-card .act-content { flex: 1; order: 2; padding-right: 0; } 
    .edvdo-student-activities-dashboard-container .act-card .act-icon { order: 1; margin-right: 12px; width: 40px; height: 40px; }
    .edvdo-student-activities-dashboard-container .act-icon img { width: 20px; height: 20px; }
    .act-swap-ui .act-chevron { display: none !important; }
}

/* ========================================
   THE FINAL BUTTON & LAYOUT FIX
======================================== */
/* 1. Keep the plugin container from breaking the card height */
.edvdo-student-activities-dashboard-container .edvdo_shi_checkin_popup { min-height: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; display: block !important; }

/* 2. Rebuild the button style for the "Check-In Now" link */
.edvdo-student-activities-dashboard-container .act-shortcode-wrapper a { display: inline-block !important; padding: 8px 16px !important; margin-left: auto !important; white-space: nowrap !important; text-decoration: none !important; color: #3b82f6 !important; background: #fff !important; border: 1px solid #3b82f6 !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; transition: background 0.2s ease !important; cursor: pointer !important; }
.edvdo-student-activities-dashboard-container .act-shortcode-wrapper a:hover { background: #f8fafc !important; }

/* 3. Ensure the wrapper stays tucked to the right on Desktop */
.act-shortcode-wrapper { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }

/* ========================================
   MOBILE TWEAK 
======================================== */
@media (max-width: 480px) {
    .edvdo-student-activities-dashboard-container .act-shortcode-wrapper { width: 100%; margin: 15px 0 0 0; }
    .edvdo-student-activities-dashboard-container .act-shortcode-wrapper a { width: 100% !important; text-align: center !important; }
    #edvdo_assessment_overlay .edvdo_assessment_popup { width: 90vw !important; height: auto !important; padding: 32px 24px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_close { top: 5px !important; right: 12px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_title { font-size: 22px !important; margin-bottom: 8px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_subtitle { font-size: 14px !important; margin-bottom: 32px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_illustration { margin-bottom: 32px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_btn { width: 100% !important; padding: 14px 0 !important; font-size: 15px !important; }
    #edvdo_assessment_overlay .edvdo_assessment_illustration img { width: 44px !important; height: 44px !important; margin-left: -10px !important; border-width: 2px !important; }
}