/* DeniJobs visual system */
:root{
 --dj-bg:#f5f8f7;--dj-card:#fff;--dj-text:#14231d;--dj-muted:#64746d;
 --dj-primary:#13a765;--dj-primary-2:#087f4b;--dj-accent:#e73b3b;
 --dj-border:#dfe8e3;--dj-shadow:0 18px 50px rgba(16,54,39,.10);
 --dj-radius:22px;--dj-header:rgba(255,255,255,.90);
}
html{scroll-behavior:smooth}
body.denijobs-site{margin:0;background:var(--dj-bg);color:var(--dj-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
body.dj-dark{--dj-bg:#09130f;--dj-card:#102019;--dj-text:#eef8f2;--dj-muted:#a8bbb1;--dj-border:#22372d;--dj-header:rgba(9,19,15,.92);--dj-shadow:0 18px 50px rgba(0,0,0,.35)}
a{color:inherit}
.dj-header{position:sticky;top:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--dj-header);backdrop-filter:blur(16px);border-bottom:1px solid var(--dj-border)}
.dj-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.dj-logo{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--dj-primary),var(--dj-primary-2));color:#fff;font-weight:900;box-shadow:0 8px 22px rgba(19,167,101,.22)}
.dj-brand-copy{display:flex;flex-direction:column;line-height:1.1}
.dj-brand-copy strong{font-size:17px;letter-spacing:-.5px;animation:djPulse 3s ease-in-out infinite}
.dj-brand-copy small{font-size:9px;color:var(--dj-muted);margin-top:3px}
@keyframes djPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px);text-shadow:0 5px 16px rgba(19,167,101,.25)}}
.dj-header-actions{display:flex;gap:5px}
.dj-icon-btn{width:39px;height:39px;border:0;background:transparent;border-radius:13px;display:grid;place-items:center;text-decoration:none;font-size:18px;cursor:pointer;color:var(--dj-text)}
.dj-icon-btn:hover{background:var(--dj-bg)}
.dj-menu{position:fixed;right:0;top:0;bottom:0;width:min(310px,86vw);background:var(--dj-card);z-index:1002;padding:20px;transform:translateX(105%);transition:transform .3s ease;box-shadow:-20px 0 60px rgba(0,0,0,.16)}
.dj-menu.open{transform:translateX(0)}
.dj-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:20px}
.dj-menu>a{display:block;padding:15px 8px;border-bottom:1px solid var(--dj-border);text-decoration:none;font-weight:700}
.dj-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1001;opacity:0;pointer-events:none;transition:.25s}
.dj-overlay.open{opacity:1;pointer-events:auto}
.dj-page{max-width:1160px;margin:auto}
.dj-hero{min-height:650px;margin:14px 14px 0;border-radius:28px;overflow:hidden;position:relative;background:#12392a}
.dj-hero-bg{position:absolute;inset:0;background:linear-gradient(120deg,rgba(4,31,20,.95),rgba(4,31,20,.50)),radial-gradient(circle at 80% 20%,#2f9e68,transparent 38%),linear-gradient(145deg,#0b3020,#1e6043)}
.dj-hero:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-130px;bottom:-130px;background:rgba(255,255,255,.07);box-shadow:0 0 0 70px rgba(255,255,255,.035)}
.dj-hero-content{position:relative;z-index:1;padding:72px 28px 34px;color:#fff;max-width:750px}
.dj-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.10);border-radius:999px;padding:8px 13px;font-size:11px;font-weight:800;letter-spacing:.4px}
.dj-hero h1{font-size:clamp(42px,8vw,76px);line-height:.98;letter-spacing:-3px;margin:22px 0 20px;max-width:750px}
.dj-hero h1 span{color:#45d58d}
.dj-hero p{font-size:17px;max-width:600px;color:rgba(255,255,255,.78)}
.dj-btn{border:0;border-radius:13px;padding:12px 17px;font-weight:800;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:.2s;box-sizing:border-box}
.dj-btn:hover{transform:translateY(-1px)}
.dj-btn-primary{background:var(--dj-primary);color:#fff;box-shadow:0 10px 25px rgba(19,167,101,.22)}
.dj-btn-small{padding:9px 12px;font-size:12px;background:var(--dj-bg);color:var(--dj-text)}
.dj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:45px;max-width:650px}
.dj-stats div{padding:13px 8px;border-top:1px solid rgba(255,255,255,.18)}
.dj-stats strong,.dj-stats small{display:block}.dj-stats strong{font-size:24px}.dj-stats small{font-size:10px;color:rgba(255,255,255,.65)}
.dj-section{padding:65px 16px}
.dj-section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.dj-kicker{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--dj-primary)}
.dj-section h1,.dj-section h2{margin:5px 0 7px;letter-spacing:-1.5px;line-height:1.1}
.dj-section h2{font-size:36px}.dj-section-heading p{margin:0;color:var(--dj-muted)}
.dj-search-wrap input{width:min(320px,70vw);border:1px solid var(--dj-border);background:var(--dj-card);color:var(--dj-text);padding:13px 15px;border-radius:14px;outline:none}
.dj-jobs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.dj-job-card{background:var(--dj-card);border:1px solid var(--dj-border);border-radius:22px;overflow:hidden;box-shadow:var(--dj-shadow)}
.dj-featured-job{grid-column:1/-1}
.dj-job-image{height:190px;background:linear-gradient(135deg,#1a6b4a,#0b3020);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative}
.dj-featured-job .dj-job-image{height:330px}
.dj-job-image>span:not(.dj-job-badge){font-size:60px;font-weight:900;color:rgba(255,255,255,.5)}
.dj-job-badge{position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;font-weight:800;backdrop-filter:blur(8px)}
.dj-job-body{padding:18px}
.dj-job-body h3{margin:0 0 7px;font-size:22px;letter-spacing:-.6px}
.dj-job-description{font-size:13px;color:var(--dj-muted);min-height:42px}
.dj-job-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--dj-border);border-bottom:1px solid var(--dj-border);padding:13px 0;margin:15px 0}
.dj-job-meta small,.dj-job-meta strong{display:block}.dj-job-meta small{font-size:9px;color:var(--dj-muted);text-transform:uppercase;letter-spacing:.6px}.dj-job-meta strong{font-size:14px;margin-top:3px}
.dj-job-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.dj-job-bottom>span{font-size:11px;color:var(--dj-muted);font-weight:700}
.dj-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 16px 60px}
.dj-info-grid article,.dj-next-box,.dj-notification,.dj-admin-card,.dj-success-card,.dj-apply-step{background:var(--dj-card);border:1px solid var(--dj-border);border-radius:22px;padding:24px;box-shadow:var(--dj-shadow)}
.dj-info-grid span{color:var(--dj-primary);font-weight:900}.dj-info-grid h3{margin:15px 0 5px}.dj-info-grid p{color:var(--dj-muted);font-size:13px}
.dj-faq details{background:var(--dj-card);border:1px solid var(--dj-border);border-radius:14px;margin:10px 0;padding:17px}.dj-faq summary{cursor:pointer;font-weight:800}.dj-faq details p{color:var(--dj-muted);font-size:13px}
.dj-contact{padding-top:10px}
.dj-footer{margin-top:30px;padding:28px 16px;background:var(--dj-card);border-top:1px solid var(--dj-border);text-align:center;color:var(--dj-muted)}
.dj-footer-brand{display:flex;justify-content:center;align-items:center;gap:10px;color:var(--dj-text)}.dj-footer-brand div{display:flex;flex-direction:column;text-align:left}.dj-footer-brand small{font-size:9px}.dj-footer p{font-size:12px}.dj-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:15px 0;font-size:11px}.dj-footer a{text-decoration:none}
.dj-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:1100;display:none;align-items:center;justify-content:center;padding:15px}.dj-modal.open{display:flex}
.dj-modal-card{width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--dj-card);border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.3);position:relative}
.dj-modal-top{padding:25px;background:linear-gradient(135deg,#12a763,#087b49);color:#fff;border-radius:26px 26px 0 0}.dj-modal-top .dj-pill{background:rgba(255,255,255,.12)}.dj-modal-top h2{margin:13px 0 4px}.dj-modal-top p{font-size:12px;color:rgba(255,255,255,.8)}
.dj-modal-close{position:absolute;right:14px;top:14px;width:35px;height:35px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:23px;z-index:2;cursor:pointer}
#dj-registration-form{padding:22px;display:grid;gap:14px}#dj-registration-form label,.dj-admin-form label{font-size:11px;font-weight:800;color:var(--dj-text);display:grid;gap:6px}
#dj-registration-form input,#dj-registration-form select,.dj-admin-form input,.dj-admin-form textarea,.dj-admin-login input{border:1px solid var(--dj-border);background:var(--dj-bg);color:var(--dj-text);border-radius:12px;padding:13px;outline:none;font:inherit}
.dj-form-message{font-size:12px;color:var(--dj-accent)}
.dj-simple-page{min-height:65vh}.dj-success-card,.dj-apply-step{margin:50px 16px;max-width:760px;margin-left:auto;margin-right:auto}.dj-success-icon{width:65px;height:65px;border-radius:50%;background:#dff8eb;color:#087b49;display:grid;place-items:center;font-size:35px;font-weight:900;margin-bottom:20px}.dj-next-box{margin:22px 0}
.dj-application-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:25px 0}.dj-application-summary div{padding:16px;border:1px solid var(--dj-border);border-radius:15px;background:var(--dj-bg)}.dj-application-summary small,.dj-application-summary strong{display:block}.dj-application-summary small{font-size:9px;color:var(--dj-muted)}.dj-application-summary strong{margin-top:4px}.dj-payment-box{padding:22px;border:1px solid var(--dj-border);border-radius:20px;background:var(--dj-bg)}.dj-small-note{font-size:11px;color:var(--dj-muted)}
.dj-notifications{display:grid;gap:12px;margin-top:25px}.dj-notification{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:start}.dj-notification h3{margin:0}.dj-notification small{color:var(--dj-muted);font-size:9px}.dj-notification p{font-size:12px;color:var(--dj-muted)}.dj-notification-icon{font-size:22px}.dj-clear-notification{border:0;background:none;color:var(--dj-accent);font-size:10px;cursor:pointer}
.dj-empty{padding:30px;text-align:center;background:var(--dj-card);border:1px dashed var(--dj-border);border-radius:18px;color:var(--dj-muted)}
.dj-admin-page{padding:35px 16px}.dj-admin-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.dj-admin-card{margin:18px 0}.dj-admin-form{display:grid;gap:14px}.dj-admin-preview{max-width:220px;border-radius:15px}.dj-admin-jobs{display:grid;gap:10px}.dj-admin-jobs article{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border:1px solid var(--dj-border);border-radius:15px}.dj-admin-jobs small{display:block;color:var(--dj-muted);font-size:10px}.dj-admin-actions{display:flex;gap:6px}.dj-danger{color:var(--dj-accent)}.dj-admin-notice{margin:15px 16px;padding:12px;border-radius:12px;background:#dff8eb;color:#087b49;font-weight:700}.dj-admin-login{max-width:500px;margin:80px auto;padding:30px 16px;text-align:center}.dj-admin-login form{display:grid;gap:12px;margin-top:20px}

@media(max-width:700px){
 .dj-section{padding:48px 14px}.dj-section-heading{display:block}.dj-search-wrap{margin-top:18px}.dj-search-wrap input{width:100%;box-sizing:border-box}
 .dj-jobs-grid{grid-template-columns:1fr}.dj-featured-job{grid-column:auto}.dj-featured-job .dj-job-image{height:230px}.dj-info-grid{grid-template-columns:1fr;padding:0 14px 40px}.dj-hero{min-height:610px}.dj-hero-content{padding:55px 22px 28px}.dj-hero h1{font-size:48px;letter-spacing:-2px}.dj-stats strong{font-size:20px}.dj-job-bottom{align-items:stretch;flex-direction:column}.dj-btn-small{width:100%}.dj-application-summary{grid-template-columns:1fr}.dj-notification{grid-template-columns:auto 1fr}.dj-clear-notification{grid-column:2;text-align:left}.dj-admin-top{align-items:flex-start}.dj-admin-jobs article{align-items:flex-start;flex-direction:column}.dj-admin-actions{width:100%}.dj-admin-actions .dj-btn{flex:1}
}

/* =========================================================
   DENIJOBS — UNIFIED GREEN BUTTON SYSTEM
   Makes buttons consistent across Home, Jobs, Admin,
   Application, Payment and Success pages.
   ========================================================= */

/* Main DeniJobs buttons */
body.denijobs-site .dj-btn,
body.denijobs-site a.dj-btn,
body.denijobs-site button.dj-btn,
body.denijobs-site input.dj-btn {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    background-color: #13a765 !important;
    color: #ffffff !important;
    border: 1px solid #13a765 !important;
    border-radius: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(19, 167, 101, 0.20) !important;
    transition: all 0.2s ease !important;
}

/* Hover */
body.denijobs-site .dj-btn:hover,
body.denijobs-site a.dj-btn:hover,
body.denijobs-site button.dj-btn:hover,
body.denijobs-site input.dj-btn:hover {
    background: linear-gradient(135deg, #087f4b, #06683d) !important;
    background-color: #087f4b !important;
    color: #ffffff !important;
    border-color: #087f4b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(19, 167, 101, 0.28) !important;
}

/* Small buttons — Edit, Lock Panel, etc. */
body.denijobs-site .dj-btn-small {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    color: #ffffff !important;
    border: 1px solid #13a765 !important;
    border-radius: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(19, 167, 101, 0.18) !important;
}

/* Small button hover */
body.denijobs-site .dj-btn-small:hover {
    background: linear-gradient(135deg, #087f4b, #06683d) !important;
    color: #ffffff !important;
    border-color: #087f4b !important;
}

/* =========================================================
   JOB APPLICATION BUTTONS
   ========================================================= */

body.denijobs-site .dj-job-card .dj-apply-trigger {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    color: #ffffff !important;
    border: 1px solid #13a765 !important;
    border-radius: 12px !important;
    padding: 11px 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 7px 18px rgba(19, 167, 101, 0.20) !important;
}

body.denijobs-site .dj-job-card .dj-apply-trigger:hover {
    background: linear-gradient(135deg, #087f4b, #06683d) !important;
    color: #ffffff !important;
    border-color: #087f4b !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   APPLICATION MODAL BUTTON
   ========================================================= */

body.denijobs-site #dj-registration-form button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    color: #ffffff !important;
    border: 1px solid #13a765 !important;
    border-radius: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(19, 167, 101, 0.20) !important;
}

body.denijobs-site #dj-registration-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #087f4b, #06683d) !important;
    color: #ffffff !important;
    border-color: #087f4b !important;
}

/* =========================================================
   APPLICATION / PAYMENT PAGE
   PayHero plugin buttons
   ========================================================= */

body.denijobs-site .dj-payment-box button,
body.denijobs-site .dj-payment-box input[type="submit"],
body.denijobs-site .dj-payment-box input[type="button"],
body.denijobs-site .dj-payment-box .button,
body.denijobs-site .dj-payment-box a.button {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    background-color: #13a765 !important;
    color: #ffffff !important;
    border: 1px solid #13a765 !important;
    border-radius: 13px !important;
    min-height: 46px !important;
    padding: 11px 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(19, 167, 101, 0.20) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
}

body.denijobs-site .dj-payment-box button:hover,
body.denijobs-site .dj-payment-box input[type="submit"]:hover,
body.denijobs-site .dj-payment-box input[type="button"]:hover,
body.denijobs-site .dj-payment-box .button:hover,
body.denijobs-site .dj-payment-box a.button:hover {
    background: linear-gradient(135deg, #087f4b, #06683d) !important;
    color: #ffffff !important;
    border-color: #087f4b !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   ADMIN PANEL BUTTONS
   ========================================================= */

body.denijobs-site .dj-admin-page .dj-btn,
body.denijobs-site .dj-admin-page button,
body.denijobs-site .dj-admin-page input[type="submit"] {
    font-family: inherit !important;
}

/* Admin Edit / Lock / Publish */
body.denijobs-site .dj-admin-page .dj-btn:not(.dj-danger) {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    color: #ffffff !important;
    border-color: #13a765 !important;
}

/* =========================================================
   DELETE BUTTON
   Keep delete visually different for safety.
   ========================================================= */

body.denijobs-site .dj-admin-page .dj-danger {
    background: #fff !important;
    color: #d63638 !important;
    border: 1px solid #d63638 !important;
    box-shadow: none !important;
}

body.denijobs-site .dj-admin-page .dj-danger:hover {
    background: #d63638 !important;
    color: #ffffff !important;
    border-color: #d63638 !important;
}

/* =========================================================
   SUCCESS PAGE
   ========================================================= */

body.denijobs-site .dj-success-card .dj-btn {
    background: linear-gradient(135deg, #13a765, #087f4b) !important;
    color: #ffffff !important;
    border-color: #13a765 !important;
}

/* =========================================================
   MOBILE BUTTON LAYOUT
   ========================================================= */

@media (max-width: 700px) {

    body.denijobs-site .dj-job-card .dj-apply-trigger {
        width: 100% !important;
        min-height: 46px !important;
    }

    body.denijobs-site .dj-admin-actions {
        display: flex !important;
        gap: 8px !important;
    }

    body.denijobs-site .dj-admin-actions .dj-btn {
        flex: 1 !important;
        text-align: center !important;
    }

    body.denijobs-site .dj-payment-box button,
    body.denijobs-site .dj-payment-box input[type="submit"] {
        width: 100% !important;
    }
}


/* =========================================================
   DeniJobs — Step 2 application modal
   ========================================================= */
.dj-application-step-two{
  padding:20px 22px 22px;
  animation:djStepIn .22s ease;
}
.dj-application-job-heading{
  margin-bottom:16px;
}
.dj-application-job-heading h3{
  margin:4px 0 2px;
  font-size:24px;
  letter-spacing:-.6px;
  color:var(--dj-text);
}
.dj-application-job-heading small{
  color:var(--dj-muted);
  font-size:10px;
}
.dj-application-step-two .dj-application-summary{
  margin:0 0 18px;
}
.dj-application-step-two .dj-payment-box{
  background:var(--dj-bg);
}
.dj-application-step-two .dj-payment-box h3{
  margin:0 0 5px;
}
.dj-application-step-two .dj-payment-box p{
  color:var(--dj-muted);
  font-size:12px;
  margin-top:0;
}
.dj-back-step{
  margin-top:13px;
  width:100%;
  min-height:44px;
  border:1px solid var(--dj-primary) !important;
  background:transparent !important;
  color:var(--dj-primary) !important;
  border-radius:13px !important;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
}
.dj-back-step:hover{
  background:var(--dj-primary) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.dj-modal-close-wrap{
  position:absolute;
  inset:0 0 auto 0;
  height:0;
  z-index:5;
}
.dj-modal-close-wrap .dj-modal-close{
  top:14px;
}
@keyframes djStepIn{
  from{opacity:0;transform:translateX(10px)}
  to{opacity:1;transform:translateX(0)}
}
@media(max-width:600px){
  .dj-application-step-two{
    padding:18px 16px 18px;
  }
  .dj-application-job-heading h3{
    font-size:21px;
  }
}

/* =========================================================
   DENIJOBS — SEARCH NO RESULTS
   ========================================================= */

.dj-search-no-results {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    padding: 42px 24px;
    text-align: center;
    background: var(--dj-card);
    border: 1px solid var(--dj-border);
    border-radius: 22px;
    box-shadow: var(--dj-shadow);
    animation: djSearchMessageIn .22s ease;
}

.dj-search-no-results-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(19, 167, 101, .10);
    color: var(--dj-primary);
    font-size: 30px;
    font-weight: 900;
}

.dj-search-no-results h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--dj-text);
}

.dj-search-no-results p {
    margin: 0 auto 8px;
    max-width: 500px;
    color: var(--dj-muted);
    font-size: 14px;
    line-height: 1.6;
}

.dj-search-no-results p strong {
    color: var(--dj-text);
}

.dj-search-no-results small {
    display: block;
    color: var(--dj-muted);
    font-size: 12px;
    line-height: 1.6;
}

.dj-clear-search {
    margin-top: 20px;
    border: 0;
    border-radius: 12px;
    padding: 11px 18px;
    background: var(--dj-primary);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.dj-clear-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(19, 167, 101, .22);
}

@keyframes djSearchMessageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No jobs currently posted */

.dj-no-jobs {
    grid-column: 1 / -1;
    padding: 42px 24px;
}

.dj-empty-icon {
    font-size: 42px;
    margin-bottom: 12px;
}

.dj-no-jobs h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--dj-text);
}

.dj-no-jobs p {
    max-width: 500px;
    margin: 0 auto;
    color: var(--dj-muted);
    line-height: 1.6;
}

/* =========================================================
   DENIJOBS — MOBILE MENU / OFF-CANVAS THEME
   Replaces Hello Elementor default menu appearance
   ========================================================= */

/* Menu panel */
#dj-menu,
.dj-menu,
.elementor-nav-menu--dropdown,
.elementor-menu-toggle + .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu--dropdown {
    background: var(--dj-card, #ffffff) !important;
    color: var(--dj-text, #10251c) !important;
    border: 0 !important;
    box-shadow: -12px 0 35px rgba(0, 0, 0, .12) !important;
}

/* Menu heading / logo area */
#dj-menu .dj-menu-header,
.dj-menu .dj-menu-header {
    background: transparent !important;
    color: var(--dj-text, #10251c) !important;
}

/* DeniJobs menu title */
#dj-menu .dj-menu-title,
.dj-menu .dj-menu-title {
    color: var(--dj-text, #10251c) !important;
    font-weight: 800 !important;
}

/* ALL menu links */
#dj-menu a,
.dj-menu a,
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown .elementor-item {
    color: var(--dj-text, #10251c) !important;
    background: transparent !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Remove Hello Elementor pink/red hover/focus colors */
#dj-menu a:hover,
#dj-menu a:focus,
#dj-menu a:active,
.dj-menu a:hover,
.dj-menu a:focus,
.dj-menu a:active,
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu--dropdown a:active {
    color: var(--dj-primary, #13a765) !important;
    background: rgba(19, 167, 101, .07) !important;
}

/* Menu list */
#dj-menu ul,
.dj-menu ul,
.elementor-nav-menu--dropdown ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu items */
#dj-menu li,
.dj-menu li,
.elementor-nav-menu--dropdown li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Separators between menu items */
#dj-menu li + li,
.dj-menu li + li,
.elementor-nav-menu--dropdown li + li {
    border-top: 1px solid var(--dj-border, #e2ebe6) !important;
}

/* Menu item spacing */
#dj-menu li a,
.dj-menu li a,
.elementor-nav-menu--dropdown li a,
.elementor-nav-menu--dropdown .elementor-item {
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* Active menu item */
#dj-menu li.current-menu-item > a,
#dj-menu a.active,
.dj-menu li.current-menu-item > a,
.elementor-nav-menu--dropdown li.current-menu-item > a {
    color: var(--dj-primary, #13a765) !important;
    background: rgba(19, 167, 101, .08) !important;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#dj-menu-close,
.dj-menu-close,
.elementor-menu-toggle,
.elementor-menu-toggle.elementor-active {
    background: #ffffff !important;
    color: var(--dj-primary, #13a765) !important;
    border: 1px solid var(--dj-border, #dce8e2) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .06) !important;
}

/* Close button hover */
#dj-menu-close:hover,
#dj-menu-close:focus,
.dj-menu-close:hover,
.dj-menu-close:focus,
.elementor-menu-toggle:hover,
.elementor-menu-toggle:focus {
    background: var(--dj-primary, #13a765) !important;
    color: #ffffff !important;
    border-color: var(--dj-primary, #13a765) !important;
}

/* Close icon */
#dj-menu-close svg,
#dj-menu-close i,
.dj-menu-close svg,
.dj-menu-close i,
.elementor-menu-toggle svg,
.elementor-menu-toggle i {
    color: currentColor !important;
    fill: currentColor !important;
}

/* =========================================================
   MENU OVERLAY
   ========================================================= */

.elementor-nav-menu__container,
.dialog-widget-content,
.dialog-lightbox-widget-content {
    --e-global-color-accent: var(--dj-primary, #13a765);
}

/* Dark overlay behind menu */
.elementor-menu-overlay,
.dialog-widget.dialog-type-lightbox,
.elementor-nav-menu--dropdown {
    --overlay-opacity: .45;
}

/* =========================================================
   MENU BRAND / TOP AREA
   ========================================================= */

#dj-menu .dj-menu-brand,
.dj-menu .dj-menu-brand {
    color: var(--dj-text, #10251c) !important;
}

#dj-menu .dj-menu-brand strong,
.dj-menu .dj-menu-brand strong {
    color: var(--dj-primary, #13a765) !important;
}

/* =========================================================
   MOBILE MENU RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    #dj-menu,
    .dj-menu,
    .elementor-nav-menu--dropdown {
        width: min(88vw, 380px) !important;
        max-width: 380px !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
    }

    #dj-menu li a,
    .dj-menu li a,
    .elementor-nav-menu--dropdown li a,
    .elementor-nav-menu--dropdown .elementor-item {
        min-height: 64px !important;
        padding: 0 22px !important;
        font-size: 17px !important;
    }

}

/* =========================================================
   REMOVE HELLO ELEMENTOR PINK / RED LINK COLORS
   ONLY INSIDE THE MOBILE MENU
   ========================================================= */

@media (max-width: 767px) {

    #dj-menu a,
    .dj-menu a,
    .elementor-nav-menu--dropdown a,
    .elementor-nav-menu--dropdown .elementor-item {
        --e-global-color-primary: var(--dj-text, #10251c) !important;
        --e-global-color-secondary: var(--dj-primary, #13a765) !important;
        --e-global-color-accent: var(--dj-primary, #13a765) !important;
    }

}

/* =========================================================
   DENIJOBS MENU — POLISHED PANEL
   ========================================================= */

@media (max-width: 767px) {

    .elementor-nav-menu--dropdown {
        padding: 18px 0 30px !important;
        overflow-y: auto !important;
    }

    .elementor-nav-menu--dropdown .elementor-item {
        border-radius: 0 !important;
        transition:
            background .18s ease,
            color .18s ease,
            padding-left .18s ease !important;
    }

    .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-nav-menu--dropdown .elementor-item:focus {
        padding-left: 28px !important;
    }

}

/* =========================================================
   DENIJOBS HEADER + FOOTER BRAND OVERRIDE
   IMPORTANT: HEADER AND FOOTER ONLY
   ========================================================= */

/* ---------- HEADER ---------- */

.dj-header,
.dj-site-header,
header {
    --e-global-color-primary: var(--dj-primary, #13a765);
    --e-global-color-secondary: var(--dj-text, #10251c);
    --e-global-color-accent: var(--dj-primary, #13a765);
}

/* DeniJobs brand name */
.dj-header .dj-brand,
.dj-header .dj-brand-name,
.dj-site-header .dj-brand,
.dj-site-header .dj-brand-name,
header .dj-brand,
header .dj-brand-name {
    color: var(--dj-primary, #13a765) !important;
}

/* Header tagline */
.dj-header .dj-tagline,
.dj-site-header .dj-tagline,
header .dj-tagline {
    color: var(--dj-muted, #60706a) !important;
}

/* Header buttons */
.dj-header button,
.dj-site-header button,
header button {
    color: var(--dj-primary, #13a765) !important;
    border-color: var(--dj-primary, #13a765) !important;
}

/* Header button hover */
.dj-header button:hover,
.dj-header button:focus,
.dj-site-header button:hover,
.dj-site-header button:focus,
header button:hover,
header button:focus {
    background: var(--dj-primary, #13a765) !important;
    color: #fff !important;
    border-color: var(--dj-primary, #13a765) !important;
}

/* Header icons */
.dj-header svg,
.dj-header i,
.dj-site-header svg,
.dj-site-header i,
header svg,
header i {
    color: currentColor !important;
    fill: currentColor !important;
}

/* ---------- HEADER LINKS ---------- */

.dj-header a,
.dj-site-header a,
header a {
    text-decoration: none;
}

.dj-header a:hover,
.dj-header a:focus,
.dj-site-header a:hover,
.dj-site-header a:focus,
header a:hover,
header a:focus {
    color: var(--dj-primary, #13a765) !important;
}





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

@media (max-width: 767px) {

    .dj-header,
    .dj-site-header,
    header {
        background: var(--dj-card, #fff) !important;
        border-bottom: 1px solid var(--dj-border, #e2ebe6) !important;
    }

    /* Brand */
    .dj-header .dj-brand-name,
    .dj-site-header .dj-brand-name,
    header .dj-brand-name {
        color: var(--dj-primary, #13a765) !important;
    }

    /* Moon / notification / menu buttons */
    .dj-header button,
    .dj-site-header button,
    header button {
        border-color: var(--dj-primary, #13a765) !important;
        color: var(--dj-primary, #13a765) !important;
        background: #fff !important;
    }

    .dj-header button:hover,
    .dj-header button:focus,
    .dj-site-header button:hover,
    .dj-site-header button:focus,
    header button:hover,
    header button:focus {
        background: var(--dj-primary, #13a765) !important;
        color: #fff !important;
    }

}

/* =========================================================
   DENIJOBS — FINAL FOOTER DESIGN
   Custom footer only
   ========================================================= */

footer.dj-footer {
    background: var(--dj-card) !important;
    color: var(--dj-muted) !important;
    border-top: 1px solid var(--dj-border) !important;
    text-align: center !important;
}

/* Footer brand row */
footer.dj-footer .dj-footer-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--dj-text) !important;
}

/* Footer DJ logo */
footer.dj-footer .dj-footer-brand .dj-logo {
    background: linear-gradient(
        135deg,
        var(--dj-primary),
        var(--dj-primary-2)
    ) !important;

    color: #fff !important;
}

/* DeniJobs name */
footer.dj-footer .dj-footer-brand strong {
    color: var(--dj-primary) !important;
    font-weight: 900 !important;
}

/* Apply For Jobs */
footer.dj-footer .dj-footer-brand small {
    color: var(--dj-muted) !important;
}

/* Footer description */
footer.dj-footer > p {
    color: var(--dj-muted) !important;
}

/* Footer navigation */
footer.dj-footer .dj-footer-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

/* About / Terms / Privacy / Contact */
footer.dj-footer .dj-footer-links a {
    color: var(--dj-primary) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    transition:
        color .2s ease,
        transform .2s ease !important;
}

/* Hover */
footer.dj-footer .dj-footer-links a:hover,
footer.dj-footer .dj-footer-links a:focus {
    color: var(--dj-primary-2) !important;
    transform: translateY(-1px) !important;
}

/* Copyright */
footer.dj-footer > small {
    color: var(--dj-muted) !important;
}


/* =========================================================
   REMOVE ELEMENTOR COLOURS FROM THIS FOOTER
   ========================================================= */

footer.dj-footer {
    --e-global-color-primary: var(--dj-primary) !important;
    --e-global-color-secondary: var(--dj-text) !important;
    --e-global-color-text: var(--dj-text) !important;
    --e-global-color-accent: var(--dj-primary) !important;
}

footer.dj-footer a {
    --e-global-color-primary: var(--dj-primary) !important;
    --e-global-color-secondary: var(--dj-text) !important;
    --e-global-color-accent: var(--dj-primary) !important;
}


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

@media (max-width: 767px) {

    footer.dj-footer {
        padding: 34px 18px 26px !important;
        margin-top: 30px !important;
    }

    footer.dj-footer .dj-footer-brand {
        gap: 10px !important;
    }

    footer.dj-footer .dj-footer-brand strong {
        font-size: 19px !important;
    }

    footer.dj-footer .dj-footer-links {
        gap: 0 !important;
        margin: 20px auto !important;
    }

    footer.dj-footer .dj-footer-links a {
        padding: 7px 10px !important;
        font-size: 13px !important;
    }

}

/* =========================================================
   DENIJOBS — COMPACT MOBILE SIDE MENU
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       MENU PANEL WIDTH
       ----------------------------------------- */

    #dj-menu,
    .dj-menu,
    .elementor-nav-menu--dropdown {
        width: 50vw !important;
        max-width: 390px !important;
        min-width: 300px !important;

        height: 100vh !important;
        min-height: 100vh !important;

        box-sizing: border-box !important;

        background: var(--dj-card, #ffffff) !important;

        border: 0 !important;
        border-left: 1px solid var(--dj-border, #e2ebe6) !important;

        border-radius: 22px 0 0 22px !important;

        box-shadow:
            -12px 0 35px rgba(0, 0, 0, .16) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    /* -----------------------------------------
       MENU TOP AREA
       ----------------------------------------- */

    #dj-menu .dj-menu-header,
    .dj-menu .dj-menu-header {
        padding: 22px 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }


    /* -----------------------------------------
       DENIJOBS MENU TITLE
       ----------------------------------------- */

    #dj-menu .dj-menu-title,
    .dj-menu .dj-menu-title {
        color: var(--dj-text, #10251c) !important;

        font-size: 22px !important;
        font-weight: 900 !important;

        margin: 0 !important;
    }


    /* -----------------------------------------
       MENU LINKS
       ----------------------------------------- */

    #dj-menu li a,
    .dj-menu li a,
    .elementor-nav-menu--dropdown li a,
    .elementor-nav-menu--dropdown .elementor-item {

        min-height: 58px !important;

        padding: 0 20px !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        color: var(--dj-text, #10251c) !important;

        background: transparent !important;

        font-size: 15px !important;
        font-weight: 750 !important;

        border-radius: 0 !important;

        transition:
            background .18s ease,
            color .18s ease,
            padding-left .18s ease !important;
    }


    /* -----------------------------------------
       SEPARATORS
       ----------------------------------------- */

    #dj-menu li + li,
    .dj-menu li + li,
    .elementor-nav-menu--dropdown li + li {

        border-top:
            1px solid var(--dj-border, #e2ebe6) !important;
    }


    /* -----------------------------------------
       HOVER / ACTIVE
       ----------------------------------------- */

    #dj-menu li a:hover,
    #dj-menu li a:focus,
    .dj-menu li a:hover,
    .dj-menu li a:focus,
    .elementor-nav-menu--dropdown li a:hover,
    .elementor-nav-menu--dropdown li a:focus {

        color: var(--dj-primary, #13a765) !important;

        background:
            rgba(19, 167, 101, .08) !important;

        padding-left: 25px !important;
    }


    /* -----------------------------------------
       ACTIVE PAGE
       ----------------------------------------- */

    #dj-menu li.current-menu-item > a,
    .dj-menu li.current-menu-item > a,
    .elementor-nav-menu--dropdown
    li.current-menu-item > a {

        color: var(--dj-primary, #13a765) !important;

        background:
            rgba(19, 167, 101, .10) !important;
    }


    /* -----------------------------------------
       CLOSE BUTTON
       ----------------------------------------- */

    #dj-menu-close,
    .dj-menu-close {

        width: 46px !important;
        height: 46px !important;

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

        background: #ffffff !important;

        color: var(--dj-primary, #13a765) !important;

        border:
            1px solid var(--dj-border, #dce8e2) !important;

        border-radius: 12px !important;

        font-size: 22px !important;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, .06) !important;
    }


    #dj-menu-close:hover,
    #dj-menu-close:focus,
    .dj-menu-close:hover,
    .dj-menu-close:focus {

        background:
            var(--dj-primary, #13a765) !important;

        color: #ffffff !important;

        border-color:
            var(--dj-primary, #13a765) !important;
    }


    /* -----------------------------------------
       ELEMENTOR MENU TOGGLE/CLOSE
       ----------------------------------------- */

    .elementor-menu-toggle,
    .elementor-menu-toggle.elementor-active {

        background: #ffffff !important;

        color: var(--dj-primary, #13a765) !important;

        border:
            1px solid var(--dj-border, #dce8e2) !important;

        border-radius: 12px !important;
    }


    .elementor-menu-toggle:hover,
    .elementor-menu-toggle:focus {

        background:
            var(--dj-primary, #13a765) !important;

        color: #ffffff !important;

        border-color:
            var(--dj-primary, #13a765) !important;
    }


    /* -----------------------------------------
       REMOVE PINK/RED ELEMENTOR COLORS
       ----------------------------------------- */

    #dj-menu,
    .dj-menu,
    .elementor-nav-menu--dropdown {

        --e-global-color-primary:
            var(--dj-primary, #13a765) !important;

        --e-global-color-secondary:
            var(--dj-text, #10251c) !important;

        --e-global-color-text:
            var(--dj-text, #10251c) !important;

        --e-global-color-accent:
            var(--dj-primary, #13a765) !important;
    }

}

/* =========================================================
   DENIJOBS — CLASSIC INFORMATION PAGES
   About / Terms / Privacy / Contact / Notifications
   ========================================================= */

.dj-information-page {
    width: 100%;
    margin: 0;
    padding: 0 0 70px;
}

.dj-page-hero {
    width: 100%;
    padding: 72px 20px 55px;
    background: linear-gradient(
        135deg,
        #063c2a 0%,
        #075c3f 55%,
        #0a7a51 100%
    );
    color: #ffffff;
}

.dj-page-hero-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.dj-page-hero .dj-kicker {
    color: #4ee59d !important;
}

.dj-page-hero h1 {
    max-width: 820px;
    margin: 12px 0 18px;
    color: #ffffff !important;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.04;
    letter-spacing: -2px;
}

.dj-page-hero h1 span {
    color: #42df98 !important;
}

.dj-page-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.82) !important;
    font-size: 18px;
    line-height: 1.75;
}


/* CONTENT */

.dj-page-content {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding-top: 34px;
}

.dj-content-card {
    position: relative;
    background: var(--dj-card, #ffffff) !important;
    border: 1px solid var(--dj-border, #dce8e2) !important;
    border-radius: 22px !important;
    padding: 30px !important;
    margin-bottom: 20px;
    box-shadow: var(
        --dj-shadow,
        0 12px 35px rgba(0,0,0,.06)
    ) !important;
}

.dj-content-card h2 {
    margin: 0 0 12px !important;
    color: var(--dj-text, #10251c) !important;
    font-size: 26px !important;
}

.dj-content-card p {
    margin: 0 0 13px !important;
    color: var(--dj-muted, #61736a) !important;
    line-height: 1.8 !important;
}

.dj-content-card p:last-child {
    margin-bottom: 0 !important;
}

.dj-content-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 17px;

    border-radius: 11px;

    background: rgba(19,167,101,.10);
    color: var(--dj-primary, #13a765);

    font-size: 13px;
    font-weight: 900;
}


/* TWO-COLUMN CONTENT */

.dj-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
}


/* PROCESS */

.dj-process-card {
    padding: 34px !important;
}

.dj-process-card > h2 {
    margin-top: 8px !important;
}

.dj-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
    margin-top: 28px;
}

.dj-process-grid > div {
    padding: 20px;
    border: 1px solid var(--dj-border, #dce8e2);
    border-radius: 17px;
    background: rgba(19,167,101,.035);
}

.dj-process-grid strong {
    color: var(--dj-primary, #13a765);
    font-size: 13px;
}

.dj-process-grid h3 {
    margin: 10px 0 7px;
    color: var(--dj-text, #10251c);
    font-size: 17px;
}

.dj-process-grid p {
    font-size: 14px !important;
}


/* CTA */

.dj-about-cta {
    text-align: center;
    padding: 40px 25px !important;
}

.dj-about-cta h2 {
    font-size: 30px !important;
}


/* NOTE */

.dj-note-card {
    background: rgba(19,167,101,.06) !important;
    border-color: rgba(19,167,101,.18) !important;
}

.dj-note-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--dj-primary, #13a765);
}


/* CONTACT */

.dj-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
}

.dj-contact-card {
    background: var(--dj-card, #ffffff);
    border: 1px solid var(--dj-border, #dce8e2);
    border-radius: 22px;
    padding: 30px;
    box-shadow: var(
        --dj-shadow,
        0 12px 35px rgba(0,0,0,.06)
    );
}

.dj-contact-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 20px;

    border-radius: 16px;

    background: rgba(19,167,101,.10);
    color: var(--dj-primary, #13a765);

    font-size: 25px;
}

.dj-contact-card h2 {
    margin: 10px 0 12px;
    color: var(--dj-text, #10251c);
    font-size: 25px;
}

.dj-contact-card p {
    color: var(--dj-muted, #61736a);
    line-height: 1.75;
    margin-bottom: 22px;
}

.dj-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 19px;

    border-radius: 12px;

    background: var(--dj-primary, #13a765);
    color: #ffffff !important;

    text-decoration: none !important;

    font-weight: 800;

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

.dj-contact-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 22px rgba(19,167,101,.20);
}

.dj-contact-whatsapp {
    background: #128c51;
}


/* TICKET */

.dj-ticket-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 22px;

    margin-top: 22px;
    padding: 30px;

    border-radius: 22px;

    background: #063c2a;
    color: #ffffff;

    box-shadow:
        0 18px 45px rgba(6,60,42,.16);
}

.dj-ticket-icon {
    width: 58px;
    height: 58px;

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

    border-radius: 17px;

    background: rgba(255,255,255,.10);

    color: #4ee59d;

    font-size: 24px;
    font-weight: 900;
}

.dj-ticket-card .dj-kicker {
    color: #4ee59d !important;
}

.dj-ticket-card h2 {
    margin: 7px 0 10px;
    color: #ffffff;
}

.dj-ticket-card p {
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.dj-ticket-placeholder {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;
    padding: 15px 17px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;

    background: rgba(255,255,255,.06);
}

.dj-ticket-placeholder span {
    color: rgba(255,255,255,.72);
}

.dj-ticket-placeholder strong {
    color: #4ee59d;
}


/* CONTACT NOTE */

.dj-contact-note {
    margin-top: 20px;
    padding: 22px 24px;

    border-left: 4px solid var(--dj-primary, #13a765);

    border-radius: 0 16px 16px 0;

    background: rgba(19,167,101,.05);
}

.dj-contact-note strong {
    color: var(--dj-text, #10251c);
}

.dj-contact-note p {
    margin: 7px 0 0;
    color: var(--dj-muted, #61736a);
    line-height: 1.7;
}


/* =========================================================
   NOTIFICATIONS
   ========================================================= */

.dj-notification-list {
    display: grid;
    gap: 16px;
}

.dj-notification-card {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;

    padding: 23px;

    background: var(--dj-card, #ffffff);

    border: 1px solid var(--dj-border, #dce8e2);
    border-radius: 20px;

    box-shadow:
        0 9px 28px rgba(0,0,0,.05);
}

.dj-notification-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 15px;

    background: rgba(19,167,101,.10);

    font-size: 22px;
}

.dj-notification-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}

.dj-notification-label {
    color: var(--dj-primary, #13a765);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dj-notification-top time {
    color: var(--dj-muted, #61736a);
    font-size: 12px;
}

.dj-notification-content h2 {
    margin: 0 0 8px;
    color: var(--dj-text, #10251c);
    font-size: 21px;
}

.dj-notification-content p {
    margin: 0;
    color: var(--dj-muted, #61736a);
    line-height: 1.7;
}

.dj-notification-clear {
    margin-top: 15px;

    border: 0;
    background: transparent;

    color: var(--dj-primary, #13a765);

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.dj-notification-empty {
    text-align: center;

    padding: 65px 25px;

    background: var(--dj-card, #ffffff);

    border: 1px solid var(--dj-border, #dce8e2);

    border-radius: 24px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.dj-empty-icon {
    width: 64px;
    height: 64px;

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

    margin: 0 auto 20px;

    border-radius: 19px;

    background: rgba(19,167,101,.10);

    font-size: 27px;
}

.dj-notification-empty h2 {
    margin: 8px 0;
    color: var(--dj-text, #10251c);
}

.dj-notification-empty p {
    max-width: 520px;
    margin: 0 auto 22px;
    color: var(--dj-muted, #61736a);
    line-height: 1.7;
}


/* =========================================================
   APPLICATION STATUS
   ========================================================= */

.dj-application-status {
    width: min(850px, calc(100% - 32px));

    margin: 55px auto 80px;

    text-align: center;
}

.dj-success-icon {
    width: 76px;
    height: 76px;

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

    margin: 0 auto 22px;

    border-radius: 50%;

    background: var(--dj-primary, #13a765);

    color: #ffffff;

    font-size: 38px;
    font-weight: 900;

    box-shadow:
        0 14px 32px rgba(19,167,101,.22);
}

.dj-application-status h1 {
    margin: 10px 0 14px;

    color: var(--dj-text, #10251c);

    font-size: clamp(38px, 6vw, 58px);
    line-height: 1.05;
}

.dj-status-lead {
    max-width: 650px;
    margin: 0 auto;

    color: var(--dj-muted, #61736a);

    font-size: 17px;
    line-height: 1.7;
}

.dj-status-flow {
    text-align: left;

    margin-top: 35px;

    padding: 25px;

    background: var(--dj-card, #ffffff);

    border: 1px solid var(--dj-border, #dce8e2);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);
}

.dj-status-step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 15px;

    align-items: start;
}

.dj-status-step > span {
    width: 40px;
    height: 40px;

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

    border-radius: 12px;

    background: rgba(19,167,101,.08);

    color: var(--dj-primary, #13a765);

    font-weight: 900;
    font-size: 13px;
}

.dj-status-step strong {
    color: var(--dj-text, #10251c);
}

.dj-status-step p {
    margin: 5px 0 0;

    color: var(--dj-muted, #61736a);

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

.dj-status-line {
    width: 2px;
    height: 22px;

    margin: 4px 0 4px 19px;

    background: var(--dj-border, #dce8e2);
}

.dj-next-box {
    margin-top: 20px;

    padding: 25px;

    border-radius: 20px;

    background: rgba(19,167,101,.06);

    border: 1px solid rgba(19,167,101,.14);
}

.dj-next-box h2 {
    margin: 7px 0;
    color: var(--dj-text, #10251c);
}

.dj-next-box p {
    color: var(--dj-muted, #61736a);
    line-height: 1.7;
}

.dj-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    margin-top: 22px;
}

.dj-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 20px;

    border: 1px solid var(--dj-primary, #13a765);
    border-radius: 12px;

    color: var(--dj-primary, #13a765) !important;

    background: transparent;

    text-decoration: none !important;

    font-weight: 800;
}


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

@media (max-width: 767px) {

    .dj-page-hero {
        padding: 48px 18px 38px;
    }

    .dj-page-hero h1 {
        font-size: 39px;
        letter-spacing: -1.2px;
    }

    .dj-page-hero p {
        font-size: 15px;
        line-height: 1.7;
    }

    .dj-page-content {
        width: min(100% - 28px, 1100px);
        padding-top: 20px;
    }

    .dj-content-card,
    .dj-contact-card {
        padding: 21px !important;
        border-radius: 18px !important;
    }

    .dj-content-card h2,
    .dj-contact-card h2 {
        font-size: 21px !important;
    }

    .dj-content-grid,
    .dj-contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dj-process-grid {
        grid-template-columns: 1fr;
    }

    .dj-process-card {
        padding: 23px !important;
    }

    .dj-ticket-card {
        grid-template-columns: 1fr;
        padding: 23px;
        border-radius: 19px;
    }

    .dj-ticket-placeholder {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dj-notification-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .dj-notification-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dj-application-status {
        width: calc(100% - 28px);
        margin-top: 35px;
    }

    .dj-application-status h1 {
        font-size: 39px;
    }

    .dj-status-flow {
        padding: 20px;
    }

    .dj-status-actions {
        flex-direction: column;
    }

    .dj-status-actions .dj-btn,
    .dj-status-actions .dj-btn-secondary {
        width: 100%;
    }

}

/* =========================================================
   REMOVE HELLO ELEMENTOR PAGE TITLE/OUTER PAGE STYLING
   FOR DENIJOBS CUSTOM PAGES
   ========================================================= */

body.page-template-default .page-header,
body.page-template-default .entry-header,
body.page-template-default .entry-title {
    display: none !important;
}

body.page-template-default .site-main {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-default article.page {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-default .page-content {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-default .elementor-widget-theme-post-content {
    margin: 0 !important;
}

/* =========================================================
   DENIJOBS CLASSIC PAGE SHELL + LIVE SUPPORT TICKET
   Final overrides: keeps these pages independent from the
   Hello Elementor blog/page appearance.
   ========================================================= */

.dj-classic-page {
    width: 100%;
    min-height: 60vh;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--dj-bg) !important;
}

.dj-classic-page > .dj-page {
    width: 100%;
    margin: 0 !important;
}

/* Prevent parent-theme containers from adding a white blog frame. */
body.denijobs-site .dj-classic-page,
body.denijobs-site .dj-information-page {
    box-sizing: border-box;
}

body.denijobs-site .dj-classic-page h1,
body.denijobs-site .dj-classic-page h2,
body.denijobs-site .dj-classic-page h3,
body.denijobs-site .dj-classic-page p {
    max-width: none;
}

/* Stronger reset for WordPress / Hello Elementor wrappers. */
body.denijobs-site.page .site-main,
body.denijobs-site.page .content-area,
body.denijobs-site.page .site-content,
body.denijobs-site.page .page-content,
body.denijobs-site.page article.page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* -----------------------------
   LIVE SUPPORT TICKET
   ----------------------------- */
.dj-ticket-form-card {
    grid-template-columns: 58px minmax(0,1fr) !important;
    align-items: start;
    margin-top: 24px !important;
}

.dj-ticket-form {
    display: grid;
    gap: 15px;
    margin-top: 24px;
}

.dj-ticket-form label {
    display: grid;
    gap: 7px;
    color: rgba(255,255,255,.94);
    font-size: 12px;
    font-weight: 800;
}

.dj-ticket-form input:not(.dj-ticket-hp),
.dj-ticket-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    color: #ffffff;
    padding: 14px 15px;
    outline: none;
    font: inherit;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dj-ticket-form input:not(.dj-ticket-hp)::placeholder,
.dj-ticket-form textarea::placeholder {
    color: rgba(255,255,255,.55);
}

.dj-ticket-form input:not(.dj-ticket-hp):focus,
.dj-ticket-form textarea:focus {
    border-color: #4ee59d;
    background: rgba(255,255,255,.10);
    box-shadow: 0 0 0 3px rgba(78,229,157,.10);
}

.dj-ticket-form textarea {
    min-height: 145px;
    resize: vertical;
}

.dj-ticket-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dj-ticket-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #13a765, #087f4b);
    color: #ffffff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.14);
    transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.dj-ticket-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 13px 30px rgba(0,0,0,.18);
}

.dj-ticket-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.dj-ticket-message {
    min-height: 20px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.55;
}

.dj-ticket-message.is-loading {
    color: rgba(255,255,255,.72);
}

.dj-ticket-message.is-success {
    padding: 12px 14px;
    background: rgba(78,229,157,.12);
    border: 1px solid rgba(78,229,157,.22);
    color: #8ff2bd;
}

.dj-ticket-message.is-error {
    padding: 12px 14px;
    background: rgba(255,90,90,.10);
    border: 1px solid rgba(255,120,120,.22);
    color: #ffd1d1;
}

/* Make contact cards feel like the same DeniJobs system. */
.dj-contact-card,
.dj-notification-card,
.dj-notification-empty,
.dj-content-card,
.dj-status-flow,
.dj-next-box {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .dj-ticket-form-card {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    .dj-ticket-form {
        margin-top: 20px;
    }

    .dj-ticket-submit {
        min-height: 50px;
    }
}

/* =========================================
   ADMIN NOTIFICATION MANAGEMENT
   ========================================= */

.dj-admin-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px;
}

.dj-admin-description{
    margin:5px 0 0;
    color:var(--dj-muted);
    font-size:12px;
}

.dj-admin-count{
    min-width:34px;
    height:34px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#dff8eb;
    color:#087b49;
    font-size:12px;
    font-weight:900;
}

.dj-admin-notifications{
    display:grid;
    gap:12px;
}

.dj-admin-notification-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:18px;
    background:var(--dj-card);
    border:1px solid var(--dj-border);
    border-radius:18px;
    box-shadow:0 8px 25px rgba(16,54,39,.06);
}

.dj-admin-notification-main{
    display:flex;
    align-items:flex-start;
    gap:13px;
    min-width:0;
}

.dj-admin-notification-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#dff8eb;
    font-size:18px;
}

.dj-admin-notification-main strong{
    display:block;
    font-size:15px;
    color:var(--dj-text);
}

.dj-admin-notification-main small{
    display:block;
    margin-top:3px;
    color:var(--dj-muted);
    font-size:9px;
}

.dj-admin-notification-main p{
    margin:9px 0 0;
    color:var(--dj-muted);
    font-size:12px;
    line-height:1.55;
}

.dj-admin-notification-item .dj-admin-actions{
    flex-shrink:0;
}

.dj-admin-notification-item .dj-danger{
    color:var(--dj-accent);
}

@media(max-width:700px){

    .dj-admin-section-heading{
        align-items:flex-start;
    }

    .dj-admin-notification-item{
        flex-direction:column;
    }

    .dj-admin-notification-item .dj-admin-actions{
        width:100%;
    }

    .dj-admin-notification-item .dj-admin-actions .dj-btn{
        flex:1;
    }

}

/* =========================================================
   DENIJOBS — 4 STEP APPLICATION
   ========================================================= */

.dj-application-step-three,
.dj-application-step-four{
    padding:20px 22px 24px;
    animation:djStepIn .22s ease;
}

.dj-application-next-box,
.dj-cv-intro{
    padding:18px;
    margin:18px 0;
    border:1px solid var(--dj-border);
    border-radius:16px;
    background:var(--dj-bg);
}

.dj-application-next-box h3,
.dj-cv-intro h3{
    margin:0 0 6px;
    color:var(--dj-text);
}

.dj-application-next-box p,
.dj-cv-intro p{
    margin:0;
    color:var(--dj-muted);
    font-size:12px;
    line-height:1.6;
}

.dj-next-application-step{
    width:100%;
    margin-top:4px;
}

.dj-payment-status{
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px;
    background:#dff8eb;
    color:#087b49;
    text-align:center;
    font-size:11px;
    font-weight:800;
}

.dj-cv-upload{
    display:grid;
    gap:8px;
    margin:20px 0;
    padding:18px;
    border:1px dashed var(--dj-primary);
    border-radius:16px;
    background:var(--dj-bg);
    color:var(--dj-text);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.dj-cv-upload input[type="file"]{
    width:100%;
    font-size:11px;
    color:var(--dj-muted);
}

#dj-final-application-form{
    display:grid;
    gap:12px;
}

#dj-final-application-form .dj-btn{
    width:100%;
}

@media(max-width:600px){

    .dj-application-step-three,
    .dj-application-step-four{
        padding:18px 16px 20px;
    }

}

/* =========================================================
   DENIJOBS — HEADER DROPDOWN MENU FINAL OVERRIDE
   Menu-only change. Everything else in the theme is untouched.
   ========================================================= */

.dj-menu[data-dj-drawer]{
    position:fixed !important;
    top:62px !important;
    right:0 !important;
    left:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100vh - 62px) !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 20px 24px !important;
    background:var(--dj-card,#fff) !important;
    color:var(--dj-text,#14231d) !important;
    border:0 !important;
    border-bottom:1px solid var(--dj-border,#dfe8e3) !important;
    border-radius:0 0 22px 22px !important;
    box-shadow:0 18px 45px rgba(16,54,39,.16) !important;
    transform:translateY(-110%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .28s ease,opacity .22s ease,visibility .28s ease !important;
}

.dj-menu[data-dj-drawer].open{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.dj-menu[data-dj-drawer] .dj-menu-head{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    min-height:74px !important;
    padding:10px 0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border-bottom:1px solid var(--dj-border,#dfe8e3) !important;
}

.dj-menu-brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:var(--dj-text,#14231d) !important;
}

.dj-menu-logo{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:13px !important;
    background:linear-gradient(135deg,var(--dj-primary,#13a765),var(--dj-primary-2,#087f4b)) !important;
    color:#fff !important;
    font-weight:900 !important;
    box-shadow:0 7px 18px rgba(19,167,101,.20) !important;
}

.dj-menu-brand-copy{
    display:flex !important;
    flex-direction:column !important;
    line-height:1.1 !important;
}

.dj-menu-brand-copy strong{
    color:var(--dj-text,#14231d) !important;
    font-size:18px !important;
    font-weight:900 !important;
}

.dj-menu-brand-copy small{
    margin-top:3px !important;
    color:var(--dj-muted,#64746d) !important;
    font-size:9px !important;
}

.dj-menu[data-dj-drawer] .dj-menu-close{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid var(--dj-border,#dfe8e3) !important;
    border-radius:12px !important;
    background:var(--dj-card,#fff) !important;
    color:var(--dj-primary,#13a765) !important;
    font-size:25px !important;
    line-height:1 !important;
    box-shadow:0 5px 16px rgba(16,54,39,.07) !important;
}

.dj-menu[data-dj-drawer] .dj-menu-close:hover,
.dj-menu[data-dj-drawer] .dj-menu-close:focus{
    background:var(--dj-primary,#13a765) !important;
    color:#fff !important;
    border-color:var(--dj-primary,#13a765) !important;
}

.dj-menu-links{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    padding:10px 0 0 !important;
    display:grid !important;
    gap:0 !important;
}

.dj-menu[data-dj-drawer] .dj-menu-link{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:58px !important;
    padding:0 8px !important;
    box-sizing:border-box !important;
    border-bottom:1px solid var(--dj-border,#dfe8e3) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--dj-text,#14231d) !important;
    font-size:17px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    transition:background .18s ease,color .18s ease,padding-left .18s ease !important;
}

.dj-menu[data-dj-drawer] .dj-menu-link:hover,
.dj-menu[data-dj-drawer] .dj-menu-link:focus{
    background:rgba(19,167,101,.06) !important;
    color:var(--dj-primary,#13a765) !important;
    padding-left:14px !important;
}

.dj-menu-arrow{
    color:var(--dj-primary,#13a765) !important;
    font-size:19px !important;
    font-weight:900 !important;
}

.dj-menu[data-dj-drawer] .dj-menu-whatsapp{
    margin-top:10px !important;
    min-height:52px !important;
    padding:0 16px !important;
    border:1px solid var(--dj-primary,#13a765) !important;
    border-radius:13px !important;
    background:rgba(19,167,101,.07) !important;
    color:var(--dj-primary-2,#087f4b) !important;
}

.dj-menu[data-dj-drawer] .dj-menu-whatsapp:hover,
.dj-menu[data-dj-drawer] .dj-menu-whatsapp:focus{
    padding-left:16px !important;
    background:var(--dj-primary,#13a765) !important;
    color:#fff !important;
}

.dj-menu[data-dj-drawer] .dj-menu-whatsapp .dj-menu-arrow{
    color:currentColor !important;
}

.dj-menu-apply{
    width:100% !important;
    min-height:52px !important;
    margin-top:12px !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    border-radius:13px !important;
    background:linear-gradient(135deg,var(--dj-primary,#13a765),var(--dj-primary-2,#087f4b)) !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    box-shadow:0 9px 22px rgba(19,167,101,.20) !important;
    transition:transform .18s ease,box-shadow .18s ease !important;
}

.dj-menu-apply:hover,
.dj-menu-apply:focus{
    color:#fff !important;
    transform:translateY(-1px) !important;
    box-shadow:0 12px 25px rgba(19,167,101,.27) !important;
}

/* Keep the backdrop subtle so the page remains visible. */
.dj-overlay[data-dj-overlay]{
    background:rgba(0,0,0,.16) !important;
}

@media(max-width:767px){
    .dj-menu[data-dj-drawer]{
        top:61px !important;
        max-height:calc(100vh - 61px) !important;
        padding:0 14px 18px !important;
        border-radius:0 0 18px 18px !important;
    }

    .dj-menu[data-dj-drawer] .dj-menu-head{
        min-height:70px !important;
    }

    .dj-menu[data-dj-drawer] .dj-menu-link{
        min-height:56px !important;
        font-size:16px !important;
    }

    .dj-menu[data-dj-drawer] .dj-menu-close{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    .dj-menu-logo{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }
}

/* FAQ introduction */

.dj-faq-intro{
    max-width:720px;
    margin:0 auto 28px;
    color:var(--dj-muted);
    font-size:16px;
    line-height:1.7;
}

/* =========================================================
   DENIJOBS HOMEPAGE — WHATSAPP SUPPORT AREA
   Uses the same WhatsApp button appearance as CONTACT PAGE
   ========================================================= */

.dj-home-whatsapp{
    width:100%;
    box-sizing:border-box;

    margin-top:30px;
    margin-bottom:30px;

    padding:0 !important;

    text-align:center;
}


/* Dedicated content area */

.dj-home-whatsapp-inner{

    width:100%;
    max-width:900px;

    margin:0 auto;

    box-sizing:border-box;

    padding:48px 30px;

    background:var(--dj-card,#ffffff);

    border:1px solid var(--dj-border,#dce8e2);

    border-radius:22px;

    box-shadow:
        var(
            --dj-shadow,
            0 12px 35px rgba(0,0,0,.06)
        );
}


/* Heading */

.dj-home-whatsapp-inner h2{

    margin:10px 0 12px;

    color:var(--dj-text,#10251c);

    font-size:clamp(28px,4vw,42px);

    line-height:1.15;

    font-weight:900;
}


/* Description */

.dj-home-whatsapp-inner > p{

    max-width:680px;

    margin:0 auto 25px;

    color:var(--dj-muted,#61736a);

    font-size:16px;

    line-height:1.75;
}


/* =========================================================
   WHATSAPP BUTTON
   Same base appearance as CONTACT PAGE
   ========================================================= */

.dj-home-whatsapp-button{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:10px !important;

    min-height:48px !important;

    padding:0 19px !important;

    border-radius:12px !important;

    background:#128c51 !important;

    color:#ffffff !important;

    border:1px solid #128c51 !important;

    text-decoration:none !important;

    font-weight:800 !important;

    font-size:15px !important;

    line-height:1 !important;

    box-sizing:border-box !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}


/* Hover */

.dj-home-whatsapp-button:hover,
.dj-home-whatsapp-button:focus{

    background:#0d7543 !important;

    color:#ffffff !important;

    transform:translateY(-2px) !important;

    box-shadow:
        0 9px 22px rgba(19,167,101,.20) !important;
}


/* WhatsApp symbol */

.dj-whatsapp-symbol{

    width:26px;
    height:26px;

    display:inline-flex;

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

    flex:0 0 26px;

    border-radius:50%;

    background:rgba(255,255,255,.16);

    color:#fff;

    font-size:13px;

    line-height:1;
}


/* Arrow */

.dj-whatsapp-arrow{

    font-size:17px;

    font-weight:900;

    line-height:1;

    color:#fff;
}


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

@media(max-width:767px){

    .dj-home-whatsapp{

        margin-top:20px;
        margin-bottom:20px;

        padding:0 !important;
    }


    .dj-home-whatsapp-inner{

        padding:34px 18px;

        border-radius:20px;
    }


    .dj-home-whatsapp-inner h2{

        font-size:29px;

        line-height:1.2;
    }


    .dj-home-whatsapp-inner > p{

        font-size:15px;

        line-height:1.65;

        margin-bottom:22px;
    }


    .dj-home-whatsapp-button{

        width:100% !important;

        max-width:360px;

        min-height:52px !important;

        padding:0 14px !important;

        border-radius:12px !important;

        font-size:14px !important;
    }

}

/* =========================================================
 * DENIJOBS — STANDALONE APPLICATION STEP 4
 * ========================================================= */

.dj-step-four-page{
    width:100%;
    box-sizing:border-box;
}

.dj-step-four-shell{
    width:min(920px, calc(100% - 30px));
    margin:32px auto 55px;
}

.dj-step-four-header{
    text-align:center;
    padding:12px 0 26px;
}

.dj-step-four-header h1{
    margin:8px 0 12px;
    color:var(--dj-text);
    font-size:clamp(28px,5vw,44px);
    line-height:1.15;
    font-weight:900;
}

.dj-step-four-header p{
    max-width:680px;
    margin:0 auto;
    color:var(--dj-muted);
    font-size:16px;
    line-height:1.7;
}

.dj-step-four-job-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    overflow:hidden;
    margin-bottom:18px;
    border:1px solid var(--dj-border);
    border-radius:18px;
    background:var(--dj-border);
}

.dj-step-four-job-card > div{
    padding:18px 20px;
    background:var(--dj-card);
}

.dj-step-four-job-card small{
    display:block;
    margin-bottom:6px;
    color:var(--dj-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.dj-step-four-job-card strong{
    display:block;
    color:var(--dj-text);
    font-size:16px;
    line-height:1.45;
}

.dj-step-four-upload-card{
    padding:30px;
    border:1px solid var(--dj-border);
    border-radius:20px;
    background:var(--dj-card);
    box-shadow:var(--dj-shadow);
}

.dj-step-four-upload-card h2{
    margin:8px 0 10px;
    color:var(--dj-text);
    font-size:26px;
    font-weight:900;
}

.dj-step-four-upload-card > p{
    max-width:680px;
    margin:0 0 22px;
    color:var(--dj-muted);
    line-height:1.7;
}

.dj-standalone-final-form{
    display:grid;
    gap:16px;
}

.dj-standalone-final-form .dj-cv-upload{
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:20px;
    box-sizing:border-box;
    border:2px dashed var(--dj-border);
    border-radius:16px;
    background:var(--dj-bg);
    cursor:pointer;
    text-align:center;
}

.dj-standalone-final-form .dj-cv-upload span{
    color:var(--dj-primary);
    font-weight:900;
}

.dj-standalone-final-form .dj-cv-upload input{
    width:100%;
    max-width:420px;
}

.dj-standalone-final-form .dj-btn{
    width:100%;
    min-height:52px;
}

@media(max-width:767px){

    .dj-step-four-shell{
        width:calc(100% - 20px);
        margin:20px auto 40px;
    }

    .dj-step-four-header{
        padding:8px 4px 20px;
    }

    .dj-step-four-header h1{
        font-size:29px;
    }

    .dj-step-four-header p{
        font-size:15px;
    }

    .dj-step-four-job-card{
        grid-template-columns:1fr;
    }

    .dj-step-four-job-card > div{
        padding:15px 16px;
    }

    .dj-step-four-upload-card{
        padding:22px 16px;
        border-radius:18px;
    }

    .dj-step-four-upload-card h2{
        font-size:24px;
    }

}




/* =========================================================
 * DeniJobs — keyboard visibility only
 * ========================================================= */
.dj-keyboard-active{
    max-height:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
}

.dj-keyboard-active input,
.dj-keyboard-active textarea,
.dj-keyboard-active select{
    scroll-margin-top:24px;
    scroll-margin-bottom:180px;
}

@media (max-width:767px){
    .dj-keyboard-active{
        padding-bottom:min(45vh,360px) !important;
    }
}


/* =========================================================
 * DeniJobs — In-App Browser scrolling
 * The modal stays exactly where it is; only its existing
 * content becomes a dependable scroll surface.
 * ========================================================= */
.dj-modal.open .dj-modal-card.dj-keyboard-scroll{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scroll-behavior:smooth;
}

.dj-modal.open .dj-modal-card.dj-keyboard-scroll input,
.dj-modal.open .dj-modal-card.dj-keyboard-scroll textarea,
.dj-modal.open .dj-modal-card.dj-keyboard-scroll select{
    scroll-margin-top:35px !important;
    scroll-margin-bottom:240px !important;
}

.dj-step-guidance{
    margin:10px 0 0 !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:11px !important;
    line-height:1.55 !important;
    opacity:.78 !important;
}

.dj-keyboard-spacer{
    width:100%;
    height:32vh;
    min-height:220px;
    flex:0 0 auto;
    pointer-events:none;
}

/* =========================================================
   DeniJobs MaziChat-style landing refresh
   Keeps DeniJobs green visual identity and existing job cards.
   ========================================================= */
.dj-header{
  padding:9px 16px;
  min-height:52px;
  box-sizing:border-box;
}
.dj-brand{gap:9px}
.dj-mazi-style-logo{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  font-size:16px;
  background:linear-gradient(135deg,var(--dj-primary-2),var(--dj-primary));
  box-shadow:0 4px 12px rgba(19,167,101,.22);
}
.dj-brand-copy strong{font-size:14px}
.dj-brand-copy small{font-size:9px}
.dj-header-actions{align-items:center;gap:5px}
.dj-live-jobs{
  display:flex;align-items:center;gap:5px;
  padding:3px 9px;border:1px solid var(--dj-border);
  border-radius:999px;background:var(--dj-card);
  font-size:10px;white-space:nowrap;
}
.dj-live-jobs i{width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.10)}
.dj-live-jobs b{font-size:10px}
.dj-live-jobs em{font-style:normal;color:var(--dj-muted);font-size:9px}
.dj-tiny-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;border-radius:10px;
  background:linear-gradient(100deg,var(--dj-primary-2),var(--dj-primary));
  color:#fff;text-decoration:none;font-size:10px;font-weight:800;
  box-shadow:0 5px 13px rgba(19,167,101,.18);
}
.dj-tiny-cta:hover{color:#fff;transform:translateY(-1px)}
.dj-header .dj-icon-btn{border:1px solid #e2e8f0;background:#fff;color:#0f172a;width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:16px;padding:0}
.dj-header .dj-icon-btn:hover{transform:translateY(-1px)}
body.dj-dark .dj-header .dj-icon-btn{background:var(--dj-card);border-color:#294644;color:#e7f4f3}

.dj-hero{margin:12px 14px 0;min-height:590px;border-radius:24px}
.dj-hero-content{padding:58px 26px 30px}
.dj-hero h1{font-size:clamp(40px,7vw,68px);max-width:760px}
.dj-hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.dj-hero-actions .dj-btn{min-height:44px}
.dj-channel-btn{
  display:flex;align-items:center;gap:9px;
  padding:8px 11px;border-radius:13px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;text-decoration:none;max-width:360px;
}
.dj-channel-btn>b{font-size:20px}
.dj-channel-btn span{display:flex;flex-direction:column;min-width:0}
.dj-channel-btn strong{font-size:11px}
.dj-channel-btn small{font-size:9px;color:rgba(255,255,255,.70);line-height:1.25}
.dj-channel-btn i{font-style:normal;font-size:10px;font-weight:800;white-space:nowrap;margin-left:auto}
.dj-channel-btn:hover{color:#fff;background:rgba(255,255,255,.15)}
.dj-direct-apply{min-width:160px;text-align:center}
.dj-job-card .dj-direct-apply{color:#fff!important;background:linear-gradient(135deg,var(--dj-primary),var(--dj-primary-2))!important}
.dj-job-card .dj-direct-apply:hover{color:#fff!important}

.dj-live-popups{position:fixed;right:18px;bottom:18px;z-index:2000;pointer-events:none}
.dj-live-popup{
  pointer-events:auto;width:min(340px,calc(100vw - 36px));
  background:var(--dj-card);border:1px solid var(--dj-border);
  border-radius:17px;padding:11px;display:flex;gap:10px;align-items:center;
  box-shadow:0 14px 35px rgba(0,0,0,.16);
  animation:djPopupIn .35s ease;
}
.dj-live-popup[hidden]{display:none}
.dj-popup-avatar{
  width:38px;height:38px;border-radius:50%;background:#e8f7ef;
  display:grid;place-items:center;font-size:18px;flex:0 0 38px;
}
.dj-popup-title,.dj-popup-text{display:block}
.dj-popup-title{font-size:12px;color:var(--dj-text)}
.dj-popup-text{font-size:11px;color:var(--dj-muted);margin-top:2px}
@keyframes djPopupIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

body.dj-dark .dj-live-popup{background:var(--dj-card);border-color:var(--dj-border)}
body.dj-dark .dj-live-jobs{background:var(--dj-card)}
@media(max-width:700px){
  .dj-header{padding:7px 10px}
  .dj-live-jobs{padding:2px 7px;font-size:9px}
  .dj-live-jobs em{font-size:8px}
  .dj-tiny-cta{padding:5px 8px;font-size:9px}
  .dj-header .dj-icon-btn{width:31px;height:31px}
  .dj-brand-copy strong{font-size:13px}
  .dj-brand-copy small{font-size:8px}
  .dj-hero{margin:10px 10px 0;min-height:560px;border-radius:21px}
  .dj-hero-content{padding:46px 18px 26px}
  .dj-hero h1{font-size:clamp(36px,12vw,54px);letter-spacing:-2px}
  .dj-hero p{font-size:14px}
  .dj-hero-actions{display:grid;grid-template-columns:1fr;align-items:stretch}
  .dj-channel-btn{max-width:none}
  .dj-channel-btn i{margin-left:auto}
  .dj-live-popups{right:12px;bottom:12px}
  .dj-live-popup{width:min(330px,calc(100vw - 24px))}
}


/* Hero-only MaziChat-style redesign */
.dj-mazi-hero{
  min-height:0!important;margin:0!important;border-radius:0!important;background:transparent!important;
  overflow:visible!important;text-align:center;padding:35px 15px 46px!important;
}
.dj-mazi-hero:after,.dj-mazi-hero .dj-hero-bg{display:none!important}
.dj-mazi-hero .dj-trust{
  display:inline-block;color:var(--dj-primary-2);background:var(--dj-card);
  border:1px solid var(--dj-border);border-radius:20px;padding:3px 12px;
  font-size:12px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.dj-mazi-hero h1{
  color:var(--dj-text)!important;font-size:clamp(36px,7vw,58px)!important;
  line-height:1.12!important;letter-spacing:-2px!important;max-width:700px!important;
  margin:18px auto 8px!important;
}
.dj-mazi-hero h1 strong{
  background:linear-gradient(100deg,#087f4b,#13a765,#3acb82);
  background-clip:text;-webkit-background-clip:text;color:transparent;
}
.dj-mazi-hero>p{color:var(--dj-muted)!important;max-width:575px!important;margin:0 auto 18px!important;font-size:16px!important}
.dj-hero-cta{
  display:inline-block;background:linear-gradient(135deg,var(--dj-primary),var(--dj-primary-2));
  color:#fff!important;border-radius:28px;padding:11px 22px;text-decoration:none;
  font-weight:800;font-size:14px;box-shadow:0 12px 25px rgba(19,167,101,.30);margin:2px;
}
.dj-hero-cta b{font-size:18px}
.dj-perks{font-size:12px;color:var(--dj-muted);margin-top:12px}
.dj-channel{
  height:68px;color:#fff!important;background:linear-gradient(100deg,#1dcc68,#0d8987);
  border-radius:20px;display:flex;align-items:center;gap:11px;padding:9px 15px;
  text-decoration:none;box-shadow:0 9px 16px rgba(0,0,0,.12);box-sizing:border-box;
}
.dj-channel>b{border-radius:50%;background:#fff;color:#25cb68;width:40px;height:40px;line-height:40px;text-align:center;font-size:25px;flex:0 0 40px}
.dj-channel strong,.dj-channel small{display:block;color:#fff}
.dj-channel strong{line-height:1.2}.dj-channel small{font-size:12px}
.dj-channel>i{font-style:normal;color:#0e7c7b;background:#fff;border-radius:20px;margin-left:auto;padding:5px 14px;font-size:11px;font-weight:700}
.hero-channel{max-width:650px;margin:16px auto 0}
.hero-channel:hover{color:#fff!important;transform:translateY(-1px)}