.webbuilder .item-h{position: static;}
.add-newupdate{background-color: var(--c-4);}
.admin-header{display: flex;justify-content: space-between;align-items: center;padding: 0px 6.3rem 0px;background-color: var(--c-4);min-height: 100px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);position: sticky;top: 0px;z-index: 10;}
.admin-header h1{color: var(--c-2);font-size: var(--f-s-6);margin: 0;text-transform: capitalize;display: inline-flex;gap: 8px;}
.admin-header h1::before{content: '\f4fe';font-family: 'Font Awesome 6 free';font-weight: 600;color: var(--c-6)}
.logout-btn{background-color: var(--c-alert);color: var(--c-5);border: none;padding: 12px 20px;border-radius: var(--b-r-2);font-size: var(--f-s-0);font-weight: 500;cursor: pointer;display: flex;align-items: center;gap: 8px;transition: all 0.3s;}
.logout-btn::before{content: '\f2f5';font-family: 'Font Awesome 6 free';font-weight: 600;color: var(--c-5);font-size: var(--f-s-1);}
.logout-btn:hover{background-color: var(--c-alert-h);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);}
.logout-wrapper{display: flex;justify-content: space-between;margin-bottom: 24px;gap: 24px;}
.add-newupdate .head-main{margin-bottom: 0px;}
.add-newupdate .admin-link{margin-bottom: 20px;text-decoration: none;color: var(--c-1);background-color: var(--c-1);font-size: 0px;}
.admin-link::before{content: '\f060';font-family: 'Font Awesome 6 free';font-weight: 600;font-size: var(--f-s-1);color: var(--c-5);}
.logout-wrapper .create-card-btn.create_btn{align-self: flex-start;}
/* Admin form */
    input:focus, textarea:focus{outline: none;border-color: var(--c-1) !important;background-color: var(--c-5) !important;box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;}
    textarea {resize: vertical;min-height: 100px;}
    /* Action Buttons */
    .icon-btn{width: 40px;height: 40px;border-radius: 50%;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: var(--f-s-1);transition: all 0.3s;color: var(--c-5);}
    .icon-btn.edit{background-color: var(--c-1);}
    .icon-btn.edit:hover, .icon-btn.admin-link:hover{background-color: var(--c-8);transform: scale(1.1);}
    .icon-btn.delete{background: var(--c-alert);}
    .icon-btn.delete:hover{background: var(--c-alert-h);transform: scale(1.1);}

    /* Skeleton Loading Start*/
    .skeleton-card{background-color: var(--c-5);border-radius: var(--b-r-3);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);display: flex;padding: 10px;gap: 20px;min-height: 300px;min-width: 510px;}
    .skeleton{background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: loading 1.5s infinite;border-radius: 6px;}
    .skeleton-img{width: 340px;height: 100%}
    .skeleton-content{width: calc(100% - 340px);display: flex;flex-direction: column;justify-content: space-between;gap: 12px;padding: 20px 10px 10px 0px;height: 100%;}
    .skeleton-info{display: flex;flex-direction: column;gap: 12px;}
    .skeleton-title{height: 24px;width: 60%;}
    .skeleton-text{height: 16px;width: 80%;}
    .skeleton-line{height: 14px;width: 100%;}
    .skeleton-card-actions{display: flex;gap: 12px;justify-content: flex-end;}
    .skeleton-card-btn{width: 20%;height: 16px;}

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
   /* Skeleton Loading End*/ 

/* Loader Styles start*/
#customLoader, #customPopup, #customConfirm, .modal-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);display: none;align-items: center;justify-content: center;z-index: 16;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
#customLoader.active, #customPopup.active, #customConfirm.active, .modal-overlay.active{display: flex;opacity: 1;visibility: visible;}
.loader-content{background-color: var(--c-5);padding: 24px;border-radius: var(--b-r-3);text-align: center;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);min-width: 240px;}
.adspinner{width: 50px;height: 50px;border: 4px solid #f3f3f3;border-top: 4px solid var(--c-1);border-radius: 50%;animation: adspinner 1s linear infinite;margin: 0 auto 20px;}
.loader-text{color: var(--c-2);font-size: var(--f-s-1);font-weight: var(--f-w-6);margin: 0;}
@keyframes adspinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Loader Styles end*/

/* Popup Styles start*/
.popup-content{background-color: var(--c-5);padding: 24px;border-radius: var(--b-r-3);text-align: center;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);max-width: 400px;width: 90%;animation: popupSlide 0.3s ease;}
@keyframes popupSlide {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.popup-icon{font-size: 64px;margin-bottom: 20px;}
.popup-icon.success{color: #10b981;}
.popup-icon.error{color: var(--c-alert);}
.popup-icon.warning {color: #f59e0b;}
.popup-message{font-size: 18px;color: var(--c-2);margin-bottom: 30px;line-height: 1.6;}
.popup-btn{background-color: var(--c-1);color: var(--c-5);padding: 12px 40px;border: none;border-radius: var(--b-r-2);font-size: var(--f-s-1);font-weight: var(--f-w-5);cursor: pointer;transition: all 0.3s;}
.popup-btn:hover {background: var(--c-8);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(14, 166, 123, 0.3);}
.popup-buttons{display: flex;gap: 14px;justify-content: center;}
.popup-btn.cancel{background-color: #6b7280;}
.popup-btn.cancel:hover {background-color: #4b5563;box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);}
.popup-btn.confirm{background-color: var(--c-alert);}
.popup-btn.confirm:hover{background-color: var(--c-alert-h);box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);}
/* Popup Styles end*/

/* Empty State start*/
.empty-state{display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--c-6);border-radius: var(--b-r-3);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);border: 2px dashed var(--c-7);min-height: 300px;width: 100%;min-width: 510px;}
.empty-state i.fa-inbox{xopacity: 0.3;font-size: var(--f-s-9);color: var(--c-7);margin-bottom: 8px;}
.empty-state h2{font-size: var(--f-s-4);color: var(--c-2);margin-bottom: 8px;font-weight: 600;text-transform: capitalize;}
.empty-state p{margin-bottom: 32px;}
/* Empty State end*/

.create-card-btn, .btn-create{background-color: var(--c-1);color: var(--c-5);border: none;padding: 12px 20px;border-radius: var(--b-r-2);font-size: var(--f-s-1);cursor: pointer;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 8px;line-height: 18px;}
.create-card-btn:hover, .btn-create:hover{background-color: var(--c-8);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(14, 166, 123, 0.3);}
.create-card-btn::before, .btn-create:not(.btn-create.icon-check)::before{content: '\2b';font-family: 'Font Awesome 6 free';font-weight: 600;color: var(--c-5)}

/* Modal Container */
.modal-wrapper{background-color: var(--c-5);border-radius: var(--b-r-3);width: 90%;max-width: 600px;xmax-height: 90vh;overflow-y: auto;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);transform: scale(0.9) translateY(-20px);transition: all 0.3s ease;}
.modal-overlay.active .modal-wrapper{transform: scale(1) translateY(0);}
/* Modal Header */
.modal-head{display: flex;justify-content: space-between;align-items: center;padding: 18px 24px;border-bottom: 1px solid #e5e7eb;}
.modal-head h2{font-size: var(--f-s-4);color: var(--c-2);font-weight: var(--f-w-6);margin: 0;}

.modal-close{background: none;width: 28px;height: 28px;border-radius: 50%;border: none;font-size: var(--f-s-2);color: var(--c-6);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s;xtransition: color 0.2s;}
.modal-close:hover {color: var(--c-2);background: #e2e8f0;transform: rotate(90deg);}
.modal_body{padding: 24px 12px 24px 24px;max-height: 74vh;overflow-y: auto;}
/* Modal Form */

.form-field:not(:last-child){margin-bottom: 24px;}
.form-field label{display: block;font-size: var(--f-s-0);font-weight: var(--f-w-6);color: var(--c-2);margin-bottom: 8px;}
.required{color: var(--c-alert);}
.form-field input, .form-field textarea{width: 100%;padding: 12px 16px;border: 1px solid #e5e7eb;border-radius: var(--b-r-2);font-size: var(--f-s-0);color: var(--c-6);transition: all 0.2s;box-sizing: border-box;}
.form-field input::placeholder{color: var(--c-6);}

/* Job Roles Container */
#jobRolesContainer, #requirementsContainer{display: flex;flex-direction: column;gap: 12px;margin-bottom: 12px;}
.dynamic-input-wrapper{display: flex;align-items: center;gap: 12px;}
.dynamic-input{flex: 1;}
.remove-input-btn{width: 40px;height: 40px;background-color: var(--c-5);border: 1px solid #fecaca;border-radius: var(--b-r-2);color: var(--c-alert);font-size: var(--f-s-2);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s;flex-shrink: 0;}
.remove-input-btn:hover{background-color: #fef2f2;border-color: var(--c-alert);}
.add-btn{width: 100%;padding: 10px 16px;background-color: var(--c-5);border: 1px dashed var(--c-6);border-radius: var(--b-r-2);color: var(--c-6);font-size: var(--f-s-0);font-weight: var(--f-w-5);cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 8px;transition: all 0.2s;}
.add-btn:hover{border-color: var(--c-1);color: var(--c-1);background-color: rgba(14, 166, 123, 0.05);}

/* Modal Footer */
.modal-footers{display: flex;justify-content: flex-end;gap: 12px;padding: 12px 24px;border-top: 1px solid #e5e7eb;margin-top: 12px;}
.btn-cancel{padding: 8px 16px;background-color: var(--c-5);border: 1px solid var(--c-1);border-radius: var(--b-r-2);color: var(--c-1);font-size: var(--f-s-0);font-weight: var(--f-w-5);cursor: pointer;line-height: 18px;transition: all 0.2s;}
.btn-cancel:hover{background-color: var(--c-1);color: var(--c-5);transform: translateY(-2px);}
.btn-create{padding: 8px 16px;font-size: var(--f-s-0);}
.btn-create.icon-check::before{content: '\f00c';font-family: 'Font Awesome 6 free';font-weight: 600;color: var(--c-5)}
/* Responsive Design */


/* Details Modal Specific Styles */
.details-modal{max-width: 700px;}
#detailsCountry{font-size: var(--f-s-2);text-transform: capitalize;font-weight: var(--f-w-5);color: var(--c-2);margin-bottom: 24px;letter-spacing: 0.5px;}
.details-image{width: 100%;height: 300px;margin-bottom: 32px;border-radius: var(--b-r-3);overflow: hidden;background-color: #f3f4f6;}
.details-image img{width: 100%;height: 100%;object-fit: cover;}
.details-content{display: flex;flex-direction: column;gap: 24px;}
.details-field label{display: block;font-size: var(--f-s-0);font-weight: var(--f-w-6);color: var(--c-2);text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 8px;}
.details-field p{font-size: var(--f-s-1);color: var(--c-6);line-height: 1.6;margin: 0;}
.details-field ul{list-style: none;padding: 0px;margin: 0;}
.details-field ul li{xpadding: 12px 20px;xbackground-color: var(--c-4);border-radius: var(--b-r-2);}
#detailsJobs .serve-poi:last-of-type, #detailsRequirements .serve-poi:last-of-type{margin-bottom: 0px;}
.details-field:has(p:empty), .details-field:has(ul:empty){display: none;}
.requirements-list li .more-list, .jobs-list li .more-list{color: var(--c-6);font-style: italic;font-size: 0.9em;font-weight: var(--f-w-5);cursor: pointer;text-decoration: underline;}
.requirements-list li .more-list:hover, .jobs-list li .more-list:hover{color: var(--c-2);}
/* Responsive Adjustments */

/* Card Ribbon start */
.info-card {position: relative;overflow: visible;}
.card-ribbon{position: absolute;top: 15px;right: -5px;padding: 5px 15px;font-size: 14px;font-weight: 500;color: var(--c-5);z-index: 10;border-radius: 4px 0px 0px 4px;box-shadow: 0 2px 8px rgba(0,0,0,0.2);text-transform: capitalize;}
.card-ribbon::before {content: '';position: absolute;right: 0;bottom: -5px;width: 0;height: 0;border-style: solid;border-width: 0 5px 5px 0;border-color: transparent;}
.new-ribbon, .date-ribbon{background: linear-gradient(135deg, var(--c-1) 0%, var(--c-2) 100%);}
.new-ribbon::before, .date-ribbon::before{border-right-color: #010a11;}
/* Card Ribbon End */

@media (max-width: 640px) {
    .modal-head, .modal-form{padding: 20px;}
    .modal-footer {flex-direction: column-reverse;}
    .modal-footer button{width: 100%;}
}
@media (min-width: 768px) and (max-width: 1200px){
    .admin-header{padding: 10px 54px;}
}
@media (max-width: 768px){
    .logout-btn{gap: unset;font-size: 0;padding: 0;border-radius: 50%;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;}    
    .form-grid{grid-template-columns: 1fr;}
    .details-image{height: 200px;}
    .logout-wrapper{flex-direction: column;}
    .logout-wrapper .create-card-btn.create_btn{align-self: flex-end;}
    .skeleton-card{flex-direction: column;}
    .skeleton-img{height: 280px;width: 100%;}
    .skeleton-content{width: 100%;}
}
@media (max-width: 991.98px){
    .admin-header{padding: 10px 24px;}
}