/* ==========================================
   MAIN CONTAINER & GLOBAL
   ========================================== */
.sos_container { 
    width: 100%; /* Changed from 100vw */
    max-width: 100%; 
    min-height: 100vh; 
    position: relative; 
    /* Removed left: 50% and transform: translateX(-50%) */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    box-sizing: border-box; 
    background: url('/wp-content/uploads/2026/06/0b7e0130fe644ffa162c8a72c39be244dd7f6003.png') center/cover no-repeat; 
    overflow-x: hidden; 
}
.sos_container * { box-sizing: border-box; font-family: Roboto, sans-serif; }

/* ==========================================
   GLASSMORPHISM MAIN CARD
   ========================================== */
.sos_main_card { width: 100%; max-width: 530px; min-height: 365px; padding: 32px; border-radius: 12px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.6); display: flex; flex-direction: column; position: relative; overflow: visible; transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.sos_main_card.sos_main_card_expanded { max-width: 850px; min-height: 529px; }

/* ==========================================
   STEP WRAPPERS & ANIMATION
   ========================================== */
.sos_step_wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; animation: none; overflow: visible; scrollbar-width: none; -ms-overflow-style: none; }
.sos_step_wrapper::-webkit-scrollbar { display: none; }
.sos_fade_in { animation: sosFadeInStep 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.1s; opacity: 0; }
@keyframes sosFadeInStep { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.sos_heading { margin: 0 0 20px; color: #000; text-align: left; }

/* ==========================================
   STEP 1: ROLE SELECTION
   ========================================== */
.sos_options_wrapper { display: flex; justify-content: space-between; gap: 20px; flex-grow: 1; }
.sos_option_card { flex: 1; background: #FFF; border: 1px solid transparent; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 25px 20px; }
.sos_option_card:hover, .sos_option_card.sos_active { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); background: #F4F7FF; border: 1px solid #5C55FF; }
.sos_option_card:hover .sos_option_label, .sos_option_card.sos_active .sos_option_label { color: #5C55FF; }
.sos_option_label { margin: 0; color: #000; font-weight: 600; transition: color 0.3s ease; }
.sos_image_wrapper { 
    width: 76px; 
    height: 76px; 
    margin-bottom: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; /* Forces the wrapper to be a circle */
    overflow: hidden;   /* Prevents the square edges of the image from showing */
}

.sos_profile_image { 
    width: 100%; 
    height: 100%; 
    border-radius: 50% !important; /* Enforces the circle on the image itself */
    object-fit: cover; 
    display: block;
}

.sos_parent_image { 
    width: 76px; 
    height: auto; 
    object-fit: contain; 
}

/* ==========================================
   STEP 2: HELP OPTIONS
   ========================================== */
.sos_action_stack { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.sos_action_card { flex: 1; border-radius: 10px; padding: 20px 24px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; justify-content: center; border: 1px solid transparent; }
.sos_action_card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.sos_card_call { background-color: #FDF3E3; }
.sos_card_chat { background-color: #E6F7FF; }
.sos_action_content { position: relative; z-index: 2; }
.sos_action_title { margin: 0 0 6px; color: #000; font-weight: 600; font-size: 17px; }
.sos_action_desc { margin: 0; color: #4A4A4A; font-size: 14px; }
.sos_badge { position: absolute; top: 20px; right: 20px; background-color: #0A192F; color: #FFF; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; z-index: 2; }
.sos_action_graphic { position: absolute; bottom: -15px; right: -10px; height: 110px; width: auto; object-fit: contain; z-index: 1; pointer-events: none; }

/* ==========================================
   STEP 3: DROPDOWNS & REQUEST FORM
   ========================================== */
#sos_schedule_selectors { display: flex; gap: 15px; width: 100%; max-height: 0; opacity: 0; margin-bottom: 0; overflow: visible; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
#sos_schedule_selectors.sos_expanded_selectors { max-height: 300px; opacity: 1; margin-bottom: 25px; padding-top: 5px; pointer-events: auto; }
input[type="radio"]:focus { outline: none; border-color: #5C55FF !important; }
button#sos_confirm_btn:hover, button#sos_home_btn:hover { opacity: 0.9; transform: translateY(-1px); }

#sos_step_3 { align-items: center; width: 100%; background: #FFF; padding: 35px 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.sos_step_title { text-align: center; margin: 0 0 5px; font-size: 24px; color: #111; }
.sos_step_subtitle { text-align: center; color: #666; margin: 0 0 30px; }
.sos_form_inner { width: 100%; max-width: 480px; text-align: left; margin: 0 auto; }
.sos_form_label { font-weight: 600; margin-bottom: 15px; color: #222; }
.sos_radio_wrapper { display: flex; align-items: center; padding: 15px; border-radius: 10px; cursor: pointer; background: #fff; transition: border-color 0.2s; }
#sos_wrapper_now { border: 1px solid #5C55FF; margin-bottom: 15px; }
#sos_wrapper_later { border: 1px solid #e0e0e0; margin-bottom: 20px; }
.sos_radio_input { margin-right: 15px; transform: scale(1.2); accent-color: #5C55FF; }
.sos_radio_label { cursor: pointer; width: 100%; }
.sos_radio_title { display: block; font-weight: 600; color: #111; }
.sos_radio_desc { display: block; color: #666; font-size: 13px; }
.sos_selector_col { flex: 1; }
.sos_select_label { display: block; margin-bottom: 6px; color: #444; font-weight: 500; font-size: 13px; }

/* Custom Dropdown Styling to Replace Native <select> */
.sos_custom_dropdown { position: relative; width: 100%; }
.sos_dropdown_selected { width: 100%; padding: 10px 35px 10px 12px; border-radius: 8px; border: 1px solid #ccc; background-color: #fff; font-size: 14px; color: #111; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; transition: border-color 0.2s; }
.sos_custom_dropdown.active .sos_dropdown_selected { border-color: #5C55FF; box-shadow: 0 0 0 2px rgba(92, 85, 255, 0.1); }
.sos_dropdown_options { position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 9999; max-height: 220px; overflow-y: auto; display: none; }
.sos_custom_dropdown.active .sos_dropdown_options { display: block; }
.sos_dropdown_item { padding: 12px 16px; font-size: 14px; color: #111; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #f0f0f0; }
.sos_dropdown_item:last-child { border-bottom: none; }
.sos_dropdown_item:hover, .sos_dropdown_item.selected { background: #F4F7FF; color: #5C55FF; font-weight: 500; }

.sos_primary_btn { width: 100%; background: #5C55FF; color: #fff; border: none; padding: 14px; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background 0.2s; }

/* ==========================================
   STEP 4: SUCCESS MESSAGE
   ========================================== */
#sos_step_4 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; align-items: center; justify-content: center; background: #eaf8ed; padding: 40px; border-radius: 12px; text-align: center; box-sizing: border-box; }
.sos_success_icon_box { background: #00c853; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
#sos_step_4 .edh3 { color: #4a4a4a; font-size: 24px; font-weight: 600; margin: 0 0 12px; }
#sos_step_4 .edp3 { color: #5f6368; font-size: 15px; margin: 0 0 32px; }
.sos_primary_btn.sos_home_btn { max-width: 400px; width: 100%; background: #4255d4; padding: 14px; font-size: 15px; border-radius: 8px; font-weight: 600; transition: all 0.2s ease; }
.sos_primary_btn.sos_home_btn:hover { background: #3646ad; }

/* =========================================================
   COMPACT RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================= */
@media screen and (max-width: 1024px) {
    .sos_container { padding: 15px 10px; }
    .sos_main_card { min-height: auto; padding: 20px 15px; }
    .sos_main_card.sos_main_card_expanded { min-height: 400px; }
    #sos_step_3 { padding: 20px 15px !important; }
    .sos_options_wrapper { flex-direction: column; gap: 12px; }
    .sos_option_card { width: 100%; padding: 15px; }
    .sos_action_card { padding: 16px 16px 20px; }
    .sos_badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 10px; }
    .sos_action_graphic { height: 75px; bottom: -10px; right: -5px; }
    #sos_schedule_selectors { flex-direction: column; gap: 12px; }
    #sos_schedule_selectors.sos_expanded_selectors { max-height: 250px; }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    .sos_container { padding: 20px 15px; }
    #sos_step_3 { padding: 25px 15px !important; }
    .sos_options_wrapper { gap: 15px; }
    .sos_option_card { padding: 20px; }
    .sos_action_graphic { height: 85px; }
}