@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*
font-family: "Montserrat", sans-serif;
font-family: 'Lucida Grande';
*/

body{ padding:0; margin:0; font-size:14px; color:#404040; font-family: "Montserrat", sans-serif;}
a, button{outline:none !important; text-decoration:none; box-shadow:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important; color: #232423;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}

.container{ width:96%; max-width:1290px; margin:0 auto; padding:0;}

@font-face {
    font-family: 'Lucida Grande';
    src: url('../fonts/LucidaGrande-Bold.eot');
    src: url('../fonts/LucidaGrande-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/LucidaGrande-Bold.woff2') format('woff2'), url('../fonts/LucidaGrande-Bold.woff') format('woff'), url('../fonts/LucidaGrande-Bold.ttf') format('truetype'), url('../fonts/LucidaGrande-Bold.svg#LucidaGrande-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lucida Grande';
    src: url('../fonts/LucidaGrande.eot');
    src: url('../fonts/LucidaGrande.eot?#iefix') format('embedded-opentype'), url('../fonts/LucidaGrande.woff2') format('woff2'), url('../fonts/LucidaGrande.woff') format('woff'), url('../fonts/LucidaGrande.ttf') format('truetype'), url('../fonts/LucidaGrande.svg#LucidaGrande') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.wrapper{ display: flex; flex-direction: column; min-height: 100vh;}

/*===================
 		HEADER 
===================*/
.header_sec{ padding: 0;}
.header_sec .navbar{ background: linear-gradient(5deg, #95b54a 0%, #d3e1ad 100%); margin: 0 -23px; padding: 8px 40px 8px 66px; position: relative;}
.header_sec .navbar::before{ content: ""; width: 47px; height: 100%; background: url(../images/header-curve1.png) no-repeat left top; background-size: 100% 100%; position: absolute; top: 0; left: 0;}
.header_sec .navbar::after{ content: ""; width: 47px; height: 100%; background: url(../images/header-curve1.png) no-repeat left top; background-size: 100% 100%; position: absolute; top: 0; right: 0; transform: scaleX(-1);}
.header_sec .brand-logo{ width: 23%;}
.header_sec .head-title{ width: 60%;}
.header_sec h1{ margin: 0; padding: 0; font-size: 36px; font-weight: 900; color: #fff; text-align: center;}
.header_sec .right-info{ width: 23%; display: flex; align-items: center; justify-content: end; gap: 12px;}
.header_sec .sign_out{ margin: 0; padding: 9px 22px; background: rgba(255,255,255,0.3); border-radius: 50px; font-size: 14px; color: #232423; font-weight: 700; font-family: 'Lucida Grande'; display: inline-flex; align-items: center; gap: 6px;}
.header_sec .sign_out:hover{ background: #fff;}


.notifyWrapper{ margin: 0; padding: 0; position: relative;}
.notifyWrapper > a{ display: inline-flex; align-items: center; color: #fff; text-decoration: none; transition: opacity .2s;}
.notifyWrapper > a:hover{ opacity: .8;}
.notifyWrapper .notify-bell{ font-size: 34px; line-height: 1;}
.notifyWrapper .dropdown-menu{ padding: 0; min-width: 300px; max-width: 300px; border: none; border-radius: 5px; top: 100% !important; left: auto !important; right: 0 !important;}
.notifyWrapper .notifyHeader{ margin: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid #e8e8ea;}
.notifyWrapper .notifyHeader .notifyHeader-top{ display: flex; justify-content: space-between; align-items: center;}
.notifyWrapper .notifyHeader h4{ margin: 0; padding: 0; font-size: 11px; font-weight: 700; text-transform: uppercase;}
.notifyWrapper .notifyHeader .read_link{ margin: 0; padding: 0; align-self: flex-end; font-size: 12px; color: #000 !important;}
.notifyWrapper .notifyHeader .read_link:hover{ color: #9cba55; text-decoration: underline;}
.notifyWrapper .notify-filter{ display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: #6c757d; cursor: pointer; user-select: none;}
.notifyWrapper .notify-switch{ appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 34px; height: 18px; margin: 0; border-radius: 9px; background: #c4c8cf; position: relative; cursor: pointer; transition: background .2s;}
.notifyWrapper .notify-switch::before{ content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s;}
.notifyWrapper .notify-switch:checked{ background: #a0c549;}
.notifyWrapper .notify-switch:checked::before{ transform: translateX(16px);}
.notifyWrapper .scroll_info{ height: 270px; overflow-y: auto; overflow-x: hidden;}
.notifyWrapper .scroll_info .mCSB_inside > .mCSB_container{ margin-right: 0;}
.notifyWrapper .notify_item{ margin: 0; padding: 0; border-bottom: 1px solid #e8e8ea; display: block;}
.notifyWrapper .notify_item .item_info{ margin: 0; padding: 11px 20px 11px 12px; display: flex; align-items: center; gap: 8px; position: relative;}
.notifyWrapper .notify_item .item_info.unread:before{ content: ""; width: 6px; height: 6px; background: #9cba55; border-radius: 50%; position: absolute; top: 8px; right: 8px;}
.notifyWrapper .notify_item .item_info figure{ width: 26px; min-width: 26px; max-width: 26px; margin: 0; padding: 0;}
.notifyWrapper .notify_item .item_info p{ margin: 0; padding: 0; font-size: 12px; line-height: normal; color: #000;}
.notifyWrapper .notify_item .item_info small{ margin: 3px 0 0 0; display: block; font-size: 9px; color: #000;}
.notifyWrapper .notify_item .item_info:hover{ background: #f9f9f9;}
.notifyWrapper .notify_item .item_info.read p, .notifyWrapper .notify_item .item_info.read small{ color: #9a9a9a;}
.notifyWrapper .notify_item .item_info.is-loading{ pointer-events: none;}
.notifyWrapper .notify_item .item_info.is-loading p{ opacity: .45;}
.notifyWrapper .notify_item .item_info.is-loading::after{ content: ""; position: absolute; top: 50%; right: 10px; width: 14px; height: 14px; margin-top: -7px; border: 2px solid #d8e3bd; border-top-color: #a0c549; border-radius: 50%; animation: spin .6s linear infinite;}
.notifyWrapper .dropdown-menu .notify-overlay{ display: none; position: absolute; inset: 0; z-index: 10; align-items: center; justify-content: center; background: rgba(255,255,255,0.65); border-radius: 5px;}
.notifyWrapper .dropdown-menu .notify-overlay.visible{ display: flex;}
.notifyWrapper .notify-badge{ position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; line-height: 1; color: #fff; background: #ad0d2b; border-radius: 50%;}
.notifyWrapper .notify_item .item_info.unread{ cursor: pointer;}
.notifyWrapper .notify-empty{ margin: 0; padding: 20px 12px; text-align: center; font-size: 12px; color: #888;}
.notifyWrapper .list-loader{ padding: 12px; text-align: center;}
.notifyWrapper .notify-loading{ height: 100%; display: flex; align-items: center; justify-content: center;}
.notifyWrapper .spinner-border{ width: 32px; height: 32px; color: #a0c549; border-width: 3px;}

.notifyWrapper .mCSB_scrollTools{ width: 4px; background: rgba(46,52,54,0.1);}
.notifyWrapper .mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent !important;}
.notifyWrapper .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background: #9cba55;}
.notifyWrapper .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background: #9cba55;}
.notifyWrapper .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .notifyWrapper .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background: #9cba55;}

/* Wrapper */
.content-wrapper{ padding: 16px 0 0; flex: 1; display: flex; position: relative; overflow: hidden;}
.content-wrapper::after{ content: ""; width: 94%; max-width: 1266px; height: 9px; background: linear-gradient(to bottom, #d3e1ad 0%, #a0c549 100%); border-radius: 8px 8px 0 0; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;}
.content-wrapper-inn{ background: #f5f7f0; border-radius: 24px 24px 0 0; padding: 0 0 9px; position: relative; height: 100%;}
.content-wrapper-inn::before{ content: ""; width: 24px; height: 24px; background: url(../images/wrapper-curve1.png) no-repeat left bottom; background-size: 100% 100%; position: absolute; left: -23px; bottom: 0;}
.content-wrapper-inn::after{ content: ""; width: 24px; height: 24px; background: url(../images/wrapper-curve1.png) no-repeat left bottom; background-size: 100% 100%; position: absolute; right: -23px; bottom: 0; transform: scaleX(-1);}

/*==========================
        Login Page 
==========================*/
.login_sec{ padding: 24px;}
.login_sec .grid{ display: flex; gap: 20px;}
.login_detail{ width: 670px; min-width: 670px; border-radius: 16px; padding: 40px 56px 32px; border: 2px solid #97ba45; background: linear-gradient(-135deg, #d3e1ad 0%, #a0c549 100%); text-align: center;}
.login_detail h2{ margin: 0 0 12px; padding: 0; font-size: 48px; color: #232423; font-weight: 300;}
.login_detail h3{ margin: 0 0 8px; padding: 0; font-size: 22px; color: #23251e; letter-spacing: 1px; font-weight: 300;}
.login_detail p{ margin: 0; font-size: 16px; color: #23251e; font-family: 'Lucida Grande'; letter-spacing: 1px; line-height: 24px;}
.login_detail figure{ margin: -117px 0 24px; pointer-events: none;}
.service_policy_item{ margin: 0; padding: 0;}
.service_policy_item .ic{ margin: 0 0 12px; width: 48px; height: 48px; display: inline-flex; justify-content: center; align-items: center; background: #2e3818; border-radius: 50%;}
.service_policy_item h4{ margin: 0; padding: 0; font-size: 16px; font-weight: 700; color: #2d2d2d; letter-spacing: 1px; line-height: 22px; font-family: 'Lucida Grande';}

.login_right{ padding: 78px 0 0; text-align: center; flex: 1;}
.login_right .brand_logo{ margin: 0 0 18px;}
.login_right h3{ margin: 0 0 24px; padding: 0; font-size: 19px; font-weight: 300; color: #333333; letter-spacing: -0.5px;}
.login_right h4{ margin: 0 0 16px; padding: 0; font-size: 13px; font-weight: 300; color: #333333; letter-spacing: 1px;}
.partners_logo{ display: flex; justify-content: center;}
.login_form{ margin: 0 auto 100px; max-width: 416px; width: 100%;}
.form_block{ margin: 0 0 17px; padding: 0; text-align: left;}
.form_block label{ margin: 0 0 8px; padding: 0 0 0 14px; font-size: 13px; color: #333333; font-family: 'Lucida Grande';}
.form_block .input-group{ width: 100%; height: 56px; align-items: center; background: #fff; border-radius: 100px; gap: 27px;}
.form_block .input-ic{ width: 14px; min-width: 14px; display: flex; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 5 !important;}
.form_block .input-ic::after{ content: ""; width: 1px; height: 19px; background: rgba(0,0,0,0.2); position: absolute; right: -13px; top: 0; bottom: 0; margin: auto;}
.form_block .form-control{ width: auto; max-width: 100%; font-size: 15px; color: #343434; letter-spacing: -0.5px; flex: 1; font-family: 'Lucida Grande'; padding: 0 22px 0 63px; height: 100%; border-radius: 100px !important; margin: 0 !important; transition: all .3s; border: 1px solid #e6e8e3; box-shadow: 0 8px 24px rgba(0,0,0,0.05), inset 1px -1px 0 0 rgba(0,0,0,0.1), inset -2px 0px 0 -1px rgba(0,0,0,0.1) !important; z-index: 0; position: relative; background: none !important;}
.form_block .form-control:focus{ border-color: #a5c94f;}
.form_block .form-control::placeholder{ color: #c0c0c0; opacity: 1;}
.forgot_link{ margin: 4px 0 0; font-size: 13px; color: #99ba4e; text-decoration: underline; font-family: 'Lucida Grande'; display: inline-block;}
.forgot_link:hover{ color: #6d8a2a;}
.submit_btn{ display: block; font-size: 18px; font-weight: bold; color: #fff; height: 56px; padding: 0 16px; background: #ad0d2b; border-radius: 100px; text-align: center; font-family: 'Lucida Grande'; border: none; width: 100%;}
.submit_btn:hover{ background: #d51c3e; border-color: #d51c3e; color: #fff;}
.submit_btn:disabled{ background: #c4c4c4; border-color: #c4c4c4; color: #f0f0f0; cursor: not-allowed; opacity: 0.7;}
.submit_btn:disabled:hover{ background: #c4c4c4; border-color: #c4c4c4; color: #f0f0f0;}

[data-tooltip]{ position: relative;}
[data-tooltip]:hover::after{
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333; color: #fff;
    padding: 6px 10px; border-radius: 4px;
    font-size: 12px; font-weight: normal;
    white-space: nowrap; pointer-events: none;
    z-index: 1000;
}
[data-tooltip]:hover::before{
    content: ''; position: absolute;
    bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    pointer-events: none; z-index: 1000;
}

/*======================
    Post Login Page 
======================*/
.welcome_sec{ margin: 0; padding: 0 16px; text-align: center;}
.welcome_sec h5{ margin: 56px 0 56px 0; font-size: 30px; font-weight: 300;}
.welcome_sec .radio_info{ display: flex; gap: 48px; justify-content: center;}
.welcome_sec .form-check{ width: 276px; height: 230px; margin: 0; padding: 16px; background: #fff; border: 2px solid #fff; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 12px 0 46px rgba(30,30,30,0.06); position: relative; text-decoration: none;}
.welcome_sec .form-check::before{ content: ""; width: 40px; height: 40px; background: url(../images/check_ic.png) center center no-repeat; background-size: 100% 100%; position: absolute; top: -20px; right: -20px; opacity: 0;}
.welcome_sec .form-check label,
.welcome_sec a.form-check span{ font-size: 22px; color: #5b5757; font-weight: 300; display: block; margin-top: 8px;}
.welcome_sec .form-check .form-check-input{ display: none;}

.welcome_sec .form-check.active,
.welcome_sec a.form-check:hover{ border-color: #a1c847; background: transparent;}
.welcome_sec .form-check.active label,
.welcome_sec a.form-check:hover span{ font-weight: 400;}
.welcome_sec .form-check.active::before{ opacity: 1;}

.welcome_back{ margin: 0; padding: 44px 0 108px 88px;}
.back_btn{ margin: 0; padding: 9px 21px; background: #e4e6df; border-radius: 50px; display: inline-flex; justify-content: center; gap: 8px; align-items: center; font-size: 15px; color: #070707; font-weight: 500;}
.back_btn:hover{ background: #a1c847;}

.welcome_bottom{ margin: auto 0 0 0; padding: 104px 0 0 0; display: flex; justify-content: space-between; position: relative; z-index: 1; align-items: end;}
.welcome_bottom .img1{ margin: 0 0 -3px 266px;}
.welcome_bottom .img2{ margin: 0 8px -3px 0;}
.content-wrapper-inn.post_login{ display: flex; flex-direction: column;}

/*==========================
    List Of Bachelor Page 
==========================*/
.bachelor_sec{ width: 100%; max-width: 1040px; margin: 0 auto; padding: 44px 16px 0 16px;}
.bachelor_sec .top{ margin: 0 0 32px 0; padding: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; justify-content: start; justify-items: self-start; align-items: center;}
.bachelor_sec .top h2{ margin: 0 auto; font-size: 30px; color: #000; font-family: 'Lucida Grande'; text-align: center;}

.bachelor_sec .grid_info{ margin: 0; padding: 0;}
.bachelor_sec .grid_info .grid_box{ margin: 0 0 16px 0; padding: 18px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-radius: 10px; background: linear-gradient(0deg, #F4F4F4 0%, #FFF 100%); border: 2px solid #ffffff; box-shadow: 12px 0 46px rgba(30,30,30,0.06); transition:all .2s ease-in-out;}
.bachelor_sec .grid_info .grid_box.title{ padding: 0 16px; background: none !important; border: none !important; box-shadow: none;}
.bachelor_sec .grid_info .grid_box.title p{ font-size: 13px; font-weight: 600;}
.bachelor_sec .grid_info .grid_box p{ margin: 0; display: flex; align-items: center; gap: 12px; padding: 0; font-size: 14px; color: #2d2d2d; font-family: 'Lucida Grande'; font-weight: 400; justify-content: center; flex-shrink: 0; text-align: center;}
.bachelor_sec .grid_info .grid_box p i{ width: 40px; height: 40px; background: #ededed; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;}
.bachelor_sec .grid_info .grid_box p:nth-child(1){ width: 15%;}
.bachelor_sec .grid_info .grid_box p:nth-child(2){ width: 14%;}
.bachelor_sec .grid_info .grid_box p:nth-child(3){ width: 12%;}
.bachelor_sec .grid_info .grid_box p:nth-child(4){ width: 12%;}
.bachelor_sec .grid_info .grid_box p:nth-child(5){ width: 27%; flex-shrink: 1;}
.bachelor_sec .btn{ margin: 0; padding: 5px 12px; display: inline-flex; background: #ff8210; border-radius: 30px; justify-content: center; font-size: 12px; color: #fff; font-weight: 700; font-family: 'Lucida Grande'; text-align: center; white-space: normal; word-break: break-word; max-width: 100%;}
.bachelor_sec .btn.yellow{ background: #e1be4c;}
.bachelor_sec .btn.green{ background: #38ab5e;}
.bachelor_sec .btn.red{ background: #ad0d2b;}

a.bachelor_sec .grid_info .grid_box,
.bachelor_sec .grid_info a.grid_box{ text-decoration: none; color: inherit;}
.bachelor_sec .grid_info .grid_box:hover{ border-color: #a1c847; background: #ecf1e0;}

/*==========================
      Caregiver Section
==========================*/
.caregiver_sec{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 44px 16px 0 16px;}
.caregiver_sec h2{ margin: 0 0 24px 0; font-size: 24px; color: #2d2d2d; font-family: 'Lucida Grande'; font-weight: 700;}
.caregiver_sec .grid_info{ margin: 0; padding: 0;}
.caregiver_sec .grid_info .grid_box{ margin: 0 0 16px 0; padding: 18px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-radius: 10px; background: linear-gradient(0deg, #F4F4F4 0%, #FFF 100%); border: 2px solid #ffffff; box-shadow: 12px 0 46px rgba(30,30,30,0.06); transition:all .2s ease-in-out;}
.caregiver_sec .grid_info .grid_box.title{ padding: 0 16px; background: none !important; border: none !important; box-shadow: none;}
.caregiver_sec .grid_info .grid_box.title p{ font-size: 13px; font-weight: 600;}
.caregiver_sec .grid_info .grid_box p{ margin: 0; display: flex; align-items: center; gap: 12px; padding: 0; font-size: 14px; color: #2d2d2d; font-family: 'Lucida Grande'; font-weight: 400; justify-content: center; flex-shrink: 0; text-align: center;}
.caregiver_sec .grid_info .grid_box p:nth-child(1){ width: 14%;}
.caregiver_sec .grid_info .grid_box p:nth-child(2){ width: 14%;}
.caregiver_sec .grid_info .grid_box p:nth-child(3){ width: 12%;}
.caregiver_sec .grid_info .grid_box p:nth-child(4){ width: 12%;}
.caregiver_sec .grid_info .grid_box p:nth-child(5){ width: 12%;}
.caregiver_sec .grid_info .grid_box p:nth-child(6){ width: 22%; flex-shrink: 1;}
.caregiver_sec .btn{ margin: 0; padding: 5px 12px; display: inline-flex; background: #ff8210; border-radius: 30px; justify-content: center; font-size: 12px; color: #fff; font-weight: 700; font-family: 'Lucida Grande'; text-align: center; white-space: normal; word-break: break-word; max-width: 100%;}
.caregiver_sec .btn.blue{ background: #5b8cdb;}
.caregiver_sec .btn.yellow{ background: #e1be4c;}
.caregiver_sec .btn.green{ background: #38ab5e;}
.caregiver_sec .btn.red{ background: #ad0d2b;}
.caregiver_sec .grid_info .grid_box:hover{ border-color: #a1c847; background: #ecf1e0;}

.list-loader{ display: flex; justify-content: center; padding: 24px 0;}

.bachelor_info .welcome_bottom{ padding-top: 40px;}
.bachelor_info .welcome_bottom .img1 { margin: 0 0 -3px 504px;}

.bachelor_info .mobile_info{ display: none;}
.bachelor_info .date_block{ margin: 0 0 24px 0; padding: 0 20px 20px 20px; background: linear-gradient(0deg, #F4F4F4 0%, #FFF 100%); border: 2px solid #ffffff; box-shadow: 12px 0 46px rgba(30,30,30,0.06); border-radius: 10px; transition:all .2s ease-in-out;}
.bachelor_info .date_block .row{ border-bottom: 1px solid #e1e1e1; padding: 16px 0;}
.bachelor_info .date_block span{ font-size: 12px; color: #333333; display: block; font-family: 'Lucida Grande';}
.bachelor_info .date_block strong{ display: block; font-size: 14px; color: #343434; font-family: 'Lucida Grande'; text-align: right;}
.bachelor_info .date_block small{ margin: 16px 0; font-size: 12px; color: #333333; display: block; font-family: 'Lucida Grande'; text-align: center;}
.bachelor_info .date_block .btn{ width: 100%;}
.bachelor_info .date_block:hover{ border-color: #a1c847; background: #ecf1e0;}

/*==========================
      Worker Requests List
==========================*/
.wr-list { display: block; }
.wr-desktop { display: block; }
.wr-mobile { display: none; }
.wr-card {
    display: block; background: #fff;
    border: 1px solid #e5e0d8; border-radius: 10px;
    box-shadow: 0 4px 16px rgba(30,30,30,0.04);
    padding: 12px 16px; margin: 0 0 12px;
    color: inherit; text-decoration: none;
}
.wr-card:hover { border-color: #a1c847; background: #f7faf0; }
.wr-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 0;
}
.wr-row + .wr-row { border-top: 1px solid #eee; }
.wr-row .wr-label { font-size: 12px; color: #666; }
.wr-row .wr-value {
    font-size: 13px; color: #333; font-weight: 600;
    text-align: right; word-break: break-word;
}
.wr-status {
    display: block; margin-top: 10px; text-align: center;
    padding: 8px 12px; border-radius: 999px;
    background: #ff8210; color: #fff;
    font-size: 12px; font-weight: 700;
}
.wr-status.blue   { background: #5b8cdb; }
.wr-status.yellow { background: #e1be4c; }
.wr-status.green  { background: #38ab5e; }
.wr-status.red    { background: #ad0d2b; }
@media (max-width: 991px) {
    .wr-desktop { display: none; }
    .wr-mobile { display: block; }
}

/*==========================
      Evaluation file (read-only)
==========================*/
/* position: sticky does not work when any ancestor has overflow:hidden — we
   neutralize it only for this page via :has(). A JS fallback in the Stimulus
   controller `assessment_nav` covers browsers without :has() support. */
.content-wrapper:has(.assessment-layout) { overflow: visible; }
.section-card:has(.assessment-layout),
.section-card:has(.assessment-layout) .section-card-body { overflow: visible; }
.section-card:has(.assessment-layout) .section-card-body { padding: 0; }
.section-card:has(.assessment-layout) > .section-card-header { display: none; }

.assessment-layout { margin: 0; }
.assessment-sidenav { padding: 24px 8px; }
.assessment-sidenav-inner {
    position: sticky; top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    z-index: 2;
}
.assessment-sidenav-inner h5 {
    font-size: 14px; font-weight: 600; color: #484b40;
    margin: 0 0 12px; padding: 0 12px;
}
.assessment-sidenav-inner ol { margin: 0; padding: 0; }
.assessment-sidenav-inner li { margin: 0; }
.assessment-sidenav-inner a {
    display: block; padding: 8px 12px; font-size: 13px;
    color: #484b40; text-decoration: none; border-radius: 6px;
    border-left: 3px solid transparent;
}
.assessment-sidenav-inner a:hover { background: #f5f5f0; }
.assessment-nav-group-title {
    display: block; padding: 8px 12px 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: #8a8d80;
}
.assessment-sidenav-inner ol.assessment-nav-sublist { padding-left: 12px; }
.assessment-sidenav-inner a.is-active {
    background: #f5d8d8; color: #a83838; font-weight: 600;
    border-left-color: #c84646;
}

.assessment-content { padding: 24px 8px; }
.assessment-section { margin-bottom: 24px; }
.assessment-section > h4 {
    background: #c84646; color: #fff; margin: 0;
    padding: 12px 20px; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: 6px 6px 0 0;
}
.assessment-section-body {
    background: #fff; border: 1px solid #e5e0d8;
    border-top: none; border-radius: 0 0 6px 6px;
    padding: 20px;
}

.assessment-subsection + .assessment-subsection { margin-top: 24px; }

/* Questionnaire */
.questionnaire-layout .assessment-section { margin-bottom: 20px; }
.questionnaire-layout .assessment-section-body { padding: 0; }
.questionnaire-layout .assessment-section-body > div { padding: 14px 20px; border-bottom: 1px solid #f0ece5; }
.questionnaire-layout .assessment-section-body > div:last-child { border-bottom: none; }
.questionnaire-layout .assessment-section-body > div > label { display: block; font-weight: 600; font-size: 14px; color: #2d2d2d; margin-bottom: 10px; line-height: 1.5; }
.questionnaire-layout .assessment-section-body > div > input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid #d0cdc8; border-radius: 6px; font-size: 14px; color: #333; outline: none; }
.questionnaire-layout .assessment-section-body > div > input[type="text"]:focus { border-color: #7cae3c; box-shadow: 0 0 0 3px rgba(124,174,60,0.12); }
.questionnaire-layout .assessment-section-body textarea.form-control { font-size: 14px; border: 1px solid #d0cdc8 !important; border-radius: 6px; padding: 8px 12px; min-height: 80px; resize: vertical; box-shadow: none !important; }
.questionnaire-layout .assessment-section-body textarea.form-control:focus { border-color: #7cae3c !important; box-shadow: 0 0 0 3px rgba(124,174,60,0.12) !important; }
.questionnaire-layout div[id^="questionnaire_answer_"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.questionnaire-layout div[id^="questionnaire_answer_"] input[type="radio"],
.questionnaire-layout div[id^="questionnaire_answer_"] input[type="checkbox"] { margin: 0 5px 0 16px; accent-color: #7cae3c; cursor: pointer; flex-shrink: 0; width: 15px; height: 15px; }
.questionnaire-layout div[id^="questionnaire_answer_"] input:first-child { margin-left: 0; }
.questionnaire-layout div[id^="questionnaire_answer_"] label { font-size: 13px; font-weight: 400 !important; color: #555; cursor: pointer; }
.questionnaire-layout .assessment-section-body > div > label.required::after { content: ' *'; color: #dc3545; }
.questionnaire-layout .assessment-section-body > div > ul { list-style: none; padding: 0; margin: -4px 0 6px; }
.questionnaire-layout .assessment-section-body > div > ul li { color: #dc3545; font-size: 13px; }
.questionnaire-layout .assessment-section-body > div:has(> ul) > label { color: #dc3545; }
.questionnaire-layout .assessment-section-body > div:has(> ul) > input[type="text"],
.questionnaire-layout .assessment-section-body > div:has(> ul) textarea { border-color: #dc3545 !important; }

.assessment-subtitle {
    background: #7cae3c; color: #fff;
    padding: 8px 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 16px; border-radius: 4px;
}

.assessment-fields {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px 20px; margin: 0;
    align-items: start;
    grid-auto-rows: min-content;
}
.assessment-field { margin: 0; }
.assessment-field dd { margin-left: 0; }
.assessment-field dt {
    font-size: 12px; color: #484b40; font-weight: 500;
    margin-bottom: 4px;
}
.assessment-field dd {
    margin: 0; padding: 8px 12px; min-height: 36px;
    background: #fafbf8; border: 1px solid #e5e0d8;
    border-radius: 4px; font-size: 13px; color: #484b40;
    white-space: pre-wrap; word-break: break-word;
}
.assessment-field.is-full { grid-column: 1 / -1; }
.assessment-field.is-memo dd { min-height: 72px; }

.assessment-bool-group {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 20px 0;
}
.assessment-bool-group .bool-check:only-child { grid-column: 1 / -1; }

.bool-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: #484b40; cursor: default; margin: 0;
}
.bool-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #7cae3c;
    pointer-events: none; margin: 0;
}

.assessment-file {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    column-gap: 24px;
}
.assessment-file-head,
.assessment-file-row { display: contents; }
.assessment-file-head > div {
    font-weight: 700; color: #484b40; font-size: 13px;
    padding: 0 0 10px; border-bottom: 1px solid #e5e0d8;
}
.assessment-file-row > div {
    padding: 14px 0 0; font-size: 13px; color: #484b40;
}
.assessment-file-download {
    display: inline-flex; align-items: center; gap: 6px;
    color: #484b40; text-decoration: none; font-weight: 500;
}
.assessment-file-download:hover { color: #c84646; text-decoration: underline; }
.assessment-file-download i { font-size: 14px; }

/* Bouton d'ajout de justificatif (input file masqué + icône via <label>) */
.ec-file-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; cursor: pointer;
    color: #484b40; background: none; border: none; padding: 0;
    transition: color .15s;
}
.ec-file-btn:hover { color: #7cae3c; }
.ec-file-btn i { font-size: 18px; }
.ec-file-name {
    font-size: 12px; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lifestyle-addictions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.lifestyle-addiction-col .assessment-fields { grid-template-columns: 1fr; }

.assessment-collection { margin-top: 20px; }
.assessment-collection h5 {
    background: #7cae3c; color: #fff;
    padding: 8px 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 12px; border-radius: 4px;
}
.assessment-collection table { width: 100%; margin: 0; }
.assessment-collection table th {
    background: #fafbf8; font-size: 12px; color: #484b40;
}
.assessment-schedule-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.assessment-schedule-scroll table { min-width: 640px; }

/* Date d'envoi affichée sous le libellé d'une vignette d'action (recueil envoyé). */
.step-action-date { display: block; font-size: 11px; font-weight: 400; margin-top: 4px; opacity: 0.8; }

/* Bandeau "recueil envoyé / non modifiable" en lecture seule. */
.lh-sent-banner { text-align: center; margin-top: 8px; margin-bottom: 8px; }

/* Champs éditables du recueil des habitudes de vie (aidant) — style aligné worker */
.lh-field { margin: 14px 0; }
.lh-field-label {
    display: block; font-size: 12px; color: #484b40; font-weight: 500;
    margin-bottom: 4px;
}
.lh-check-row { margin: 14px 0; }
.lh-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: #484b40; margin: 0; cursor: pointer;
}
.lh-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #7cae3c; margin: 0; flex: none;
}
.lh-choice-expanded { display: flex; flex-wrap: wrap; gap: 16px; }
.lh-choice-expanded label { font-size: 13px; color: #484b40; cursor: pointer; }
.lh-choice-expanded input[type="radio"] { accent-color: #7cae3c; }

/* Collections éditables du recueil des habitudes de vie (aidant)
   Réutilise le style .editable-collection (cf. Disponibilités) ; ces règles
   l'adaptent au nombre de colonnes variable du recueil (layout auto + colonne
   Supprimer étroite) et conservent le libellé de ligne / la colonne centrée. */
.editable-collection.lh-collection-table { table-layout: auto; }
.editable-collection.lh-collection-table tbody td { vertical-align: middle; }
.lh-collection-table .ec-col-action { width: 1%; white-space: nowrap; text-align: center; }
/* Largeurs fixes par colonne (mode colgroup). La colonne Action reste au mini
   (on neutralise le width:10% par défaut de .editable-collection col.ec-col-action). */
.editable-collection.lh-collection-table col.ec-col-action { width: 1%; }
.lh-collection-table col.ec-col-20 { width: 20%; }
.lh-collection-table col.ec-col-15 { width: 15%; }
.lh-collection-table .lh-row-label { font-size: 13px; color: #484b40; font-weight: 500; white-space: nowrap; }
.lh-collection-table .lh-col-center { text-align: center; }
.lh-collection-table .lh-col-center input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #7cae3c; margin: 0;
}
@media (max-width: 768px) {
    /* Scroll horizontal du tableau sur mobile : les cellules de champ gardent
       une largeur mini pour éviter l'écrasement et déclencher le défilement,
       sans élargir la colonne Action. */
    .lh-collection-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lh-collection-table th, .lh-collection-table td { min-width: 130px; }
    .lh-collection-table .ec-col-action { min-width: 0; }
}

/* ── Editable collection table ──────────────────────────────────────────────
   Style de base des tableaux de saisie en collection (cf. macro dynamic_collection
   dans templates/_collection_macros.html.twig).
   - Disponibilités : <table class="editable-collection"> (table-layout: fixed)
   - Recueil        : ajoute .lh-collection-table (table-layout: auto)
   Largeurs de colonnes : via <colgroup> + classes col (ec-col-date, ec-col-20…).
─────────────────────────────────────────────────────────────────────────── */
.editable-collection { table-layout: fixed; width: 100%; margin: 0; border-collapse: collapse; }
.editable-collection thead tr { background: #fafbf8; }
.editable-collection thead th {
    font-size: 12px; font-weight: 700; color: #484b40; font-family: 'Lucida Grande';
    padding: 10px 12px; border-bottom: 2px solid #e5e7df; white-space: nowrap;
}
.editable-collection tbody tr { border-bottom: 1px solid #f0f1ec; }
.editable-collection tbody tr:last-child { border-bottom: none; }
.editable-collection tbody td { padding: 6px 8px; vertical-align: middle; }
.editable-collection th.ec-col-action,
.editable-collection td.ec-col-action { text-align: center; }
.editable-collection th.ec-col-time,
.editable-collection td.ec-col-time { text-align: center; }
.editable-collection .ec-input {
    width: 100%; border: none; border-bottom: 1px solid #d1d5c8;
    background: transparent; padding: 5px 4px; font-size: 14px; color: #333;
    border-radius: 0; outline: none; font-family: inherit; text-align: inherit;
    height: 32px; line-height: 1.4; box-sizing: border-box; vertical-align: middle;
}
.editable-collection .ec-input:focus { border-bottom-color: #7cae3c; background: #fafbf8; }
.editable-collection .ec-input:hover { border-bottom-color: #a0a89a; }
.editable-collection .ec-input:invalid,
.editable-collection .ec-input.is-invalid { border-bottom-color: #ad0d2b; }
.editable-collection .ec-input[readonly] { border-bottom-color: transparent; }
/* Picker d'horloge visible en saisie, masqué en lecture seule */
.editable-collection .ec-input[type="time"][readonly]::-webkit-calendar-picker-indicator { display: none; }
.editable-collection textarea.ec-input { resize: none; overflow: hidden; height: auto; }
.editable-collection .ec-field-error { display: block; font-size: 11px; color: #ad0d2b; margin-top: 2px; }
.editable-collection .ec-delete {
    background: none; border: none; padding: 4px 8px; cursor: pointer;
    color: #c0392b; font-size: 16px; line-height: 1; border-radius: 4px;
    transition: background .15s;
}
.editable-collection .ec-delete:hover { background: #fdf0f0; }
/* Colonnes par défaut : date large, heures moyennes, supprimer étroit */
.editable-collection col.ec-col-date  { width: 40%; }
.editable-collection col.ec-col-time  { width: 25%; }
.editable-collection col.ec-col-action { width: 10%; }

.assessment-bool-group--single { grid-template-columns: 1fr !important; }
.assessment-bool-item { display: flex; flex-direction: column; }
.assessment-description { color: #484b40; font-size: 14px; margin-bottom: 16px; }
.assessment-signature { color: #484b40; font-size: 14px; font-style: italic; border-top: 1px solid #e5e7df; padding-top: 12px; }
.assessment-schedule-detail { margin: 4px 0 12px 28px; }
.assessment-schedule-label { font-size: 13px; color: #6b7280; margin-bottom: 4px; }
.assessment-schedule-text { background: #f9fafb; border: 1px solid #e5e7df; border-radius: 4px; padding: 8px 12px; font-size: 14px; color: #333; white-space: pre-wrap; }

@media (max-width: 768px) {
    /* Global ancestors: cancel the excessive horizontal padding on mobile,
       scoped to the evaluation file page via :has(). */
    .detailedform_sec:has(.assessment-layout) { padding: 8px 4px 0 !important; }
    .section-card:has(.assessment-layout) { margin-bottom: 16px; border-radius: 8px; }

    .assessment-sidenav { position: static; padding: 8px 4px; }
    .assessment-sidenav-inner { position: static; max-height: none; }
    .assessment-sidenav-inner h5 { padding: 0 8px; margin-bottom: 6px; }
    .assessment-sidenav-inner a { padding: 6px 8px; font-size: 12px; }

    .assessment-content { padding: 8px 4px; }
    .assessment-section { margin-bottom: 12px; }
    .assessment-section > h4 { padding: 8px 10px; font-size: 13px; }
    .assessment-section-body { padding: 10px 8px; }

    .assessment-fields { grid-template-columns: 1fr; gap: 8px; }
    .assessment-field dd { padding: 6px 10px; min-height: 32px; }
    .assessment-field.is-memo dd { min-height: 60px; }

    .assessment-bool-group { grid-template-columns: 1fr; margin: 12px 0; gap: 6px; }
    .assessment-subsection + .assessment-subsection { margin-top: 12px; }
    .assessment-subtitle { padding: 5px 10px; margin-bottom: 8px; font-size: 11px; }
    .assessment-collection { margin-top: 12px; }

    .assessment-file { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
    .assessment-file-head > div:not(:first-child) { padding-top: 8px; }
    .assessment-file-row > div { padding-top: 6px; }
}

/*==========================
      Detail Form Page 
==========================*/
.detailedform_wrapper .welcome_bottom{ padding-top: 32px;}
.detailedform_sec{ padding: 48px 124px 0;}
.dftop_detail{ margin-bottom: 32px;}
.detailedform_sec .welcome_back{ padding: 0; margin-bottom: 16px;}
.detailedform_sec h2{ margin: 0 0 10px; font-size: 26px; line-height: 32px; letter-spacing: 0.5px; color: #484b40; font-weight: 300;}

.badge-status{ display: inline-block; padding: 8px 14px; margin-bottom: 12px; border-radius: 30px; font-size: 12px; font-weight: 700; font-family: 'Lucida Grande'; color: #fff; background: #ff8210;}
.badge-status.yellow{ background: #e1be4c;}
.badge-status.green{ background: #38ab5e;}
.badge-status.red{ background: #ad0d2b;}
.planing_btn{ margin: 0; padding: 5px 32px; font-size: 14px; font-weight: bold; letter-spacing: -0.4px; color: #fff; background: #2e3818; border-radius: 100px; display: inline-block; font-family: 'Lucida Grande';}
.planing_btn:hover{ background: #4b582b; color: #fff;}

.meta-item{ display: flex; gap: 22px; align-items: flex-start;}
.meta-item .meta-icon{ margin: 0; padding: 0; width: 24px; min-width: 24px; display: inline-flex; position: relative; align-items: flex-start;}
.meta-item .meta-icon img{ width: 24px; height: 24px; object-fit: contain;}
.meta-item .meta-icon::after{ content: ""; width: 1px; height: 19px; background: rgba(0,0,0,0.2); position: absolute; right: -11px; top: 0; bottom: 0; margin: auto;}
.meta-item .meta-content{ font-size: 14px; letter-spacing: -0.4px; color: #333333; font-family: 'Lucida Grande'; font-weight: normal;}
.meta-item .meta-content .meta-label{ font-weight: bold; color: #000000;}
.meta-item .meta-content .meta-value{ display: inline-block;}


.process-wrapper { position: relative; padding: 7px 10px 0 10px; margin: 48px 0 80px 0;}
.process-wrapper .process-line { position: absolute; top: 0; left: 0; width: 100%; height: 7px; background: #c5cdcf; border-radius: 8px; z-index: 0;}
.process-wrapper .process-steps { display: flex; justify-content: space-between; position: relative; z-index: 1; background: #fff; border: 1px solid #97ba45; border-top: none; border-radius: 0 0 16px 16px;}
.process-wrapper .step{ flex: 1; width: 25%; text-align: center; position: relative; border-right: 1px solid #97ba45; display: flex; flex-direction: column;}
.process-wrapper .step:last-child{ border-right: none;}
.process-wrapper .step-top { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 5;}
.process-wrapper .step-icon { width: 43px; height: 43px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #c5cdcf; position: relative;}
.process-wrapper .step-content { padding: 43px 32px 26px; color: #000; font-size: 16px; font-weight: bold; font-family: 'Lucida Grande'; letter-spacing: -0.4px; line-height: 21px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1;}
.process-wrapper .step-content span{ display: block; min-height: 42px;}
.process-wrapper .step-content p{ margin: 0; font-size: 13px; color: #333333; font-family: 'Lucida Grande'; font-weight: normal;}
.process-wrapper .step.active .step-content{ margin: 0 -1px -20px; background: linear-gradient(to bottom, #f9dc7f 10%, #d6b95b 100%); border-radius: 0 0 16px 16px; position: relative;}
.process-wrapper .step.active .step-icon { background: #f9dc7f; border-color: #f9dc7f;}
.process-wrapper .step.active .step-icon img{ opacity: 0;}
.process-wrapper .step.active .step-icon::after{ content: ""; width: 100%; height: 100%; background: url(../images/process-white-ic.png) no-repeat center center; position: absolute; top: 0; left: 0;}
.process-wrapper .step.active .step-content::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 12px 12px 0 12px; border-style: solid; border-color: #d6b95b transparent transparent transparent;}
.process-wrapper .step.active::after{ content: ""; position: absolute; left: -10px; right: -10px; top: -7px; height: 7px; background: #f9dc7f; border-radius: 8px; z-index: 2;}
.process-wrapper .done::after{ content: ""; position: absolute; left: -10px; right: -10px; top: -7px; height: 7px; background: #a0c549; border-radius: 8px;}
.process-wrapper .step.done .step-icon{ background: #a0c549; border-color: #FFF; border-width: 3px;}
.process-wrapper .step.done .step-icon img{ opacity: 0;}
.process-wrapper .step.done .step-icon::after{ content: ""; width: 100%; height: 100%; background:url(../images/check_white_ic.png) no-repeat center center; position: absolute; top: 0; left: 0; border-radius: 50%;}
.process-wrapper .loading::after{ animation: spin 8s linear infinite;}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.process-wrapper-mob{ position: relative; padding: 16px 0 16px 8px; margin: 0 0 16px 16px;}
.process-wrapper-mob .process-line{ position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: #c5cdcf; border-radius: 8px; z-index: 0;}
.process-wrapper-mob .step-head{ background: #fff; border-right: 1px solid #97ba45; border-top: 1px solid #97ba45; display: flex; flex-direction: column; position: relative;}
.process-wrapper-mob .step-item{ position: relative;}
.process-wrapper-mob .step-item:last-child .step-head{ border-radius: 0 0 16px 0; border-bottom: 1px solid #97ba45;}
.process-wrapper-mob .active .step-head{ border-color: transparent; border-radius: 0 16px 16px 0;}
.process-wrapper-mob .active ~ .step-item .step-head{ border-top-right-radius: 16px;}
.process-wrapper-mob .step-item:not(.active) ~ .step-item .step-head{ border-top-right-radius: 0;}
.process-wrapper-mob .step-top { position: absolute; top: 50%; left: -22px; transform: translateY(-50%); z-index: 3;}
.process-wrapper-mob .step-icon { width: 37px; height: 37px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #c5cdcf; position: relative;}
.process-wrapper-mob .step-bottom { padding: 27px; color: #000; font-size: 16px; font-weight: bold; font-family: 'Lucida Grande'; letter-spacing: -0.4px; line-height: 21px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; gap: 8px;}
.process-wrapper-mob .step-bottom span{ display: block;}
.process-wrapper-mob .step-bottom p{ margin: 0; font-size: 13px; color: #333333; font-family: 'Lucida Grande'; font-weight: normal;}
.process-wrapper-mob .active .step-bottom{ background: linear-gradient(to right, #f9dc7f 10%, #d6b95b 100%); border-radius: 0 16px 16px 0; position: relative;}
.process-wrapper-mob .active .step-icon { background: #f9dc7f; border-color: #f9dc7f;}
.process-wrapper-mob .active .step-icon img{ opacity: 0;}
.process-wrapper-mob .active .step-icon::after{ content: ""; width: 100%; height: 100%; background: url(../images/process-white-ic.png) no-repeat center center; position: absolute; top: 0; left: 0; filter: brightness(0) invert(0); background-size: 15px;}
.process-wrapper-mob .active .step-bottom::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 9px 9px 0 9px; border-style: solid; border-color: #eacd70 transparent transparent transparent;}
.process-wrapper-mob .active::after{ content: ""; position: absolute; left: -8px; top: -16px; bottom: -16px; width: 8px; background: #f9dc7f; border-radius: 8px; z-index: 2;}
.process-wrapper-mob .done::after{ content: ""; position: absolute; left: -8px; top: -16px; bottom: -16px; width: 8px; background: #a0c549; border-radius: 8px;}
.process-wrapper-mob .loading::after{ animation: spin 8s linear infinite;}
.process-wrapper-mob .step-content{ padding: 32px 0 0 16px; display: none;}
.process-wrapper-mob .active .step-content{ display: block;}

/* Canceled state */
.process-wrapper .step.canceled .step-icon{ background: #e8e8e8; border-color: #ccc;}
.process-wrapper .step.canceled .step-icon img{ opacity: 0.4;}
.process-wrapper .step.canceled .step-content{ opacity: 0.5;}
.process-wrapper.process-canceled .process-steps{ border-color: #ccc;}
.process-wrapper.process-canceled .process-line{ background: #e8e8e8;}
.process-wrapper .step.canceled{ border-right-color: #ccc;}
.process-wrapper-mob .step-item.canceled .step-icon{ background: #e8e8e8; border-color: #ccc;}
.process-wrapper-mob .step-item.canceled .step-icon img{ opacity: 0.4;}
.process-wrapper-mob .step-item.canceled .step-bottom{ opacity: 0.5;}
.process-wrapper-mob.process-canceled .process-line{ background: #e8e8e8;}
.process-wrapper-mob.process-canceled .step-head{ border-color: #ccc;}

.canceled-banner{ margin: -48px 0 32px; padding: 13px 19px; background: linear-gradient(135deg, #f8d7da, #f1aeb5); border-radius: 10px; text-align: center; font-size: 14px; font-weight: 700; color: #842029; font-family: 'Lucida Grande'; display: flex; align-items: center; justify-content: center; gap: 8px;}

/*==========================
      Step Action Buttons
==========================*/
.step-actions{ margin: 0 0 40px;}
@media (max-width: 767.98px) { .step-actions > .step-action-btn + .step-action-btn { margin-top: 8px; } }
.step-actions-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start;}
.step-actions-grid--6col{ grid-template-columns: repeat(6, 1fr);}
.step-actions-col{ display: flex; flex-direction: column; gap: 8px;}
.step-action-btn{ display: block; padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; font-family: 'Lucida Grande'; text-align: center; line-height: 1.3; transition: all .3s; text-decoration: none; cursor: pointer;}
.step-actions-span{ grid-row: 1;}
.step-action-btn.active{ background: #e1be4c; color: #fff;}
.step-action-btn.active:hover{ background: #d4a832; color: #fff;}
.step-action-btn.current{ background: #e85d3a; color: #fff;}
.step-action-btn.current:hover{ background: #d44a28; color: #fff;}
.step-action-btn.disabled{ background: #d5d5d5; color: #fff; cursor: default; pointer-events: none;}
.step-action-btn.sent{ background: #b9b9b9; color: #fff;}
.step-action-btn.sent:hover{ background: #a8a8a8; color: #fff;}
.step-action-sublabel{ display: block; font-size: 11px; font-weight: 400; font-style: italic; margin-top: 5px; color: #555; }


/*==========================
      Section Card
==========================*/
.section-card{ background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.05); margin: 0 0 40px; overflow: hidden;}
.section-card-header{ padding: 20px 28px; border-bottom: 1px solid rgba(0,0,0,0.08);}
.section-card-header h3{ margin: 0; font-size: 20px; font-weight: 600; color: #484b40; font-family: 'Lucida Grande';}
.section-card-body{ padding: 28px; min-height: 120px;}
.section-card-footer{ padding: 20px 28px; border-top: 1px solid rgba(0,0,0,0.08); background: #fafbf8;}
.section-card-footer:empty{ display: none;}
.section-card-header--red{ background: #ad0d2b;}
.section-card-header--red h3{ color: #fff;}
.refuse-brd{ background: transparent; border: 2px solid #ad0d2b; color: #ad0d2b;}
.refuse-brd:hover{ background: #ad0d2b; border-color: #ad0d2b; color: #fff;}
.availability-add-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; font-size: 13px; font-weight: 600; font-family: 'Lucida Grande'; background: #7cae3c; color: #fff; border: none; border-radius: 6px; cursor: pointer;}
.availability-add-btn:hover{ background: #6a9a32; color: #fff;}
.section-actions{ display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;}
.section-actions .submit_btn{ width: auto; min-width: auto; height: 44px; font-size: 13px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center;}
.accept-btn{ background: #38ab5e !important;}
.accept-btn:hover{ background: #2d8f4e !important;}
.refuse-btn{ background: #ad0d2b !important; color: #fff !important; border: none !important;}
.refuse-btn:hover{ background: #8e0a23 !important;}

#refuseModal .modal-content{ border-radius: 16px; border: none;}
#refuseModal .modal-header{ border-bottom: 1px solid rgba(0,0,0,0.08); padding: 20px 24px;}
#refuseModal .modal-title{ font-size: 18px; font-weight: 600; color: #484b40; font-family: 'Lucida Grande';}
#refuseModal .modal-body{ padding: 24px;}
#refuseModal .modal-body textarea{ border-radius: 10px !important; border: 1px solid #e6e8e3; font-family: 'Lucida Grande'; font-size: 14px; padding: 12px 16px; resize: none; width: 100%; height: 120px;}
#refuseModal .modal-body textarea:focus{ border-color: #a5c94f; box-shadow: none;}
.modal-footer-actions{ border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 24px; display: flex; flex-wrap: nowrap; justify-content: flex-end;}
.modal-footer-actions .submit_btn{ height: 42px; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 0 24px;}

/*==========================
      Flash Messages
==========================*/
.flash-stack{ position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 1080; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 90vw; pointer-events: none;}
.flash-message{ pointer-events: auto; min-width: 320px; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-family: 'Lucida Grande'; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: flashIn 0.25s ease-out;}
.flash-message.flash-leaving{ animation: flashOut 0.25s ease-in forwards;}
.flash-message .flash-close{ background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.6; margin-left: auto; padding: 0;}
.flash-message .flash-close:hover{ opacity: 1;}
.flash-success{ background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7;}
.flash-error{ background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a;}
@keyframes flashIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flashOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }

/*==========================
      Empty State
==========================*/
.empty-state{ margin: 0; padding: 64px 16px; text-align: center;}
.empty-state-icon{ margin: 0 0 24px; width: 64px; opacity: 0.4;}
.empty-state h3{ margin: 0 0 10px; font-size: 19px; font-weight: 300; color: #484b40;}
.empty-state p{ margin: 0; font-size: 13px; color: #888; font-family: 'Lucida Grande';}


.asidebar h3{ margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 300; color: #6a8330; text-transform: uppercase; letter-spacing: 0.3px;}
.aside-tabs{ margin: 0 0 0 -14px; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 262px;}
.aside-tabs .nav-item{ margin: 0; padding: 0;}
.aside-tabs .nav-link{ margin: 0; padding: 5px 14px; font-size: 14px; font-weight: bold; letter-spacing: -0.4px; color: #656565; border-radius: 100px; display: flex; gap: 8px; align-items: center; font-family: 'Lucida Grande';}
.aside-tabs .nav-link i{ display: inline-flex; filter: brightness(0) invert(0); opacity: 0.63; transition:all .4s ease-in-out;}
.aside-tabs .nav-link:hover,
.aside-tabs .nav-link.active{ background: rgba(51,74,0,0.08); color: #000;}
.aside-tabs .nav-link:hover i,
.aside-tabs .nav-link.active i{ filter: none; opacity: 1;}

.content-box{ padding: 14px 0 24px; margin-bottom: 24px; background: #f5f7f0; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 12px 46px rgba(0,0,0,0.06);}
.content-box .box-head{ margin: 0 24px; border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 12px; margin-bottom: 19px;}
.content-box .box-head h2{ margin: 0; font-size: 30px; color: #484b40; font-weight: 300; letter-spacing: 0.5px; text-align: left;}
.content-box .box-body{ padding: 0 24px;}
.fichier_block label{ margin: 0 0 20px; font-size: 14px; color: #333333; font-family: 'Lucida Grande'; display: block; text-align: center;}
.fichier_block .fdeid_block{ font-size: 16px; color: #343434; display: flex; align-items: center; gap: 14px; font-family: 'Lucida Grande';}
.fichier_block .fdeid_block .ic{ width: 40px; min-width: 40px; height: 40px; background: #ededed; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.fichier_block .date{ font-size: 14px; color: #343434; font-family: 'Lucida Grande'; text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center;}

.tele-btn{ padding: 8px 32px 8px 8px; font-size: 14px; font-weight: bold; color: #fff; font-family: 'Lucida Grande'; display: inline-flex; gap: 23px; align-items: center; background: #a0c549; border-radius: 100px; border: none;}
.tele-btn:hover{ background: #82a139; color: #fff;}

.situation_block h4{ margin: 0 0 14px; padding: 0; font-size: 16px; font-weight: bold; color: #343434; font-family: 'Lucida Grande';}
.situation_block p{ margin: 0; padding: 0; font-size: 14px; line-height: 22px; color: #404040; font-family: 'Lucida Grande';}

hr.line{ height: 1px; border: none; background: rgba(0,0,0,0.15); opacity: 1; margin: 24px 0;}

.sante_block.content-box{ padding-bottom: 8px;}
.sante_block .box-body{ padding: 0 8px;}
.white_box{ padding: 12px 24px 21px; background: #ffffff; border-radius: 8px; margin-bottom: 16px;}
.wbox-head{ padding: 0 0 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(51,74,0,0.1);}
.wbox-head h3{ margin: 0; padding: 0; font-size: 18px; font-weight: bold; color: #343434; font-family: 'Lucida Grande'; }

.form_block.style2 .form-control{ box-shadow: none !important;}

.form-check{ margin: 0; padding: 0 0 0 22px; position: relative; min-height: 14px;}
.form-check .form-check-input{ position: absolute; top: 4px; left: 0; width: 14px; height: 14px; border-radius: 3px; border: 2px solid #a8a8a8 !important; background-color: #fff !important; margin: 0;}
.form-check .form-check-label{ font-size: 15px; color: #333333; font-family: 'Lucida Grande'; line-height: 1.2;}
.form-check .form-check-input:checked{ border-color: #a5c94f !important; background-color: #a5c94f !important;}
.reco_infoline{ margin: -8px 0 0; font-size: 15px; color: #333333; letter-spacing: -0.4px; display: flex; justify-content: center; align-items: center; gap: 6px; font-family: 'Lucida Grande';}

.sticky_bar{ padding: 13px 0; position: sticky; bottom: 0; z-index: 55; box-shadow: 0 8px 32px rgba(30,30,30,0.08); background: #ffffff;}
.sticky_bar .btn-group{ display: flex; gap: 8px; justify-content: center;}
.sticky_bar .submit_btn{ width: auto; min-width: 158px; font-size: 14px; height: 48px;}

.primary-brd{ background: transparent; border: 2px solid #5c5d5c; color: #5c5d5c;}
.primary-brd:hover{ background: #5c5d5c; border-color: #5c5d5c; color: #fff;}
.secondary-brd{ background: transparent; border: 2px solid #a0c549; color: #a0c549;}
.secondary-brd img{ transition: all .4s ease-in-out;}
.secondary-brd:hover{ background: #a0c549; border-color: #a0c549; color: #fff;}
.secondary-brd:hover img{ filter: brightness(0) invert(1);}

/*===================================
      Detail BALUCHONNAGE Page 
===================================*/
.detailedbaluch_wrapper .process-wrapper .step-content{ padding: 32px 16px 24px; line-height: normal;}
.detailedbaluch_wrapper .process-wrapper .step-content span{ line-height: 1.2; margin-bottom: 4px;}

.welcome_bottom .last{ transform: translateX(-250%); position: relative;}

.detailedbaluch_wrapper .detailedform_sec{ padding: 35px 70px 0;}
.detailedbaluch_wrapper .process-wrapper{ margin-bottom: 44px;}

/* Section page : flèche verte sous l'étape consultée, flèche dorée masquée sur l'étape active */
.process-wrapper.viewing-past-section .step.active .step-content::after{ display: none;}
.process-wrapper .step.done.current-section .step-content{ position: relative;}
.process-wrapper .step.done.current-section .step-content::after{ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 12px 12px 0 12px; border-style: solid; border-color: #a0c549 transparent transparent transparent;}
.process-wrapper-mob.viewing-past-section .active .step-bottom::after{ display: none;}
.process-wrapper-mob .done.current-section .step-bottom{ position: relative;}
.process-wrapper-mob .done.current-section .step-bottom::after{ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 9px 9px 0 9px; border-style: solid; border-color: #a0c549 transparent transparent transparent;}
.metacards{ display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.metacard_item{ margin-bottom: 8px; background: #dce1d0; border-radius: 8px; padding: 6px 6px 6px 8px; display: flex; gap: 8px; align-items: center; width: 100%; min-height: 54px; color: #373931; transition: all .4s;}
.metacard_item i{ display: flex; width: 26px; min-width: 26px; transition: all .4s;}
.metacard_item p{ margin: 0; font-size: 11px; color: inherit; line-height: 15px; letter-spacing: -0.2px; font-family: 'Lucida Grande';}
.metacard_item.danger-light{ background: #e7c8c9; color: #ad0d2b;}
.metacard_item.danger-light.active, .metacard_item.danger-light:hover{ background: #ad0d2b; color: #fff;}
.metacard_item.danger-light.active i, .metacard_item.danger-light:hover i{ filter: brightness(0) invert(1);}

.mesausdocs_sec{ margin: 0; padding: 64px 0 8px;}
.mesausdocs_sec h2{ margin: 0 0 32px; padding: 0; font-size: 30px; font-weight: 300; color: #484b40; text-align: center;}
.mesausdocs_sec .table{ margin: 0; padding: 0; width: 100%;}
.mesausdocs_sec .table thead tr th{ padding: 0 32px 26px 32px; font-size: 13px; color: #333333; font-weight: normal; font-family: 'Lucida Grande'; background: none; border: none; text-align: center;}
.mesausdocs_sec .table thead tr th:first-child{ text-align: left;}
.mesausdocs_sec .table tbody tr{ filter: drop-shadow(0 12px 46px rgba(30,30,30,0.06));}
.mesausdocs_sec .table tbody tr td{ border: none; background: none; opacity: 0;}
.mesausdocs_sec .table tbody tr:not(:nth-child(even)) td{ padding: 18px 16px; font-size: 14px; color: #343434; font-family: 'Lucida Grande'; font-weight: normal; vertical-align: middle; background: linear-gradient(to top, #f4f4f4, #ffffff); border-radius: 0; box-shadow: inset 0 -2px 0 0 #fff, inset 0 2px 0 0 #fff; border: none; text-align: center; opacity: 1;}
.mesausdocs_sec .table tbody tr:not(:nth-child(even)) td:first-child{ text-align: left; border-radius: 8px 0 0 8px; box-shadow: inset 0 -2px 0 0 #fff, inset 0 2px 0 0 #fff, inset 2px 0 0 0 #fff;}
.mesausdocs_sec .table tbody tr:not(:nth-child(even)) td:last-child{ border-radius: 0 8px 8px 0; box-shadow: inset 0 -2px 0 0 #fff, inset 0 2px 0 0 #fff, inset -2px 0 0 0 #fff;}
.mesausdocs_sec .block{ display: flex; gap: 14px; align-items: center;}
.mesausdocs_sec .block i{ width: 40px; height: 40px; min-width: 40px; background: #ededed; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.mesausdocs_sec .block h3{ margin: 0; padding: 0; font-size: 16px; color: #343434; font-family: 'Lucida Grande'; font-weight: bold;}

/*==========================
      Error Pages
==========================*/
.error-page{ margin: 0; padding: 64px 16px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px;}
.error-page-code{ margin: 0 0 16px; font-size: 112px; font-weight: 900; color: #a0c549; line-height: 1; letter-spacing: -3px; opacity: 0.8;}
.error-page-title{ margin: 0 0 12px; font-size: 26px; font-weight: 300; color: #484b40;}
.error-page-text{ margin: 0 0 32px; font-size: 14px; color: #666; font-family: 'Lucida Grande'; max-width: 400px; line-height: 22px;}

/*==========================
      Global Loader
==========================*/
.global-loader{ position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;}
.global-loader[hidden]{ display: none;}
.global-loader .spinner-border{ width: 48px; height: 48px; color: #a0c549; border-width: 4px;}

.recueil-recover{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;}
.recueil-recover-info{ display: flex; align-items: center; gap: 14px;}
.recueil-recover-icon{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fdeaec; color: #ad0d2b;}
.recueil-recover-title{ display: block; color: #484b40;}
.recueil-recover-subtitle{ color: #6b6f63;}
#lifeHabitsCopyModal .lh-check-row{ margin: 8px 0;}
#lifeHabitsCopyModal .lh-check{ font-size: 14px;}
.lh-check input[type="radio"],
.lh-choice-expanded input[type="radio"],
.assessment-bool-group input[type="radio"]{ appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #7cae3c; border-radius: 50%; margin: 0; flex: none; display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;}
.lh-check input[type="radio"]::before,
.lh-choice-expanded input[type="radio"]::before,
.assessment-bool-group input[type="radio"]::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #7cae3c; transform: scale(0); transition: transform .12s ease-in-out;}
.lh-check input[type="radio"]:checked::before,
.lh-choice-expanded input[type="radio"]:checked::before,
.assessment-bool-group input[type="radio"]:checked::before{ transform: scale(1);}
.lh-check input[type="radio"]:disabled,
.lh-choice-expanded input[type="radio"]:disabled,
.assessment-bool-group input[type="radio"]:disabled{ cursor: default; opacity: .85;}