:root{--ctj:linear-gradient(90deg, #ff5b6f, #ffb100);--ctj-dark:#102a2a;--ctj-soft:#edf8f5;--ctj-border:#d6e2df}.ctj-dashboard,.ctj-form{color:#243332}.ctj-dashboard-head{background-color: rgb(0 0 0 / .6);color:#fff;border-radius:14px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.ctj-dashboard-head span,.ctj-section-title span{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}.ctj-dashboard-head h2{color:#fff;margin:.25rem 0 0}.ctj-dashboard-head nav{display:flex;gap:8px;flex-wrap:wrap}.ctj-dashboard-head nav a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);padding:.45rem .65rem;border-radius:6px}.ctj-card{background:#fff;border:1px solid var(--ctj-border);border-radius:12px;padding:clamp(18px,3vw,28px);box-shadow:0 6px 24px rgba(23,60,53,.07);margin:1.25rem 0}.ctj-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.ctj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.25rem 0}.ctj-stats>div{background:var(--ctj-soft);border-radius:10px;padding:18px}.ctj-stats strong{display:block;font-size:1.6rem;color:var(--ctj-dark)}.ctj-stats span{font-size:.85rem;color:#526a67}.ctj-form label{display:block;font-weight:650}.ctj-form input:not([type=checkbox]):not([type=radio]),.ctj-form textarea,.ctj-form select,.ctj-filter input,.ctj-filter select{display:block;width:100%;box-sizing:border-box;padding:7px;border:1px solid #b9cbc7;border-radius:7px;background:#fff;font:inherit}.ctj-form textarea{resize:vertical}.ctj-form fieldset{border:1px solid var(--ctj-border);border-radius:9px;padding:14px;margin:18px 0}.ctj-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}.ctj-check-grid label,.ctj-radio-row label,.ctj-inline,.ctj-consent{display:flex!important;align-items:flex-start;gap:.55rem;font-weight:450!important}.ctj-check-grid input,.ctj-radio-row input,.ctj-inline input,.ctj-consent input{margin-top:.28rem}.ctj-days{grid-template-columns:repeat(7,minmax(0,1fr))}.ctj-radio-row{display:flex;gap:18px;flex-wrap:wrap}.ctj-consent{background:#f7faf9;border:1px solid var(--ctj-border);padding:13px;border-radius:8px;margin:18px 0}.ctj-button{display:inline-block;border:0;background:var(--ctj);color:#fff!important;border-radius:7px;padding:.75rem 1.05rem;font-weight:750;cursor:pointer;text-decoration:none}.ctj-button:hover{filter:brightness(.92)}.ctj-button-secondary{background:#475d59}.ctj-danger{background:#a32d2d}.ctj-section-title{display:flex;justify-content:space-between;align-items:center;gap:18px}.ctj-section-title h2{margin:.2rem 0}.ctj-switch{display:flex!important;gap:.5rem}.ctj-notice{background:#e7f8ef;border-left:4px solid #188451;padding:13px 16px;border-radius:5px;margin:1rem 0}.ctj-badge{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-radius:99px;padding:.25rem .55rem;background:#e7edf0;color:#425466}.ctj-pending{background:#fff2cc;color:#775900}.ctj-publish,.ctj-sent{background:#dcfce7;color:#166534}.ctj-rejected,.ctj-failed{background:#fee2e2;color:#991b1b}.ctj-table-wrap{overflow-x:auto}.ctj-table-wrap table{width:100%;border-collapse:collapse}.ctj-table-wrap th,.ctj-table-wrap td{text-align:left;vertical-align:top;border-bottom:1px solid var(--ctj-border);padding:.7rem .4rem}.ctj-match-list{list-style:none;padding:0;margin:0}.ctj-match-list li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;border-bottom:1px solid var(--ctj-border);padding:.7rem 0}.ctj-match-list small{grid-column:1/-1;color:#607773}.ctj-job-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.ctj-job-grid .ctj-card{margin:0}.ctj-job-grid h3{margin:.7rem 0}.ctj-job-grid dl,.ctj-job-details dl,details dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}.ctj-job-grid dt,.ctj-job-details dt,details dt{font-weight:700}.ctj-job-grid dd,.ctj-job-details dd,details dd{margin:0}.ctj-link{color:var(--ctj);font-weight:700}.ctj-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.ctj-filter{display:grid;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:12px;margin:1rem 0}.ctj-config-table select{min-width:90px}.ctj-config-table input[type=text]{min-width:220px}.ctj-moderate-form{display:grid;gap:7px;min-width:170px}.ctj-card details{margin-top:.6rem}.ctj-card summary{color:var(--ctj);font-weight:700;cursor:pointer}@media(max-width:800px){.ctj-dashboard-head{align-items:flex-start;flex-direction:column}.ctj-grid-2,.ctj-stats,.ctj-filter{grid-template-columns:1fr}.ctj-check-grid{grid-template-columns:repeat(2,1fr)}.ctj-days{grid-template-columns:repeat(2,1fr)}}
.ctj-status-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:1rem 0 1.4rem}.ctj-status-tabs a{border:1px solid var(--ctj-border);border-radius:99px;padding:.5rem .75rem;text-decoration:none;color:var(--ctj-dark);font-weight:700}.ctj-status-tabs a.is-active{background:linear-gradient(90deg, #ff5b6f, #ffb100);color:#fff}.ctj-status-tabs span{display:inline-block;min-width:1.4rem;text-align:center;background:rgba(127,127,127,.15);border-radius:99px;margin-left:.25rem}.ctj-moderation-list{display:grid;gap:18px}.ctj-moderation-card{border:1px solid var(--ctj-border);border-radius:12px;padding:20px;background:#fbfdfc}.ctj-moderation-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--ctj-border);padding-bottom:12px}.ctj-moderation-card h3{margin:.6rem 0 0}.ctj-moderation-id{color:#6b7d79;font-weight:700}.ctj-moderation-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--ctj-soft);padding:14px;border-radius:8px;margin:14px 0}.ctj-review-note,.ctj-contact-policy{background:#fff8df;border-left:4px solid #c28b00;padding:12px 14px;margin:12px 0}.ctj-edit-listing{border:1px solid var(--ctj-border);border-radius:8px;padding:12px;margin:14px 0!important;background:#fff}.ctj-staff-edit{padding-top:14px}.ctj-action-row{display:flex;flex-wrap:wrap;gap:8px}.ctj-moderate-form>label input{display:block;width:100%;box-sizing:border-box;margin-top:.35rem;padding:.65rem;border:1px solid #b9cbc7;border-radius:7px}.ctj-job-details dl{grid-template-columns:minmax(170px,.6fr) minmax(0,1.4fr);margin-top:1.2rem}.ctj-job-details dt,.ctj-job-details dd{padding:.65rem .35rem;border-bottom:1px solid var(--ctj-border)}@media(max-width:800px){.ctj-moderation-meta{grid-template-columns:1fr 1fr}.ctj-job-details dl{grid-template-columns:1fr}.ctj-job-details dt{border-bottom:0;padding-bottom:0}.ctj-job-details dd{padding-top:.2rem}}@media(max-width:520px){.ctj-moderation-meta{grid-template-columns:1fr}.ctj-action-row .ctj-button{width:100%}}
.ctj-password-field{display:flex;align-items:stretch;gap:6px;}.ctj-password-field input{min-width:0;flex:1;margin-top:0!important}
.ctj-profile-details{display:grid;grid-template-columns:minmax(140px,.35fr) minmax(0,1fr);gap:.6rem 1rem;margin:1.25rem 0}.ctj-profile-details dt{font-weight:750}.ctj-profile-details dd{margin:0}@media(max-width:600px){.ctj-profile-details{grid-template-columns:1fr}.ctj-profile-details dd{margin-bottom:.6rem}}
.ctj-auto-renew-form,.ctj-action-row,.ctj-logout-form{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.ctj-auto-renew-form .ctj-button{padding:.48rem .7rem}
.ctj-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1rem 0}.ctj-role-card{display:flex!important;align-items:flex-start;gap:.75rem;border:2px solid var(--ctj-border);border-radius:10px;padding:16px;background:#fff;cursor:pointer}.ctj-role-card:has(input:checked){border-color:var(--ctj);background:var(--ctj-soft)}.ctj-role-card input{margin-top:.25rem}.ctj-role-card strong,.ctj-role-card small{display:block}.ctj-role-card small{font-weight:450;color:#526a67;margin-top:.3rem}.ctj-jobs-filter .ctj-filter{grid-template-columns:2fr 1.3fr auto auto}.ctj-map-card{padding-bottom:18px}.ctj-jobs-map{height:480px;min-height:320px;border:1px solid var(--ctj-border);border-radius:10px;overflow:hidden;background:#eaf2f0}.ctj-map-marker{cursor:pointer}.ctj-map-tooltip,.ctj-map-popup{display:grid;gap:.28rem;min-width:180px}.ctj-map-tooltip span,.ctj-map-popup span{display:block;color:#445b57}.ctj-map-popup-title{font-size:1.05rem}.ctj-map-popup p{margin:.35rem 0}.ctj-map-popup a{color:var(--ctj);font-weight:750}.ctj-map-note{margin-bottom:0}.leaflet-container{font-family:inherit}.leaflet-tooltip{border:0;border-radius:7px;box-shadow:0 4px 18px rgba(16,42,42,.2)}@media(max-width:800px){.ctj-role-grid,.ctj-jobs-filter .ctj-filter{grid-template-columns:1fr}.ctj-jobs-map{height:390px}}
.ctj-field-disabled{opacity:.5}.ctj-field-disabled input{cursor:not-allowed}.ctj-email-filter{grid-template-columns:2fr 1fr 1fr .8fr auto}.ctj-page-summary{background:var(--ctj-soft);border-radius:7px;padding:.7rem .9rem;font-weight:650}.ctj-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:1rem}.ctj-pagination .page-numbers{display:inline-block;padding:.5rem .7rem;border:1px solid var(--ctj-border);border-radius:6px;text-decoration:none}.ctj-pagination .current{background:var(--ctj);border-color:var(--ctj);color:#fff}@media(max-width:800px){.ctj-email-filter{grid-template-columns:1fr}}

/* Guided member journey — one section per page */
.ctj-dashboard-head nav a.ctj-nav-current{background:rgba(255,255,255,.22);border-color:#fff;font-weight:750}
.ctj-dashboard-head nav .ctj-nav-locked{color:rgba(255,255,255,.45);border:1px dashed rgba(255,255,255,.25);padding:.45rem .65rem;border-radius:6px;cursor:not-allowed}
.ctj-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.25rem;padding:0;counter-reset:none}
.ctj-step-item{/*flex:1 1 150px;min-width:140px;*/}
.ctj-step-item a,.ctj-step-item>span{display:flex;align-items:center;gap:.55rem;height:100%;box-sizing:border-box;padding:7px 10px;border-left:4px solid var(--ctj-border);border-radius:8px;background:#fff;text-decoration:none;color:#3c524f;font-size:12px;font-weight:600}
.ctj-step-item em{display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;flex:0 0 auto;border-radius:99px;background:var(--ctj-border);color:#25423d;font-style:normal;font-size:.8rem;font-weight:750}
.ctj-step-done a{border-left-color:#ff5b6f;background:var(--ctj-soft)}
.ctj-step-done em{background:var(--ctj);color:#fff}
.ctj-step-current a,.ctj-step-current>span{border-left-color:var(--ctj);background:linear-gradient(90deg, #ff5b6f, #ffb100);color:#fff}
.ctj-step-current a:hover{color:#ffffff;}
.ctj-step-item a:hover{background:linear-gradient(90deg, #ff5b6f, #ffb100);color:#fff}
.ctj-step-current em{background:#fff;color:var(--ctj-dark)}
.ctj-step-locked>span{opacity:.55;cursor:not-allowed;background:#f4f7f6}
.ctj-journey-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:1.5rem 0 .5rem;padding-top:1.25rem;border-top:1px solid var(--ctj-border)}
.ctj-journey-actions>div{display:flex;gap:10px}
.ctj-plan-choice{display:block;cursor:pointer;position:relative;font-weight:450}
.ctj-plan-choice input{position:absolute;top:16px;left:16px;margin:0}
.ctj-plan-choice .ctj-plan-body{display:block;padding-left:1.8rem}
.ctj-plan-choice .ctj-plan-name{display:block;font-size:1.15rem;margin-bottom:.5rem}
.ctj-plan-choice .ctj-plan-text{display:block;margin-top:.5rem}
.ctj-plan-choice:has(input:checked){border-color:var(--ctj);box-shadow:0 0 0 2px rgba(23,107,91,.18);background:var(--ctj-soft)}
@media(max-width:800px){.ctj-steps{flex-direction:column}.ctj-step-item{min-width:0}.ctj-journey-actions{flex-direction:column;align-items:stretch}.ctj-journey-actions .ctj-button{display:block;text-align:center}}

/* Job Seeker performance rating (v1.6.2) */
.ctj-rating-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--ctj-soft);border:1px solid var(--ctj-border);border-radius:99px;padding:.28rem .7rem;font-weight:650}
.ctj-rating-badge .ctj-rating-score{font-size:1.05rem;color:var(--ctj-dark);font-weight:800}
.ctj-rating-badge .ctj-rating-score small{font-weight:600;color:#6b807c}
.ctj-rating-badge .ctj-rating-meta{font-size:.78rem;color:#526a67;font-weight:600}
.ctj-rating-badge.ctj-rating-none{color:#6b807c;font-weight:600}
.ctj-rating-card .ctj-rating-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:.5rem 0 1rem}
.ctj-rating-big{font-size:2.6rem;font-weight:800;color:var(--ctj-dark);line-height:1;display:flex;align-items:baseline;gap:.35rem}
.ctj-rating-big small{font-size:1rem;font-weight:600;color:#6b807c}
.ctj-rating-facts p{margin:.15rem 0}

/* Invoice (v1.6.2) */
.ctj-invoice{border:1px solid var(--ctj-border);border-radius:10px;padding:20px;margin:16px 0;background:#fff}
.ctj-invoice-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ctj-invoice-head h2{margin:0 0 .25rem}
.ctj-invoice-meta{text-align:right}
.ctj-invoice-meta h3{margin:0}
.ctj-invoice-billto{margin:16px 0}
.ctj-invoice-table{width:100%;border-collapse:collapse;margin-top:12px}
.ctj-invoice-table th,.ctj-invoice-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #e5eeeb}
.ctj-invoice-table td:last-child,.ctj-invoice-table th:last-child{text-align:right}
.ctj-invoice-total td{font-weight:800;border-top:2px solid var(--ctj)}
.ctj-invoice-footer{margin-top:16px;color:#526a67}


/* Custom CSS */


.search-form, .ctj-jobs-filter .ctj-filter{
   align-items:center;
    background:#fff;
    padding:5px 15px;
    box-shadow:0 15px 45px rgba(0,0,0,.12);
}

.search-item, .ctj-filter label{
    flex:1;
    display:flex;
    align-items:center;
    padding:0 15px;
}


.icon{
    color:#c8cedf;
    font-size:22px;
    margin-right:18px;
}

.search-item input, .ctj-filter label input, .ctj-filter label select{
    width:100%;
    height:35px;
    border:none;
    outline:none;
    font-size:13px;
    color:#2d3b5c;
    border-bottom:1px solid #ececec;
    background:transparent;
}

.search-item input::placeholder, .ctj-filter label input::placeholder, .ctj-filter label select::placeholder{
    color:#9aa3bc;
}

.search-btn, .ctj-filter .ctj-button, .ctj-button, .ctj-link{
    height:30px;
    border:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
    color:#fff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    background:linear-gradient(90deg,#ff5b6f,#ffb100);
}

.search-btn i{
    font-size:16px;
}
.job-search-icon{display: flex;}
.job-search-icon::before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        display: inline-block;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: auto;
        flex: 0 0 0.5rem;
        margin-right: -0.5rem;
        font-size: 16px;
        color: #ff5b6f;
        content: "\f124";
        line-height: 4rem;
}
.job-search-cat{display: flex;}
.job-search-cat::before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        display: inline-block;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: auto;
        flex: 0 0 0.5rem;
        margin-right: -0.5rem;
        font-size: 16px;
        color: #ff5b6f;
        content: '\f002';
        line-height: 4rem;
}
a.ctj-link{
    font-size:12px;
    border-radius: 7px;
    height: 30px;
    text-transform: capitalize
}
a.ctj-link:hover{
        background-image: linear-gradient(to right, #ff5c6c, #FCB80A);
        color:#ffffff;

}

@media(max-width:991px){

.search-form, .ctj-jobs-filter .ctj-filter{
    flex-direction:column;
    padding:20px;
}

.search-item, .ctj-filter label{
    width:100%;
    border-right:none;
    margin-bottom:20px;
    padding:0;
}

.search-btn{
    width:100%;
}

}

h2, .ctj-card h3 a{
    text-transform: capitalize;
}
.ctj-card h3 a{
        font-size: 16px;
}
.ctj-job-grid p{
    font-size:13px;
    line-height:18px;
}

/* =========================================
   Frontend Login Form
========================================= */

.ctj-card:has(#loginform) {
    max-width: 400px;
    margin: 50px auto;
    padding: 15px 15px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* Login heading */
.ctj-card:has(#loginform) h4 {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.3;
    color: #172b4d;
}

/* Login form */
#loginform {
    margin: 0;
    padding: 0;
}

/* Username + Password labels */
#loginform label {
    display: block;
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 500;
    color: #344563;
}

/* Inputs */
#loginform input[type="text"],
#loginform input[type="email"],
#loginform input[type="password"] {
    width: 100%;
    height: 35px;
    padding: 0 15px;
    margin-top: 0px;
    border: 1px solid #d9e0e7;
    border-radius: 7px;
    background: #fff;
    color: #172b4d;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus */
#loginform input[type="text"]:focus,
#loginform input[type="email"]:focus,
#loginform input[type="password"]:focus {
    border-color: #ff9f1c;
    box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.12);
}

/* Password wrapper */
#loginform .ctj-password-field {
    position: relative;
    display: block;
}

/* Space for eye icon */
#loginform .ctj-password-field input[type="password"],
#loginform .ctj-password-field input[type="text"] {
    padding-right: 48px;
}

/* Eye button */
#loginform .ctj-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    color: #526581;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
}

/* Eye icon */
#loginform .ctj-password-toggle i {
    font-size: 17px;
}

/* Eye hover */
#loginform .ctj-password-toggle:hover {
    color: #ff9f1c;
    background: transparent;
}

/* Remember me */
#loginform .login-remember {
    margin: 15px 0 20px;
}

#loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

#loginform .login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Login button */
#loginform .login-submit {
    margin: 0;
}

#loginform .login-submit input[type="submit"] {
    border-radius: 7px;
    background: linear-gradient(90deg, #ff5f6d, #ffb000);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#loginform .login-submit input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 159, 28, 0.25);
}

/* Forgot password */
.ctj-card:has(#loginform) > p {
    margin: 15px 0 0;
}

.ctj-card:has(#loginform) > p a {
    color: #ff5f6d;
    font-size: 14px;
    text-decoration: none;
}

.ctj-card:has(#loginform) > p a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {

    .ctj-card:has(#loginform) {
        margin: 30px 15px;
        padding: 25px 20px;
    }

    .ctj-card:has(#loginform) h4 {
        font-size: 23px;
    }

    #loginform input[type="text"],
    #loginform input[type="email"],
    #loginform input[type="password"] {
        height: 35px;
    }

    #loginform .login-submit input[type="submit"] {
        width: 100%;
    }
}

/* =========================================
   Administrator Login
========================================= */

.ctj-admin-login {
    max-width: 400px;
    margin: 45px auto;
    padding: 15px 15px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* Heading */
.ctj-admin-login h2 {
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #172b4d;
    text-align:center;
}

/* Labels */
.ctj-admin-login label {
    display: block;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: #263858;
}

/* Input wrapper */
.ctj-admin-login .ctj-password-field {
    position: relative;
    display: block;
}

/* Inputs */
.ctj-admin-login input[type="email"],
.ctj-admin-login input[type="text"],
.ctj-admin-login input[type="password"] {
    width: 100%;
    height: 35px;
    padding: 0 15px;
    margin: 7px 0 22px;
    border: 1px solid #d5dde5;
    border-radius: 7px;
    background: #fff;
    color: #172b4d;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Input focus */
.ctj-admin-login input[type="email"]:focus,
.ctj-admin-login input[type="text"]:focus,
.ctj-admin-login input[type="password"]:focus {
    border-color: #ff9f1c;
    box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.12);
}

/* Password input space */
.ctj-admin-login .ctj-password-field input {
    padding-right: 48px;
}

/* Eye button */
.ctj-admin-login .ctj-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    color: #526581;
    cursor: pointer;
}

/* Eye icon */
.ctj-admin-login .ctj-password-toggle i {
    font-size: 17px;
}

/* Eye hover */
.ctj-admin-login .ctj-password-toggle:hover {
    color: #ff9f1c;
    background: transparent;
}

/* Submit button */
.ctj-admin-login .ctj-button,
.ctj-admin-login button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 230px;
    height: 48px;

    padding: 0 25px;

    border: 0;
    border-radius: 7px;

    background: linear-gradient(
        90deg,
        #ff5f6d,
        #ffb000
    );

    color: #fff;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Button hover */
.ctj-admin-login .ctj-button:hover,
.ctj-admin-login button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 159, 28, 0.25);
}

/* Mobile */
@media (max-width: 768px) {

    .ctj-admin-login {
        max-width: calc(100% - 30px);
        margin: 30px auto;
        padding: 28px 22px;
    }

    .ctj-admin-login h2 {
        font-size: 24px;
        margin-bottom: 28px;
    }

    .ctj-admin-login .ctj-button,
    .ctj-admin-login button[type="submit"] {
        width: 100%;
    }
}
/* =========================================
   Registration Form UI
========================================= */

.ctj-card.ctj-form:has(input[name="account_mode"]) {
    max-width: 800px;
    margin: 40px auto;
    padding: 15px 15px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}

/* -----------------------------------------
   Heading
----------------------------------------- */

.ctj-card.ctj-form:has(input[name="account_mode"]) > h2 {
    margin: 0 0 15px;
    font-size: 16px;
    line-height:20px;
    font-weight: 700;
    color: #172b4d;
}

/* Description */
.ctj-card.ctj-form:has(input[name="account_mode"]) > p {
    margin: 0 0 28px;
    color: #65758b;
    font-size: 12px;
    line-height: 1.6;
}

/* -----------------------------------------
   Input Grid
----------------------------------------- */

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 0px;
}

/* Labels */
.ctj-card.ctj-form:has(input[name="account_mode"]) label {
    display: block;
    color: #263858;
    font-size: 13px;
    font-weight: 600;
}

/* Text inputs */
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="text"],
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="email"],
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="password"] {
    width: 100%;
    height: 35px;
    margin-top: 0px;
    padding: 0 14px;

    border: 1px solid #d5dde5;
    border-radius: 7px;

    background: #fff;
    color: #172b4d;

    font-size: 13px;
    box-sizing: border-box;
    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

/* Focus */
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="text"]:focus,
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="email"]:focus,
.ctj-card.ctj-form:has(input[name="account_mode"]) input[type="password"]:focus {
    border-color: #ff9f1c;
    box-shadow: 0 0 0 3px rgba(255, 159, 28, .12);
}

/* -----------------------------------------
   Password Eye
----------------------------------------- */

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-password-field {
    position: relative;
    display: block;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-password-field input {
    padding-right: 48px;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    background: transparent;

    color: #526581;
    cursor: pointer;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-password-toggle:hover {
    color: #ff9f1c;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-password-toggle i {
    font-size: 16px;
}

/* -----------------------------------------
   Register As
----------------------------------------- */

.ctj-card.ctj-form:has(input[name="account_mode"]) fieldset {
    margin: 15px 0 24px;
    padding: 14px 15px 15px;

    border: 1px solid #d9e1e7;
    border-radius: 9px;
    background: #fafcfd;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) fieldset legend {
    padding: 0 7px;
    color: #172b4d;
    font-size: 16px;
    font-weight: 700;
}

/* Role grid */
.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

/* Role card */
.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 17px;

    border: 1px solid #d5dde5;
    border-radius: 9px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

/* Radio */
.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-card > input {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: #ff8f1f;
}

/* Role content */
.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-card span {
    display: block;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-card strong {
    display: block;
    margin-bottom: 5px;

    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-card small {
    display: block;

    color: #65758b;
    font-size: 12px;
    line-height: 16px;
}

/* Selected role */
.ctj-card.ctj-form:has(input[name="account_mode"]) 
.ctj-role-card:has(input:checked) {
    border-color: #ff9f1c;
    background: #fffaf2;
    box-shadow: 0 5px 18px rgba(255, 159, 28, .10);
}

/* Hover */
.ctj-card.ctj-form:has(input[name="account_mode"]) 
.ctj-role-card:hover {
    border-color: #ffb04a;
    transform: translateY(-1px);
}

/* -----------------------------------------
   Create Account Button
----------------------------------------- */

.ctj-card.ctj-form:has(input[name="account_mode"]) > .ctj-button {
    padding: 0 25px;

    border: 0;
    border-radius: 7px;

    background: linear-gradient(
        90deg,
        #ff5f6d,
        #ffb000
    );

    color: #fff;

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

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) > .ctj-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 159, 28, .25);
}

/* Forgot password */
.ctj-card.ctj-form:has(input[name="account_mode"]) > p:last-child {
    margin: 9px 0 0;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) > p:last-child a {
    color: #ff5f6d;
    font-size: 14px;
    text-decoration: none;
}

.ctj-card.ctj-form:has(input[name="account_mode"]) > p:last-child a:hover {
    text-decoration: underline;
}

/* -----------------------------------------
   Mobile
----------------------------------------- */

@media (max-width: 700px) {

    .ctj-card.ctj-form:has(input[name="account_mode"]) {
        width: calc(100% - 30px);
        margin: 25px auto;
        padding: 28px 20px;
    }

    .ctj-card.ctj-form:has(input[name="account_mode"]) > h2 {
        font-size: 16px;
    }

    .ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-grid-2,
    .ctj-card.ctj-form:has(input[name="account_mode"]) .ctj-role-grid {
        grid-template-columns: 1fr;
    }

    .ctj-card.ctj-form:has(input[name="account_mode"]) > .ctj-button {
        width: 100%;
    }
}
/* =========================================
   Forgot / Reset Password Form
========================================= */

.ctj-card.ctj-form:has(input[name="user_login"]) {
    max-width: 400px;
    margin: 55px auto;
    padding: 15px 15px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Heading */
.ctj-card.ctj-form:has(input[name="user_login"]) h2 {
    margin: 0 0 12px;
    color: #172b4d;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

/* Description */
.ctj-card.ctj-form:has(input[name="user_login"]) > p {
    margin: 0 0 15px;
    color: #65758b;
    font-size: 12px;
    line-height: 16px;
}

/* Label */
.ctj-card.ctj-form:has(input[name="user_login"]) label {
    display: block;
    margin-bottom: 15px;

    color: #263858;
    font-size: 12px;
    font-weight: 600;
}


/* Mobile */
@media (max-width: 700px) {

    .ctj-card.ctj-form:has(input[name="user_login"]) {
        width: calc(100% - 30px);
        margin: 30px auto;
        padding: 28px 20px;
    }

    .ctj-card.ctj-form:has(input[name="user_login"]) h2 {
        font-size: 25px;
    }

}

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

.ctj-job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}


/* =========================================================
   JOB CARD
========================================================= */

.ctj-job-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 355px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #dce3e9;
    border-radius: 14px;

    box-sizing: border-box;

    box-shadow: 0 5px 20px rgba(23, 43, 77, 0.04);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Hover */

.ctj-job-card:hover {
    transform: translateY(-5px);

    border-color: #ffb04a;

    box-shadow:
        0 15px 35px rgba(23, 43, 77, 0.10);
}


/* =========================================================
   TOP ROW
========================================================= */

.ctj-job-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}


/* =========================================================
   JOB ICON
========================================================= */

.ctj-job-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #fff4e6;
    color: #ff9418;

    font-size: 18px;
}

.ctj-job-icon i {
    line-height: 1;
}


/* =========================================================
   APPROVED BADGE
========================================================= */

.ctj-job-card .ctj-badge {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 11px;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ctj-job-card .ctj-publish {
    background: #dcfce9;
    color: #16834b;
}


/* =========================================================
   JOB TITLE
========================================================= */

.ctj-job-title {
    margin: 0 0 12px;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;

    color: #172b4d;
}

.ctj-job-title a {
    color: inherit;
    text-decoration: none;

    transition: color 0.2s ease;
}

.ctj-job-title a:hover {
    color: #ff9418;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ctj-job-description {
    margin: 0 0 20px;

    min-height: 72px;

    color: #66758a;

    font-size: 14px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   META
========================================================= */

.ctj-job-meta {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-bottom: 20px;
}


/* Meta row */

.ctj-job-meta-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);

    align-items: start;

    gap: 8px;
}


/* Meta icon */

.ctj-meta-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ff5f6d;

    font-size: 13px;
}


/* Meta content */

.ctj-job-meta-row > div {
    min-width: 0;
}


/* Label */

.ctj-meta-label {
    display: block;

    margin-bottom: 2px;

    color: #65758b;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* Value */

.ctj-meta-value {
    display: block;

    color: #344563;

    font-size: 13px;
    line-height: 1.4;

    word-break: break-word;
}


/* =========================================================
   VIEW REQUIREMENT BUTTON
========================================================= */

.ctj-job-view-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 30px;

    margin-top: auto;

    padding: 0 12px;

    box-sizing: border-box;

    border-radius: 7px;

    background: linear-gradient(
        90deg,
        #ff5f6d,
        #ffb000
    );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Arrow */

.ctj-job-view-button i {
    font-size: 13px;

    transition: transform 0.2s ease;
}


/* Hover */

.ctj-job-view-button:hover {
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(255, 159, 28, 0.25);
}

.ctj-job-view-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   NO JOBS
========================================================= */

.ctj-no-jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;

    text-align: center;
}

.ctj-no-jobs-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background: #fff4e6;
    color: #ff9418;

    font-size: 20px;
}

.ctj-no-jobs p {
    max-width: 600px;
    margin: 0;

    color: #65758b;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   PAGINATION
========================================================= */

.ctj-pagination {
    display: flex;
    justify-content: center;

    margin-top: 30px;
}

.ctj-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    margin: 0 4px;

    padding: 0 10px;

    border: 1px solid #dce3e9;
    border-radius: 7px;

    background: #ffffff;

    color: #344563;

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

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.ctj-pagination .page-numbers:hover,
.ctj-pagination .page-numbers.current {
    border-color: #ff9418;

    background: linear-gradient(
        90deg,
        #ff5f6d,
        #ffb000
    );

    color: #ffffff;
}


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

@media (max-width: 1000px) {

    .ctj-job-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .ctj-job-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ctj-job-card {
        min-height: auto;
        padding: 22px;
    }

    .ctj-job-title {
        font-size: 19px;
    }

}

.post--single .post__text p{
        background: #fff;
    border: 1px solid var(--ctj-border);
    border-radius: 12px;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: 0 6px 24px rgba(23, 60, 53, .07);
    margin: 1.25rem 0;
}

/* =========================================
   Custom Theme Radio
========================================= */

.ctj-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #cbd5df;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.ctj-form input[type="radio"]:checked {
    border-color: #ff8f1f;
    background: #ff8f1f;
}

.ctj-form input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
}


/* =========================================
   Custom Theme Checkbox
========================================= */

.ctj-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    margin: 0;
    margin-right:4px;
    border: 2px solid #cbd5df;
    border-radius: 4px;

    background: #fff;

    cursor: pointer;

    position: relative;

    flex-shrink: 0;
}


/* Checked checkbox */

.ctj-form input[type="checkbox"]:checked {
    border-color: #ff8f1f;
    background: #ff8f1f;
}


/* White checkmark */

.ctj-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 11px;
    left: 5px;
    top: 0px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Hover */

.ctj-form input[type="checkbox"]:hover {
    border-color: #ff8f1f;
}

.ctj-form input[type="radio"]:hover {
    border-color: #ff8f1f;
}


/* Keyboard focus */

.ctj-form input[type="checkbox"]:focus-visible,
.ctj-form input[type="radio"]:focus-visible {
    outline: 2px solid rgba(255, 143, 31, 0.3);
    outline-offset: 2px;
}
#ctj-skill-areas .ctj-form label, .ctj-form.job-skills label{
    display:inline-flex;
}
#ctj-reviews .ctj-grid-2{
    gap: 15px;
}
#ctj-payment-settings .ctj-grid-2, #ctj-invoice-settings .ctj-grid-2{
column-gap: 15px;
    row-gap: 2px;
}

.criterion-btn{
   display: inline-flex;
}
.ml-2{
    margin-left:15px;
}
/* =========================================================
   PAYMENT PLANS - IMPROVED UI
   ========================================================= */

.ctj-form[data-payment-plans],
.ctj-card:has([data-ctj-plan-table]) {
    background: #ffffff;
    border: 1px solid var(--ctj-border);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(23, 60, 53, 0.08);
}

/* Payment Plans heading */
.ctj-card:has([data-ctj-plan-table]) > h2 {
    margin: 0 0 8px;
    color: var(--ctj-dark);
    font-size: 24px;
    font-weight: 800;
}

/* Description */
.ctj-card:has([data-ctj-plan-table]) > p {
    color: #607773;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 20px;
}


/* =========================================================
   TABLE
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) .ctj-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ctj-border);
    border-radius: 12px;
    background: #fff;
}

.ctj-card:has([data-ctj-plan-table]) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 950px;
}


/* Table header */
.ctj-card:has([data-ctj-plan-table]) thead th {
    background: #f5faf8;
    color: #304844;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 7px 10px;
    border-bottom: 2px solid var(--ctj-border);
    white-space: nowrap;
}


/* Header icons */
.ctj-card:has([data-ctj-plan-table]) thead th:nth-child(1)::before {
    content: "\f0b1";
}

.ctj-card:has([data-ctj-plan-table]) thead th:nth-child(2)::before {
    content: "\f2bd";
}

.ctj-card:has([data-ctj-plan-table]) thead th:nth-child(3)::before {
    content: "\f155";
}

.ctj-card:has([data-ctj-plan-table]) thead th:nth-child(4)::before {
    content: "\f51e";
}

.ctj-card:has([data-ctj-plan-table]) thead th:nth-child(5)::before {
    content: "\f205";
}

.ctj-card:has([data-ctj-plan-table]) thead th::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ff5b6f;
    margin-right: 7px;
}


/* =========================================================
   PLAN ROW
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) tbody tr {
    transition: background .2s ease;
}

.ctj-card:has([data-ctj-plan-table]) tbody tr:hover {
    background: #fbfefd;
}

.ctj-card:has([data-ctj-plan-table]) tbody td {
    padding: 7px 10px;
    vertical-align: top;
    border-bottom: 1px solid #e5eeeb;
}

.ctj-card:has([data-ctj-plan-table]) tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   LABELS
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) tbody td label {
    display: block;
    color: #344b47;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}

.ctj-card:has([data-ctj-plan-table]) tbody td label:last-child {
    margin-bottom: 0;
}


/* =========================================================
   INPUTS
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) input[type="text"],
.ctj-card:has([data-ctj-plan-table]) input[type="number"],
.ctj-card:has([data-ctj-plan-table]) textarea,
.ctj-card:has([data-ctj-plan-table]) select {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0px;
    padding: 7px 11px;
    border: 1px solid #b9cbc7;
    border-radius: 8px;
    background: #fff;
    color: #263c38;
    font-size: 12px;
    font-weight: 400;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* Textarea */
.ctj-card:has([data-ctj-plan-table]) textarea {
    min-height: 72px;
    resize: vertical;
    line-height: 1.45;
}


/* Focus */
.ctj-card:has([data-ctj-plan-table]) input:focus,
.ctj-card:has([data-ctj-plan-table]) textarea:focus,
.ctj-card:has([data-ctj-plan-table]) select:focus {
    border-color: #ff9f1c;
    box-shadow: 0 0 0 3px rgba(255, 159, 28, .12);
}


/* Disabled fields */
.ctj-card:has([data-ctj-plan-table]) .ctj-field-disabled {
    opacity: .45;
}

.ctj-card:has([data-ctj-plan-table]) .ctj-field-disabled input {
    background: #f4f7f6;
    cursor: not-allowed;
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) th:nth-child(1),
.ctj-card:has([data-ctj-plan-table]) td:nth-child(1) {
    width: 22%;
}

.ctj-card:has([data-ctj-plan-table]) th:nth-child(2),
.ctj-card:has([data-ctj-plan-table]) td:nth-child(2) {
    width: 18%;
}

.ctj-card:has([data-ctj-plan-table]) th:nth-child(3),
.ctj-card:has([data-ctj-plan-table]) td:nth-child(3) {
    width: 16%;
}

.ctj-card:has([data-ctj-plan-table]) th:nth-child(4),
.ctj-card:has([data-ctj-plan-table]) td:nth-child(4) {
    width: 25%;
}

.ctj-card:has([data-ctj-plan-table]) th:nth-child(5),
.ctj-card:has([data-ctj-plan-table]) td:nth-child(5) {
    width: 19%;
}


/* =========================================================
   PRICE SECTION
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) td:nth-child(3) input {
    font-weight: 600;
}

.ctj-card:has([data-ctj-plan-table]) td:nth-child(3) input + input {
    margin-top: 8px;
    font-weight: 500;
    text-transform: uppercase;
}


/* =========================================================
   AUDIENCE / BILLING
   ========================================================= */

.ctj-card:has([data-ctj-plan-table]) td:nth-child(2) select + select {
    margin-top: 8px;
}


/* Save button */
.ctj-card:has([data-ctj-plan-table]) > p:last-child {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ctj-border);
}

.ctj-card:has([data-ctj-plan-table]) > p:last-child .ctj-button {
    min-height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--ctj);
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(255, 91, 111, .15);
    transition: all .2s ease;
}

.ctj-card:has([data-ctj-plan-table]) > p:last-child .ctj-button:hover {
    transform: translateY(-1px);
    filter: brightness(.95);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .ctj-card:has([data-ctj-plan-table]) {
        padding: 18px;
    }

    .ctj-card:has([data-ctj-plan-table]) .ctj-table-wrap {
        border: 0;
        overflow: visible;
    }

    .ctj-card:has([data-ctj-plan-table]) table {
        min-width: 0;
    }

    .ctj-card:has([data-ctj-plan-table]) thead {
        display: none;
    }

    .ctj-card:has([data-ctj-plan-table]) tbody,
    .ctj-card:has([data-ctj-plan-table]) tr,
    .ctj-card:has([data-ctj-plan-table]) td {
        display: block;
        width: auto !important;
    }

    .ctj-card:has([data-ctj-plan-table]) tbody tr {
        margin-bottom: 18px;
        padding: 15px;
        border: 1px solid var(--ctj-border);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(23, 60, 53, .06);
    }

    .ctj-card:has([data-ctj-plan-table]) tbody tr:last-child {
        margin-bottom: 0;
    }

    .ctj-card:has([data-ctj-plan-table]) tbody td {
        padding: 12px 0;
        border-bottom: 1px solid #edf2f0;
    }

    .ctj-card:has([data-ctj-plan-table]) tbody td:last-child {
        border-bottom: 0;
    }
}


/* Small mobile */
@media (max-width: 520px) {

    .ctj-card:has([data-ctj-plan-table]) {
        padding: 15px;
    }

    .ctj-card:has([data-ctj-plan-table]) > h2 {
        font-size: 16px;
    }

    .ctj-card:has([data-ctj-plan-table]) > p {
        font-size: 12px;
    }
}