/* eservice/assets/css/apply-styles.css */

        .main-wrapper { 
            width: 100%; 
            max-width: 600px; 
            background-color: #f8f9fa; 
            min-height: 100vh; 
            position: relative; 
            box-shadow: 0 0 20px rgba(0,0,0,0.1); 
        }

        /* --- STYLES FOR APPLY STATUS & LIST --- */
        .scroll-content { padding-bottom: 90px; }
        .profile-header { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 27px 15px; text-align: center; position: relative; z-index: 1; }
        
        .user-avatar { width: 55px; height: 55px; background: rgba(255,255,255,0.2); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 8px; }
        .profile-img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); object-fit: cover; }
        .status-card { margin: -25px 15px 10px 15px; position: relative; z-index: 10; }
        .card-inner { background: #fff; border-radius: 12px; padding: 15px 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
        .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; }
        .info-item i { font-size: 18px; color: var(--brand); margin-bottom: 3px; }
        .info-item span { display: block; font-size: 9px; color: #888; text-transform: uppercase; }
        .info-item b { font-size: 12px; color: #333; }
        .badge-status { background: var(--brand); color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 500; }
        
        .status-stepper { display: flex; justify-content: space-between; position: relative; padding: 15px 10px; background: #fff; margin-bottom: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .status-stepper::before { display: none; } 
        .step-item { position: relative; z-index: 2; text-align: center; flex: 1; }
        .step-item:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: #eee; z-index: 1; transition: background 0.3s ease; }
        .step-item.completed:not(:last-child)::after { background: var(--brand); }
        .step-icon { width: 32px; height: 32px; background: #fff; border: 2px solid #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; color: #ccc; font-size: 14px; position: relative; z-index: 2; }
        .step-label { font-size: 10px; color: #999; }
        .step-time { font-size: 8px; color: #aaa; margin-top: 2px; display: block; line-height: 1; }
        .step-item.active .step-icon { border-color: var(--brand); color: var(--brand); }
        .step-item.active .step-label { color: var(--brand); font-weight: 600; }
        .step-item.completed .step-icon { background: var(--brand); border-color: var(--brand); color: #fff; }
        .step-item.completed .step-label { color: var(--brand); font-weight: 600; }
        .step-item.active .step-icon::after { content: ""; position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: signal-wave 1.5s infinite ease-out; box-sizing: content-box; }

        .timeline-card { background: #fff; margin-bottom: 8px; border-radius: 4px; padding: 12px 15px; }
        .timeline-wrapper { position: relative; padding-left: 24px; margin-top: 10px; }
        .timeline-wrapper::before { display: none; } 
        .timeline-event { position: relative; margin-bottom: 20px; }
        .timeline-event:last-child { margin-bottom: 0; }
        .timeline-event::before { content: ""; position: absolute; top: 19px; bottom: -20px; left: -17px; width: 2px; background: #e0e0e0; z-index: 1; }
        .timeline-event:last-child::before { display: none; }
        .timeline-event.completed::before { background: var(--brand); }
        .timeline-point { position: absolute; left: -24px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #ccc; z-index: 2; transition: all 0.3s ease; box-sizing: border-box; }
        .timeline-event.completed .timeline-point { border-color: var(--brand); background: var(--brand); }
        .timeline-event.active .timeline-point { border-color: var(--brand); background: var(--brand); }
        .timeline-event.active .timeline-point::after { content: ""; position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: signal-wave 1.5s infinite ease-out; box-sizing: border-box; }
        @keyframes signal-wave { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
        .timeline-date { font-size: 10px; color: #888; font-weight: 500; }
        .timeline-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 3px; }
        .timeline-desc { font-size: 11px; color: #495057; background: #f8f9fa; border-left: 3px solid var(--brand); padding: 6px 10px; border-radius: 0 4px 4px 0; white-space: pre-line; margin-top: 3px; }

        .btn-outline-secondary.border-dashed, .btn-outline-danger.border-dashed { border-color: var(--brand) !important; color: var(--brand) !important; background-color: rgba(255, 140, 0, 0.05) !important; transition: all 0.25s ease-in-out !important; }
        .btn-outline-secondary.border-dashed:hover, .btn-outline-danger.border-dashed:hover { background-color: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important; box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3) !important; }
        .btn-outline-secondary.border-dashed:hover i, .btn-outline-danger.border-dashed:hover i { color: #ffffff !important; }

        .info-card { display: block; background: #fff; margin-bottom: 8px; border-radius: 2px; }
        .section-title { font-weight: 600; font-size: 13px; color: var(--brand-dark); padding: 8px 15px 4px 15px; display: flex; align-items: center; }
        .section-title::before { content: ""; width: 3px; height: 12px; background: var(--brand); margin-right: 8px; border-radius: 2px; }
        .detail-row { display: flex; justify-content: space-between; padding: 3px 15px; line-height: 1.2; }
        .detail-row span { font-size: 12px; color: #333; }
        .detail-row span:first-child { color: #888; flex-shrink: 0; margin-right: 10px; }
        .detail-row span:last-child { text-align: right; word-break: break-word; }
        .detail-row.total-row { border-top: 1px dashed #eee; margin-top: 6px; padding-top: 8px; padding-bottom: 8px; }
        .detail-row.total-row span { font-weight: 600; font-size: 13px; color: var(--brand-dark); }
        .detail-row.total-row .price { color: var(--brand); font-size: 15px; }
        .note-box { padding: 5px 15px 10px; }
        .note-text { font-size: 10px; color: #9a6d33; line-height: 1.4; background: #fff9f0; padding: 6px 10px; border-radius: 4px; border-left: 3px solid #ffcc80; }

        .bottom-nav { position: fixed; bottom: 0; width: 100%; max-width: 600px; height: 65px; background: #fff; display: flex; border-top: 1px solid #eee; z-index: 1000; box-shadow: 0 -3px 10px rgba(0,0,0,0.05); padding-bottom: env(safe-area-inset-bottom); left: 50%; transform: translateX(-50%); }
        .nav-btn { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #555555; transition: all 0.2s ease-in-out; }
        .nav-btn.active { color: var(--brand); font-weight: 600; }
        .nav-btn i { font-size: 20px; margin-bottom: 0px; color: #666666; transition: color 0.2s ease-in-out; }
        .nav-btn.active i { color: var(--brand); transform: translateY(-1px); }
        .nav-btn span { font-size: 10px; }
        .border-dashed { border-style: dashed !important; }

        /* --- STYLES FOR APPLY FORM (REGISTER) --- */
        .register-card { background: #fff; border-radius: 0 0 25px 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; margin-bottom: 20px; }
        .bottom-nav-action { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 12px 15px; display: flex; gap: 10px; border-top: 1px solid #eee; z-index: 1000; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); }
        .btn-nav-custom { flex: 1; border: none; border-radius: 12px; padding: 12px; font-weight: 600; font-size: 15px; transition: all 0.2s ease; }
        .btn-prev-custom { background: #e9ecef; color: #495057; }
        .btn-next-custom { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2); }
        .btn-nav-custom:active { transform: scale(0.96); }
        .header-section { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 25px 15px; text-align: center; }
        
        /* แก้ไข Step Indicator ให้ชิดล่างขวาของ Header */
        .step-indicator { 
            background: rgba(255, 255, 255, 0.2); 
            display: inline-block; 
            padding: 4px 12px; 
            border-radius: 15px; 
            font-size: 12px; 
            position: absolute; 
            bottom: 12px; 
            right: 12px; 
            margin: 0; 
            font-weight: 500; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
            backdrop-filter: blur(5px); 
        }       
        
        .btn-home-header { position: absolute; bottom: 1px; right: 12px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
        .btn-home-header:hover, .btn-home-header:active { background: rgba(255, 255, 255, 0.35); color: #fff; transform: scale(0.95); }

/* --- SHARED & MAP MODAL STYLES --- */
        .modal-fullscreen-custom { max-width: 100%; margin: 0; height: 100%; }
        .modal-fullscreen-custom .modal-content { height: 100vh; border-radius: 0; }
        .map-footer-action { position: absolute !important; bottom: 20px !important; left: 15px !important; right: 15px !important; z-index: 1000 !important; background: transparent !important; pointer-events: none; }
        .map-footer-action .d-flex { pointer-events: auto; }

        /* ✅ ปรับปรุง: ยกเลิก nowrap และรองรับการตัดคำ/ยืดหดอย่างถูกต้อง */
        .btn-cancel-map { 
            background: rgba(255, 255, 255, 0.95) !important; 
            backdrop-filter: blur(8px) !important; 
            color: #495057 !important; 
            border: 1px solid rgba(0, 0, 0, 0.1) !important; 
            white-space: normal !important; /* ปล่อยให้ขึ้นบรรทัดใหม่ได้ */
            word-break: break-word;
            min-width: 0; /* ป้องกัน Flexbox ดันจนล้น */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; 
        }
        .btn-cancel-map:hover { background-color: #ffffff !important; color: #dc3545 !important; border-color: #dc3545 !important; box-shadow: 0 6px 20px rgba(220, 53, 69, 0.2) !important; }

        .btn-confirm-map { 
            background-color: var(--brand, #ff8c00) !important; 
            color: #ffffff !important; 
            white-space: normal !important; /* ปล่อยให้ขึ้นบรรทัดใหม่ได้ */
            word-break: break-word;
            min-width: 0; /* ป้องกัน Flexbox ดันจนล้น */
            box-shadow: 0 4px 15px rgba(255, 140, 0, 0.35) !important; 
        }
        .btn-confirm-map:hover { background-color: var(--brand-dark, #e07b00) !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(224, 123, 0, 0.45) !important; opacity: 1 !important; }

        @media (min-width: 768px) { .map-footer-action .d-flex { justify-content: flex-end !important; width: auto !important; } .btn-cancel-map, .btn-confirm-map { width: auto !important; min-width: 140px; flex-grow: 0 !important; } }
        
        /* ✅ ปรับปรุง: ใน Mobile ให้รองรับ Flex ยืดหดตามข้อความ */
        @media (max-width: 767.98px) { 
            .map-footer-action .d-flex { width: 100% !important; gap: 8px; } 
            .btn-cancel-map { flex: 1 1 auto; min-width: 0; } 
            .btn-confirm-map { flex: 2 1 auto; min-width: 0; } 
        }

        #mapModal .modal-dialog { height: 100vh; max-width: 100%; margin: 0; }
        #mapModal .modal-content { height: 100vh; display: flex; flex-direction: column; }
        #mapModal .modal-body { position: relative; flex: 1; width: 100%; height: 100%; min-height: 300px; }
        #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }
        
        
        .transition-transform { transition: transform 0.3s ease; }
        [aria-expanded="true"] .transition-transform { transform: rotate(180deg); }   

/* LOADING OVERLAY (COMPACT VERSION) */
.loading-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.loading-center-card { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.4); padding: 2.5rem 3.5rem; border-radius: 2.5rem 0.6rem 2.5rem 0.6rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); text-align: center; animation: glassZoomIn 0.4s ease; min-width: 280px; }
.loading-spinner-wrapper { position: relative; width: 70px; height: 70px; margin: 0 auto; }
.glass-spinner { width: 100%; height: 100%; border: 4px solid rgba(255, 140, 0, 0.15); border-top: 4px solid var(--brand, #FF8C00); border-radius: 50%; animation: loadingSpin 0.9s linear infinite; }
.spinner-center-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: var(--brand, #FF8C00); animation: pulseIcon 1.8s ease-in-out infinite; }
.logo-main-text { font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, var(--brand, #FF8C00), var(--brand-dark, #4A0C46)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-sub-text { font-size: 0.8rem; font-weight: 700; color: #6c757d; text-transform: uppercase; letter-spacing: 2px; }
.loading-status-text { font-size: 0.95rem; font-weight: 600; color: #333; }
.animated-dots::after { content: ''; animation: runningDots 1.6s infinite; }

@keyframes glassZoomIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes loadingSpin { 100% { transform: rotate(360deg); } }
@keyframes pulseIcon { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
@keyframes runningDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
        
        .back-btn-float { position: fixed; top: 15px; left: calc(50% - 300px + 15px); z-index: 100; }
        @media (max-width: 600px) { .back-btn-float { left: 15px; } }