/* ==========================================================
   DATE DIFFERENCE CALCULATOR
   Split from calc-datediff.css (lines 4-80)
   ========================================================== */
   ========================================================== */
/* ----------------------------------------------------------
   DATE DIFFERENCE CALCULATOR — FULLY RESPONSIVE
   ---------------------------------------------------------- */
.ct-dd-panel{display:none}
.ct-dd-panel-active{display:block;animation:ctFadeUp .3s var(--ct-ease)}

.ct-dd-dates{display:flex;align-items:flex-start;gap:12px}
.ct-dd-date-box{flex:1;min-width:0;padding:18px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-lg);display:flex;flex-direction:column;gap:8px;transition:border-color .3s ease,box-shadow .3s ease}
.ct-dd-date-box:focus-within{border-color:var(--ct-primary);box-shadow:0 0 0 4px rgba(99,102,241,.1)}
.ct-dd-date-info{font-size:12px;font-weight:600;color:var(--ct-text-muted);min-height:18px;word-break:break-word}
.ct-dd-swap-col{display:flex;align-items:center;padding-top:30px;flex-shrink:0}
.ct-dd-swap{width:44px;height:44px;border:2px solid var(--ct-input-border);border-radius:50%;background:#fff;color:var(--ct-primary);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-family:var(--ct-font);padding:0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ct-dd-swap:hover{background:var(--ct-primary);color:#fff;border-color:var(--ct-primary);transform:rotate(180deg);box-shadow:0 4px 14px var(--ct-primary-glow)}
.ct-dd-incl-toggle{padding:10px 16px;background:var(--ct-input-bg);border-radius:var(--ct-r-sm);display:inline-flex;border:1px solid var(--ct-input-border)}

.ct-dd-wk-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ct-dd-wk-chk{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-sm);cursor:pointer;font-size:13px;font-weight:700;color:var(--ct-text-secondary);user-select:none;transition:all .2s ease}
.ct-dd-wk-chk:hover{border-color:var(--ct-primary-light)}
.ct-dd-wk-chk input{accent-color:var(--ct-primary);width:16px;height:16px;cursor:pointer}
.ct-dd-wk-chk input:checked+span{color:var(--ct-danger);text-decoration:line-through}

.ct-dd-answer{text-align:center;padding:20px var(--ct-sp-md);word-break:break-word;overflow-wrap:break-word}
.ct-dd-answer:empty{display:none}
.ct-dd-answer-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:10px;padding:4px 16px;background:rgba(0,0,0,.03);border-radius:20px}
.ct-dd-answer-value{display:block;font-size:clamp(20px,4vw,26px);font-weight:900;line-height:1.15;background:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-word}
.ct-dd-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:8px;word-break:break-word}

.ct-dd-conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:var(--ct-sp-md)}
.ct-dd-conv-card{padding:14px 10px;background:var(--ct-card-bg);border:1px solid var(--ct-input-border);border-radius:var(--ct-r-sm);text-align:center;transition:transform .2s ease;word-break:break-word;overflow:hidden}
.ct-dd-conv-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.ct-dd-conv-val{display:block;font-size:clamp(15px,3vw,20px);font-weight:800;color:var(--ct-text);word-break:break-word}
.ct-dd-conv-lbl{display:block;font-size:10px;font-weight:700;color:var(--ct-text-muted);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}

.ct-dd-wkday-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;min-height:110px;margin-top:var(--ct-sp-md)}
.ct-dd-wk-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.ct-dd-wk-barw{width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center}
.ct-dd-wk-bar{width:100%;max-width:36px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--ct-primary-light),var(--ct-primary));transition:height .8s cubic-bezier(.4,0,.2,1);min-height:4px}
.ct-dd-wk-bar-we{background:linear-gradient(180deg,#fbbf24,#d97706)}
.ct-dd-wk-cnt{font-size:clamp(10px,2vw,13px);font-weight:800;color:var(--ct-text)}
.ct-dd-wk-nm{font-size:clamp(9px,1.8vw,11px);font-weight:700;color:var(--ct-text-muted);text-transform:uppercase}

.ct-tool-section[data-tool="datediff"] .ct-result-value{font-size:clamp(14px,2.8vw,20px);word-break:break-word;overflow-wrap:break-word;line-height:1.2;max-width:100%;padding:0 2px}
.ct-tool-section[data-tool="datediff"] .ct-result-card{min-width:0;overflow:hidden;padding:var(--ct-sp-md) var(--ct-sp-sm);word-break:break-word}
.ct-tool-section[data-tool="datediff"] .ct-result-summary{word-break:break-word;overflow-wrap:break-word;font-size:clamp(12px,2.5vw,15px);line-height:1.7}
.ct-tool-section[data-tool="datediff"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}

@media(max-width:768px){
  .ct-dd-dates{flex-direction:column;align-items:stretch}
  .ct-dd-swap-col{padding-top:0;align-self:center}
  .ct-dd-swap{transform:rotate(90deg)}
  .ct-dd-swap:hover{transform:rotate(270deg)}
  .ct-dd-date-box{padding:14px}
  .ct-tool-section[data-tool="datediff"] .ct-result-grid{grid-template-columns:1fr!important;gap:var(--ct-sp-sm)}
  .ct-dd-conv-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .ct-dd-wkday-bars{gap:4px;min-height:90px}
  .ct-dd-wk-barw{height:60px}
  .ct-tool-section[data-tool="datediff"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}
  .ct-tool-section[data-tool="datediff"] .ct-detail-val{text-align:left;padding-left:28px}
  .ct-dd-incl-toggle{width:100%}
  .ct-dd-wk-chk{padding:6px 10px;font-size:12px}
}
@media(max-width:480px){
  .ct-dd-date-box{padding:12px}
  .ct-dd-conv-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .ct-dd-conv-val{font-size:15px}
  .ct-dd-wkday-bars{min-height:70px}
  .ct-dd-wk-barw{height:50px}
  .ct-dd-wk-bar{max-width:28px}
  .ct-dd-wk-chk{padding:5px 8px;font-size:11px}
  .ct-dd-wk-chk input{width:14px;height:14px}
}
@media(max-width:360px){
  .ct-dd-conv-grid{grid-template-columns:1fr 1fr;gap:4px}
  .ct-dd-wk-bar{max-width:22px}
  .ct-dd-wkday-bars{gap:3px;min-height:60px}
  .ct-dd-wk-barw{height:40px}
}