.core-field .locked-field,
.contact-field input[readonly],
.core-field input[readonly] {
    background: #f3f0e9;
    color: #625b50;
    cursor: not-allowed;
}

.core-field select.locked-field {
    pointer-events: none;
}
      
      .contact-field input[readonly] {
    background: #f4f1ea;
    color: #5f594f;
    cursor: not-allowed;
}
      
      .core-field input[type="file"] {
    width: 100%;
    height: 60px;
    padding: 17px 18px;
    border: 1px solid #d8cfbf;
    border-radius: 14px;
    background: #fffdf9;
    color: #173c34;
    font-size: 14px;
    cursor: pointer;
}

.core-field input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #0b604c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.core-field input[type="file"]::file-selector-button:hover {
    background: #064637;
}

.core-field input[type="file"]:focus {
    border-color: #0d6b53;
    box-shadow: 0 0 0 3px rgba(13, 107, 83, 0.1);
    outline: none;
}


.hospitality-tabs-section{
    position:sticky;
    top:78px;                 /* Header Height */
    z-index:990;
    background:#f9faf8;
    border-bottom:1px solid #e7ece7;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.hospitality-tabs-container{
    max-width:1400px;
    margin:auto;
    padding:0 20px;
}

.hospitality-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 0;
}

.hospitality-tab{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 26px;

    border:none;
    outline:none;

    background:#ffffff;

    color:#355449;

    font-size:15px;
    font-weight:600;

    border-radius:50px;

    cursor:pointer;

    transition:.35s ease;

    white-space:nowrap;

    border:1px solid #dfe8df;
}

.hospitality-tab i{
    font-size:14px;
    transition:.35s;
}

.hospitality-tab:hover{

    transform:translateY(-2px);

    background:#eef8f3;

    color:#12382f;

    border-color:#1f7a53;

    box-shadow:0 12px 24px rgba(20,85,55,.10);
}

.hospitality-tab.active{

    background:linear-gradient(135deg,#0d4335,#1d6a4e);

    color:#fff;

    border-color:transparent;

    box-shadow:0 14px 30px rgba(14,79,56,.25);
}

.hospitality-tab.active i{
    color:#ffd56a;
}

/* Bottom Active Line */

.hospitality-tab::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-15px;

    width:0;

    height:3px;

    border-radius:50px;

    background:#d2a84f;

    transition:.35s;
}

.hospitality-tab.active::after{

    width:70%;

    left:15%;
}


/*==================================================
CONTENT AREA
==================================================*/

.hospitality-tab-wrapper{

    max-width:1400px;

    margin:40px auto;

    padding:0 0px;

    min-height:500px;
}

.tab-content{

    display:none;

    animation:tabFade .45s ease;
}

.tab-content.active{

    display:block;
}


/*==================================================
ANIMATION
==================================================*/

@keyframes tabFade{

    from{

        opacity:0;

        transform:translateY(25px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.hospitality-tabs{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

padding-bottom:8px;

scrollbar-width:none;
}

.hospitality-tabs::-webkit-scrollbar{

display:none;
}

.hospitality-tab{

flex:0 0 auto;

padding:13px 22px;

font-size:14px;
}

.hospitality-tabs-section{

top:70px;
}

}


@media(max-width:576px){

.hospitality-tab{

padding:12px 18px;

font-size:13px;

gap:8px;
}

.hospitality-tab i{

font-size:13px;
}

.hospitality-tab-wrapper{

margin:25px auto;

padding:0 15px;
}

}


/**/

/*====================================================
LIST OPPORTUNITY - STEP 1
====================================================*/

#list-opportunity{
    padding:40px;
    animation:fadeUp .45s ease;
}

.listing-wrapper{

    max-width:1180px;
    margin:auto;

    background:#fff;

    border:1px solid #e7ddcd;

    border-radius:22px;

    padding:40px;

    box-shadow:
    0 8px 30px rgba(40,28,10,.08),
    0 0 0 6px rgba(248,243,233,.55);

}

/*==================================
Heading
==================================*/

.listing-header{
    margin-bottom:34px;
}

.listing-header h2{

    margin:0;

    font-size:42px;

    font-family:"Playfair Display",serif;

    font-weight:700;

    color:#21302b;

    line-height:1.15;

}

.listing-header p{

    margin-top:10px;

    color:#7d7568;

    font-size:16px;

    font-weight:500;

}

/*==================================
Grid
==================================*/

.listing-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

/*==================================
Card
==================================*/

.listing-card{

    display:flex;

    align-items:center;

    gap:18px;

    background:#fffdf8;

    border:1px solid #dccfb9;

    border-radius:16px;

    min-height:92px;

    padding:18px 20px;

    cursor:pointer;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.listing-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    rgba(196,165,97,.08),
    transparent);

    opacity:0;

    transition:.35s;

}

.listing-card:hover{

    transform:translateY(-5px);

    border-color:#b99657;

    box-shadow:
    0 12px 28px rgba(185,150,87,.18);

}

.listing-card:hover::before{

    opacity:1;

}

/*==================================
Selected
==================================*/

.listing-card.active{

    border:2px solid #b89254;

    background:#fffdf8;

    box-shadow:

    0 15px 35px rgba(184,146,84,.22);

}

.listing-card.active::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    background:#b89254;

}

/*==================================
Icon
==================================*/

.listing-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:12px;

    background:#f5efe3;

    display:flex;

    align-items:center;

    justify-content:center;

}

.listing-icon i{

    font-size:18px;

    color:#23312d;

}

/*==================================
Text
==================================*/

.listing-content{

    flex:1;

}

.listing-content h4{

    margin:0;

    font-size:19px;

    color:#1d2d2b;

    font-family:"Playfair Display",serif;

    font-weight:600;

}

.listing-content span{

    display:block;

    margin-top:4px;

    font-size:14px;

    color:#887e72;

}

/*==================================
Footer
==================================*/

.listing-footer{

    margin-top:34px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.listing-step{

    color:#746b60;

    font-size:15px;

}

.listing-step strong{

    color:#27342f;

    font-weight:700;

}


/*=========================================
Continue Button
=========================================*/

.listing-next-btn{

    border:none;

    outline:none;

    cursor:pointer;

    min-width:165px;

    height:58px;

    border-radius:50px;

    background:#24352f;

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:.35s;

    box-shadow:0 10px 25px rgba(36,53,47,.22);

}

.listing-next-btn i{

    transition:.35s;

    font-size:15px;

}

.listing-next-btn:hover{

    background:#172621;

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.listing-next-btn:hover i{

    transform:translateX(5px);

}

/* Disabled State */

.listing-next-btn.disabled,
.listing-next-btn:disabled{

    background:#24352f;

    opacity:1;

    cursor:pointer;

    transform:none;

    box-shadow:none;

}

/*=========================================
Card Active Animation
=========================================*/

.listing-card.active{

    animation:selectedCard .35s ease;

}

@keyframes selectedCard{

    0%{

        transform:scale(.97);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================
Card Icon Hover
=========================================*/

.listing-card:hover .listing-icon{

    background:#ede2cb;

    transform:rotate(-5deg);

}

.listing-icon{

    transition:.35s;

}

.listing-card:hover .listing-icon i{

    transform:scale(1.08);

}

.listing-icon i{

    transition:.35s;

}

/*=========================================
Text Hover
=========================================*/

.listing-card:hover h4{

    color:#8c6a31;

}

.listing-content h4{

    transition:.30s;

}

/*=========================================
Wrapper Animation
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

    .listing-wrapper{

        padding:30px;

    }

    .listing-grid{

        grid-template-columns:1fr;

    }

    .listing-header h2{

        font-size:34px;

    }

}

@media(max-width:768px){

    #list-opportunity{

        padding:18px;

    }

    .listing-wrapper{

        padding:22px;

        border-radius:18px;

    }

    .listing-header{

        margin-bottom:24px;

    }

    .listing-header h2{

        font-size:28px;

    }

    .listing-header p{

        font-size:14px;

    }

    .listing-card{

        min-height:82px;

        padding:16px;

        gap:15px;

    }

    .listing-content h4{

        font-size:17px;

    }

    .listing-content span{

        font-size:13px;

    }

    .listing-footer{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

    .listing-next-btn{

        width:100%;

    }

}

@media(max-width:480px){

    .listing-wrapper{

        padding:16px;

    }

    .listing-header h2{

        font-size:24px;

    }

    .listing-card{

        padding:14px;

    }

    .listing-icon{

        width:42px;

        height:42px;

    }

    .listing-icon i{

        font-size:16px;

    }

    .listing-content h4{

        font-size:15px;

    }

    .listing-content span{

        font-size:12px;

    }

    .listing-next-btn{

        height:54px;

        font-size:15px;

    }

}


/**/

/*==================================================
STEP 2 - ROLE SELECTION
==================================================*/

.listing-step-two{

    animation:fadeUp .45s ease;

}

.role-wrapper{

    max-width:1180px;

    margin:auto;

    background:#fff;

    border:1px solid #e6dccb;

    border-radius:22px;

    padding:38px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    0 0 0 6px rgba(248,243,232,.55);

}

/*==============================
Heading
==============================*/

.role-header{

    margin-bottom:30px;

}

.role-header h2{

    margin:0;

    font-size:42px;

    line-height:1.15;

    font-family:"Playfair Display",serif;

    color:#20312b;

    font-weight:700;

}

.role-header p{

    margin-top:10px;

    color:#7f776d;

    font-size:16px;

}

/*==============================
Grid
==============================*/

.role-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

/*==============================
Card
==============================*/

.role-card{

    display:flex;

    align-items:center;

    gap:16px;

    min-height:78px;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid #d9cfbe;

    background:#fffdf8;

    cursor:pointer;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.role-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    rgba(189,153,84,.08),
    transparent);

    opacity:0;

    transition:.35s;

}

.role-card:hover{

    transform:translateY(-4px);

    border-color:#b99658;

    box-shadow:0 15px 28px rgba(185,150,88,.16);

}

.role-card:hover::before{

    opacity:1;

}

/*==============================
Selected
==============================*/

.role-card.active{

    border:2px solid green;

    background:#fffdfa;

    box-shadow:0 14px 32px rgba(182,146,85,.18);

}

.role-card.active {
    border: 2px solid #198754;
    background: #eef9f2;
    box-shadow: 0 14px 32px rgba(25, 135, 84, .18);
}

.role-card.active::after {
    background: #198754;
}

.role-card.active .role-icon {
    background: #dff3e6;
}

.role-card.active .role-icon i,
.role-card.active .role-text h4 {
    color: #198754;
}

.role-card.active::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:5px;

    background:green;

}

/*==============================
Icon
==============================*/

.role-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#f5eee2;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.30s;

}

.role-icon i{

    color:#21322c;

    font-size:17px;

}

.role-card:hover .role-icon{

    background:#efe2cb;

}

/*==============================
Text
==============================*/

.role-text{

    flex:1;

}

.role-text h4{

    margin:0;

    font-size:18px;

    color:#1f302c;

    font-weight:600;

    font-family:"Playfair Display",serif;

}

/*==============================
Footer
==============================*/

.role-footer{

    margin-top:34px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==============================
Back Button
==============================*/

.role-back-btn{

    background:none;

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    color:#444;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

.role-back-btn:hover{

    color:#b58d4f;

    transform:translateX(-3px);

}

/*==============================
Continue
==============================*/

.role-next-btn{

    width:160px;

    height:54px;

    border:none;

    border-radius:40px;

    background:#24352f;

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 24px rgba(36,53,47,.18);

}

.role-next-btn:hover{

    background:#172621;

    transform:translateY(-3px);

}

.role-next-btn.disabled,
.role-next-btn:disabled{

    background:#24352f;

    opacity:1;

    cursor:pointer;

    transform:none;

}

.role-next-btn i{

    transition:.30s;

}

.role-next-btn:hover i{

    transform:translateX(5px);

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

    .role-grid{

        grid-template-columns:1fr;

    }

    .role-header h2{

        font-size:34px;

    }

}

@media(max-width:768px){

    .role-wrapper{

        padding:22px;

    }

    .role-header h2{

        font-size:28px;

    }

    .role-header p{

        font-size:14px;

    }

    .role-footer{

        flex-direction:column;

        gap:18px;

    }

    .role-next-btn{

        width:100%;

    }

}

@media(max-width:480px){

    .role-card{

        min-height:70px;

        padding:14px;

    }

    .role-text h4{

        font-size:16px;

    }

    .role-icon{

        width:38px;

        height:38px;

    }

    .role-next-btn{

        height:52px;

    }

}


/**/

/*=========================================================
STEP 3 : CORE DETAILS
=========================================================*/

.listing-step-three{

    animation:fadeUp .45s ease;

}

.core-wrapper{

    max-width:1180px;

    margin:auto;

    background:#fff;

    border:1px solid #e6dccb;

    border-radius:22px;

    padding:38px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    0 0 0 6px rgba(248,243,232,.55);

}

/*=====================================
HEADER
=====================================*/

.core-header{

    margin-bottom:30px;

}

.core-header h2{

    margin:0;

    font-family:"Playfair Display",serif;

    font-size:42px;

    color:#1f302b;

    font-weight:700;

    line-height:1.15;

}

.core-header p{

    margin-top:10px;

    font-size:15px;

    color:#726c63;

    line-height:1.7;

}

.core-header strong{

    color:#24352f;

    font-weight:700;

}

/*=====================================
GRID
=====================================*/

.core-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

/*=====================================
FIELD
=====================================*/

.core-field{

    display:flex;

    flex-direction:column;

}

.core-field label{

    margin-bottom:8px;

    font-size:13px;

    color:#20312c;

    font-weight:600;

}

.core-field small{

    color:#9d8d78;

    font-weight:500;

}

/*=====================================
INPUT
=====================================*/

.core-field input{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #d8cfbf;

    border-radius:12px;

    background:#fffdf9;

    font-size:14px;

    color:#1f302b;

    outline:none;

    transition:.30s;

}

.core-field input::placeholder{

    color:#a09486;

}

.core-field input:focus{

    border-color:#b99658;

    box-shadow:0 0 0 4px rgba(185,150,88,.10);

}

/*=====================================
SELECT
=====================================*/

.core-field select{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #d8cfbf;

    border-radius:12px;

    background:#fffdf9;

    font-size:14px;

    color:#1f302b;

    outline:none;

    transition:.30s;

    cursor:pointer;

}

.core-field select:focus{

    border-color:#b99658;

    box-shadow:0 0 0 4px rgba(185,150,88,.10);

}

/*=====================================
FULL WIDTH
=====================================*/

.full-width{

    grid-column:1/-1;

}

/*=====================================
FOOTER
=====================================*/

.core-footer{

    margin-top:36px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*=====================================
BACK BUTTON
=====================================*/

.core-back{

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:15px;

    font-weight:600;

    color:#474747;

    transition:.30s;

}

.core-back:hover{

    color:#b58e50;

    transform:translateX(-3px);

}

/*=====================================
CONTINUE BUTTON
=====================================*/

.core-next{

    width:165px;

    height:54px;

    border:none;

    border-radius:40px;

    background:#173830;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:.35s;

    box-shadow:0 12px 25px rgba(23,56,48,.18);

}

.core-next:hover{

    background:#0f2b25;

    transform:translateY(-3px);

}

.core-next i{

    transition:.30s;

}

.core-next:hover i{

    transform:translateX(5px);

}

/*=====================================
HOVER
=====================================*/

.core-field input:hover,
.core-field select:hover{

    border-color:#b99658;

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:991px){

    .core-grid{

        grid-template-columns:1fr;

    }

    .core-header h2{

        font-size:34px;

    }

}

@media(max-width:768px){

    .core-wrapper{

        padding:22px;

    }

    .core-header h2{

        font-size:28px;

    }

    .core-header p{

        font-size:14px;

    }

    .core-footer{

        flex-direction:column;

        gap:18px;

    }

    .core-next{

        width:100%;

    }

}

@media(max-width:480px){

    .core-wrapper{

        padding:16px;

    }

    .core-header h2{

        font-size:24px;

    }

    .core-field input,
    .core-field select{

        height:48px;

        font-size:13px;

    }

}


/**/

/*=========================================================
STEP 4 : CONTACT & PERMISSIONS
=========================================================*/

.listing-step-four{
    animation:fadeUp .45s ease;
}

.contact-wrapper{

    max-width:1180px;

    margin:auto;

    background:#fff;

    border:1px solid #e6dccb;

    border-radius:22px;

    padding:38px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    0 0 0 6px rgba(248,243,232,.55);

}

/*=====================================
HEADER
=====================================*/

.contact-header{

    margin-bottom:30px;

}

.contact-header h2{

    margin:0;

    font-size:42px;

    font-family:"Playfair Display",serif;

    font-weight:700;

    color:#20312c;

    line-height:1.15;

}

.contact-header p{

    margin-top:10px;

    color:#726b61;

    font-size:15px;

    line-height:1.7;

}

/*=====================================
GRID
=====================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

/*=====================================
FIELD
=====================================*/

.contact-field{

    display:flex;

    flex-direction:column;

}

.contact-field label{

    margin-bottom:8px;

    font-size:13px;

    color:#23342e;

    font-weight:600;

}

.contact-field small{

    color:#9c8d79;

    font-weight:500;

}

/*=====================================
INPUT
=====================================*/

.contact-field input{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #d8cfbf;

    border-radius:12px;

    background:#fffdf9;

    font-size:14px;

    color:#23342e;

    outline:none;

    transition:.30s;

}

.contact-field input::placeholder{

    color:#a49789;

}

.contact-field input:hover,
.contact-field input:focus{

    border-color:#b89457;

    box-shadow:0 0 0 4px rgba(184,148,87,.08);

}

/*=====================================
SELECT
=====================================*/

.contact-field select{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #d8cfbf;

    border-radius:12px;

    background:#fffdf9;

    font-size:14px;

    color:#23342e;

    outline:none;

    transition:.30s;

    cursor:pointer;

}

.contact-field select:hover,
.contact-field select:focus{

    border-color:#b89457;

    box-shadow:0 0 0 4px rgba(184,148,87,.08);

}

/*=====================================
TEXTAREA
=====================================*/

.contact-field textarea{

    width:100%;

    min-height:100px;

    padding:14px 16px;

    border:1px solid #d8cfbf;

    border-radius:12px;

    resize:vertical;

    background:#fffdf9;

    font-size:14px;

    outline:none;

    transition:.30s;

    font-family:inherit;

}

.contact-field textarea:hover,
.contact-field textarea:focus{

    border-color:#b89457;

    box-shadow:0 0 0 4px rgba(184,148,87,.08);

}

/*=====================================
FULL WIDTH
=====================================*/

.contact-field.full-width{

    grid-column:1/-1;

}

/*=====================================
FOOTER
=====================================*/

.contact-footer{

    margin-top:36px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*=====================================
BACK BUTTON
=====================================*/

.contact-back{

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    color:#444;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

.contact-back:hover{

    color:#b89254;

    transform:translateX(-3px);

}

/*=====================================
SUBMIT BUTTON
=====================================*/

.submit-listing-btn{

    width:185px;

    height:56px;

    border:none;

    border-radius:40px;

    background:#14382f;

    color:#fff;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 14px 30px rgba(20,56,47,.20);

}

.submit-listing-btn:hover{

    background:#0d2d26;

    transform:translateY(-3px);

}

.submit-listing-btn i{

    transition:.30s;

}

.submit-listing-btn:hover i{

    transform:translateX(5px);

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:991px){

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-header h2{

        font-size:34px;

    }

}

@media(max-width:768px){

    .contact-wrapper{

        padding:22px;

    }

    .contact-header h2{

        font-size:28px;

    }

    .contact-header p{

        font-size:14px;

    }

    .contact-footer{

        flex-direction:column;

        gap:18px;

    }

    .submit-listing-btn{

        width:100%;

    }

}

@media(max-width:480px){

    .contact-wrapper{

        padding:16px;

    }

    .contact-header h2{

        font-size:24px;

    }

    .contact-field input,
    .contact-field select{

        height:48px;

        font-size:13px;

    }

    .contact-field textarea{

        font-size:13px;

    }

}

.auto-role-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid #b89254;
    border-radius: 12px;
    background: #fff8e9;
    color: #664d23;
    font-size: 14px;
}

.auto-role-note i {
    color: #198754;
}

.role-ineligible-box {
    margin-top: 24px;
    padding: 26px;
    border: 1px solid #ddd3c3;
    border-radius: 14px;
    background: #fdfbf7;
}

.role-ineligible-box h4 {
    margin: 0 0 8px;
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 700;
    color: #063b33;
}

.role-ineligible-box p {
    margin: 0;
    color: #766b5d;
    font-size: 14px;
    line-height: 1.6;
}

.role-ineligible-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.role-ineligible-actions a {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
}

.role-registration-btn {
    border: 1px solid #0b604c;
    background: #0b604c;
    color: #ffffff;
}

.role-registration-btn:hover {
    background: #064637;
    color: #ffffff;
}

.role-switch-btn {
    border: 1px solid #b89457;
    background: #fff7e9;
    color: #72541e;
}

.role-switch-btn:hover {
    background: #f4e6cb;
    color: #72541e;
}

.role-go-back-btn {
    border: 1px solid #d8cfbf;
    background: #ffffff;
    color: #173c34;
}

.role-go-back-btn:hover {
    border-color: #0b604c;
    background: #f5faf7;
    color: #0b604c;
}

@media (max-width: 576px) {
    .role-ineligible-actions {
        flex-direction: column;
    }

    .role-ineligible-actions a {
        width: 100%;
    }
}

.role-ineligible-actions a,
.role-ineligible-actions button {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
    cursor: pointer;
}