/* JHS Advice — RAMS Generator v4
   All font sizes use !important to prevent WordPress theme override.
   ================================================================== */

/* ── Reset theme interference inside our wrapper ─────────────────── */
.jhs-wrap,
.jhs-wrap *,
.jhs-wrap *::before,
.jhs-wrap *::after {
    box-sizing: border-box !important;
}

.jhs-wrap {
    --blue:      #035A83;
    --blue-dk:   #024769;
    --blue-lt:   #e8f3f9;
    --blue-bd:   #b8d8ea;
    --text:      #1a2333;
    --text-mid:  #3d4e63;
    --text-lt:   #6b7c94;
    --bg:        #ffffff;
    --bg-off:    #f5f8fb;
    --border:    #d1dbe8;
    --rad:       8px;
    --rad-lg:    14px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:   16px !important;
    line-height: 1.55 !important;
    color:       #1a2333 !important;
    max-width:   820px !important;
    width:       100% !important;
    margin:      2rem auto !important;
    padding:     0 !important;
    background:  #ffffff !important;
    border:      1px solid #d1dbe8 !important;
    border-radius: 14px !important;
    box-shadow:  0 4px 28px rgba(3,90,131,.10) !important;
    overflow:    hidden !important;
    display:     block !important;
}

/* ── Header ─────────────────────────────────────────────────────── */
.jhs-wrap .jhs-header {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    padding:     20px 28px !important;
    background:  #035A83 !important;
    color:       #ffffff !important;
    font-size:   1.2rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin:      0 !important;
    border-radius: 0 !important;
}

.jhs-wrap .jhs-header svg {
    flex-shrink: 0 !important;
    opacity: 0.92 !important;
}

/* ── Body ────────────────────────────────────────────────────────── */
.jhs-wrap .jhs-body {
    padding: 28px 32px !important;
    margin:  0 !important;
}

.jhs-wrap .jhs-tip {
    font-size:   1rem !important;
    color:       #3d4e63 !important;
    margin:      0 0 1.75rem !important;
    padding:     .875rem 1.125rem !important;
    background:  #f5f8fb !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: 3px solid #035A83 !important;
    line-height: 1.6 !important;
    display:     block !important;
}

/* ── Section headings ────────────────────────────────────────────── */
.jhs-wrap .jhs-section-heading {
    font-size:   1.0625rem !important;
    font-weight: 600 !important;
    color:       #1a2333 !important;
    margin:      0 0 1rem !important;
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
}

.jhs-wrap .jhs-step-badge {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           28px !important;
    height:          28px !important;
    background:      #035A83 !important;
    color:           #ffffff !important;
    border-radius:   50% !important;
    font-size:       12px !important;
    font-weight:     700 !important;
    flex-shrink:     0 !important;
}

.jhs-wrap .jhs-optional {
    font-size:   0.875rem !important;
    font-weight: 400 !important;
    color:       #6b7c94 !important;
}

/* ── Upload zone ─────────────────────────────────────────────────── */
.jhs-wrap .jhs-upload-zone {
    position:       relative !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            10px !important;
    padding:        32px 20px !important;
    background:     #f5f8fb !important;
    border:         2px dashed #d1dbe8 !important;
    border-radius:  8px !important;
    cursor:         pointer !important;
    text-align:     center !important;
    color:          #6b7c94 !important;
    transition:     all .15s !important;
    margin-bottom:  12px !important;
}

.jhs-wrap .jhs-upload-zone:hover,
.jhs-wrap .jhs-upload-zone.drag-over {
    border-color: #035A83 !important;
    background:   #e8f3f9 !important;
    color:        #035A83 !important;
}

.jhs-wrap .jhs-upload-main {
    margin:    0 !important;
    font-size: 1rem !important;
    color:     #3d4e63 !important;
}

.jhs-wrap .jhs-upload-link {
    color:           #035A83 !important;
    text-decoration: underline !important;
    cursor:          pointer !important;
    font-weight:     500 !important;
}

.jhs-wrap .jhs-upload-hint {
    margin:     0 !important;
    font-size:  0.9375rem !important;
    color:      #6b7c94 !important;
    font-style: italic !important;
}

.jhs-wrap .jhs-file-input {
    position: absolute !important;
    inset:    0 !important;
    width:    100% !important;
    height:   100% !important;
    opacity:  0 !important;
    cursor:   pointer !important;
    font-size: 0 !important;
}

/* ── File list ───────────────────────────────────────────────────── */
.jhs-wrap .jhs-file-list { margin-bottom: 4px !important; }

.jhs-wrap .jhs-file-item {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         8px 12px !important;
    margin-top:      6px !important;
    background:      #f5f8fb !important;
    border:          1px solid #d1dbe8 !important;
    border-radius:   8px !important;
    font-size:       0.9375rem !important;
}

.jhs-wrap .jhs-file-name  { color: #3d4e63 !important; font-size: 0.9375rem !important; }
.jhs-wrap .jhs-file-size  { color: #6b7c94 !important; font-size: 0.8125rem !important; margin-left: 8px !important; }

.jhs-wrap .jhs-file-remove {
    background:  none !important;
    border:      none !important;
    color:       #6b7c94 !important;
    cursor:      pointer !important;
    font-size:   1.25rem !important;
    line-height: 1 !important;
    padding:     0 4px !important;
    transition:  color .15s !important;
}

.jhs-wrap .jhs-file-remove:hover { color: #c0392b !important; }

/* ── Analyse bar ─────────────────────────────────────────────────── */
.jhs-wrap .jhs-analyse-bar {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    margin-top:  10px !important;
}

.jhs-wrap .jhs-btn-analyse {
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           7px !important;
    padding:       9px 20px !important;
    font-family:   inherit !important;
    font-size:     0.9375rem !important;
    font-weight:   500 !important;
    color:         #035A83 !important;
    background:    #e8f3f9 !important;
    border:        1.5px solid #b8d8ea !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
}

.jhs-wrap .jhs-btn-analyse:hover {
    background:   #035A83 !important;
    color:        #ffffff !important;
    border-color: #035A83 !important;
}

.jhs-wrap .jhs-btn-analyse:disabled { opacity: .55 !important; cursor: not-allowed !important; }
.jhs-wrap .jhs-analyse-status { font-size: 0.9375rem !important; color: #3d4e63 !important; }

/* ── Groups & Labels ─────────────────────────────────────────────── */
.jhs-wrap .jhs-group { margin-bottom: 1.875rem !important; }
.jhs-wrap .jhs-group:last-child { margin-bottom: 0 !important; }

.jhs-wrap .jhs-label {
    display:       block !important;
    font-size:     1rem !important;
    font-weight:   600 !important;
    color:         #1a2333 !important;
    margin-bottom: 10px !important;
    line-height:   1.45 !important;
}

.jhs-wrap .jhs-req { color: #c0392b !important; margin-left: 3px !important; font-weight: 700 !important; }

/* ── Textareas ───────────────────────────────────────────────────── */
.jhs-wrap .jhs-textarea {
    display:       block !important;
    width:         100% !important;
    padding:       12px 14px !important;
    font-family:   inherit !important;
    font-size:     1rem !important;
    color:         #1a2333 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    resize:        vertical !important;
    line-height:   1.55 !important;
    transition:    border-color .15s, box-shadow .15s !important;
    box-sizing:    border-box !important;
    min-height:    64px !important;
    margin:        0 !important;
    max-width:     100% !important;
}

.jhs-wrap .jhs-textarea:focus {
    outline:      none !important;
    border-color: #035A83 !important;
    box-shadow:   0 0 0 3px rgba(3,90,131,.12) !important;
}

.jhs-wrap .jhs-textarea::placeholder {
    color:      #6b7c94 !important;
    font-size:  0.9375rem !important;
    font-style: italic !important;
}

.jhs-wrap .jhs-followup { margin-top: 12px !important; }

.jhs-wrap .jhs-other-input {
    display:       block !important;
    width:         100% !important;
    margin-top:    12px !important;
    padding:       11px 14px !important;
    font-family:   inherit !important;
    font-size:     1rem !important;
    color:         #1a2333 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    transition:    border-color .15s, box-shadow .15s !important;
    box-sizing:    border-box !important;
}

.jhs-wrap .jhs-other-input:focus {
    outline:      none !important;
    border-color: #035A83 !important;
    box-shadow:   0 0 0 3px rgba(3,90,131,.12) !important;
}

/* ── Pills ───────────────────────────────────────────────────────── */
.jhs-wrap .jhs-pills {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       10px !important;
    margin-top: 6px !important;
}

.jhs-wrap .jhs-pill {
    padding:       9px 20px !important;
    font-family:   inherit !important;
    font-size:     0.9375rem !important;
    font-weight:   500 !important;
    color:         #3d4e63 !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 100px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    user-select:   none !important;
    line-height:   1.2 !important;
    display:       inline-block !important;
}

.jhs-wrap .jhs-pill:hover {
    border-color: #035A83 !important;
    color:        #035A83 !important;
    background:   #e8f3f9 !important;
}

.jhs-wrap .jhs-pill--on {
    border-color: #035A83 !important;
    background:   #035A83 !important;
    color:        #ffffff !important;
    box-shadow:   0 2px 6px rgba(3,90,131,.22) !important;
}

.jhs-wrap .jhs-pill--on:hover {
    background:   #024769 !important;
    border-color: #024769 !important;
    color:        #ffffff !important;
}

/* ── Work type cards ─────────────────────────────────────────────── */
.jhs-wrap .jhs-cards {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap:                   12px !important;
    margin-top:            8px !important;
}

.jhs-wrap .jhs-card {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           12px !important;
    padding:       14px 16px !important;
    font-family:   inherit !important;
    text-align:    left !important;
    background:    #ffffff !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 12px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
    user-select:   none !important;
    width:         100% !important;
}

.jhs-wrap .jhs-card:hover,
.jhs-wrap .jhs-card--on {
    border-color: #035A83 !important;
    background:   #e8f3f9 !important;
    box-shadow:   0 2px 10px rgba(3,90,131,.18) !important;
}

.jhs-wrap .jhs-card-icon {
    flex-shrink: 0 !important;
    width:       22px !important;
    height:      22px !important;
    color:       #6b7c94 !important;
    margin-top:  2px !important;
}

.jhs-wrap .jhs-card--on .jhs-card-icon,
.jhs-wrap .jhs-card:hover .jhs-card-icon { color: #035A83 !important; }

.jhs-wrap .jhs-card-text { display: flex !important; flex-direction: column !important; gap: 3px !important; }

.jhs-wrap .jhs-card-label {
    font-size:   0.9375rem !important;
    font-weight: 600 !important;
    color:       #1a2333 !important;
    line-height: 1.3 !important;
    display:     block !important;
}

.jhs-wrap .jhs-card-sub {
    font-size:   0.8125rem !important;
    color:       #6b7c94 !important;
    line-height: 1.3 !important;
    display:     block !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.jhs-wrap .jhs-footer {
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    padding:         18px 32px !important;
    background:      #f5f8fb !important;
    border-top:      1px solid #d1dbe8 !important;
    margin:          0 !important;
}

.jhs-wrap .jhs-btn-copy {
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           6px !important;
    padding:       10px 16px !important;
    font-family:   inherit !important;
    font-size:     0.9375rem !important;
    font-weight:   500 !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
}

.jhs-wrap .jhs-btn-copy:hover { border-color: #035A83 !important; color: #035A83 !important; }
.jhs-wrap .jhs-btn-copy.jhs-copied { border-color: #2a7a2a !important; color: #2a7a2a !important; }

.jhs-wrap .jhs-btn-skip {
    padding:       10px 20px !important;
    font-family:   inherit !important;
    font-size:     1rem !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
}

.jhs-wrap .jhs-btn-skip:hover { border-color: #3d4e63 !important; color: #1a2333 !important; }

.jhs-wrap .jhs-btn-generate {
    padding:       13px 36px !important;
    font-family:   inherit !important;
    font-size:     1.0625rem !important;
    font-weight:   700 !important;
    color:         #ffffff !important;
    background:    #035A83 !important;
    border:        none !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    letter-spacing: .01em !important;
    transition:    all .15s !important;
    line-height:   1.2 !important;
}

.jhs-wrap .jhs-btn-generate:hover {
    background:  #024769 !important;
    transform:   translateY(-1px) !important;
    box-shadow:  0 4px 14px rgba(3,90,131,.32) !important;
}

.jhs-wrap .jhs-btn-generate:disabled {
    opacity:    .55 !important;
    cursor:     not-allowed !important;
    transform:  none !important;
    box-shadow: none !important;
}

/* ── Progress ────────────────────────────────────────────────────── */
.jhs-wrap .jhs-progress { padding: 52px 32px !important; text-align: center !important; }

.jhs-wrap .jhs-spinner {
    width:        52px !important;
    height:       52px !important;
    margin:       0 auto 20px !important;
    border:       4px solid #b8d8ea !important;
    border-top:   4px solid #035A83 !important;
    border-radius: 50% !important;
    animation:    jhs-spin .85s linear infinite !important;
}

@keyframes jhs-spin { to { transform: rotate(360deg); } }

.jhs-wrap .jhs-progress-msg {
    font-size:   1.0625rem !important;
    color:       #3d4e63 !important;
    margin:      0 0 8px !important;
}

.jhs-wrap .jhs-progress-sub {
    font-size: 0.875rem !important;
    color:     #6b7c94 !important;
    margin:    0 !important;
}

/* ── Download panel ──────────────────────────────────────────────── */
.jhs-wrap .jhs-downloads {
    padding:    48px 32px !important;
    text-align: center !important;
    border-top: 4px solid #035A83 !important;
}

.jhs-wrap .jhs-dl-title {
    font-size:      1.5rem !important;
    font-weight:    700 !important;
    color:          #1a2333 !important;
    margin:         0 0 10px !important;
    letter-spacing: -.02em !important;
}

.jhs-wrap .jhs-dl-sub {
    font-size: 1rem !important;
    color:     #3d4e63 !important;
    margin:    0 0 32px !important;
}

.jhs-wrap .jhs-dl-grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   20px !important;
    margin-bottom:         24px !important;
    max-width:             600px !important;
    margin-left:           auto !important;
    margin-right:          auto !important;
}

.jhs-wrap .jhs-dl-card {
    background:    #f5f8fb !important;
    border:        1.5px solid #d1dbe8 !important;
    border-radius: 8px !important;
    padding:       20px !important;
    text-align:    left !important;
}

.jhs-wrap .jhs-dl-card-title {
    font-size:   1rem !important;
    font-weight: 600 !important;
    margin:      0 0 14px !important;
    color:       #1a2333 !important;
}

.jhs-wrap .jhs-dl-buttons {
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}

.jhs-wrap .jhs-dl-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    padding:         11px 18px !important;
    font-family:     inherit !important;
    font-size:       0.9375rem !important;
    font-weight:     600 !important;
    color:           #ffffff !important;
    background:      #035A83 !important;
    border:          none !important;
    border-radius:   8px !important;
    text-decoration: none !important;
    cursor:          pointer !important;
    transition:      all .15s !important;
}

.jhs-wrap .jhs-dl-btn:hover {
    background:      #024769 !important;
    color:           #ffffff !important;
    text-decoration: none !important;
    transform:       translateY(-1px) !important;
    box-shadow:      0 4px 12px rgba(3,90,131,.28) !important;
}

.jhs-wrap .jhs-dl-btn--outline {
    background: #ffffff !important;
    color:      #035A83 !important;
    border:     2px solid #035A83 !important;
}

.jhs-wrap .jhs-dl-btn--outline:hover {
    background: #e8f3f9 !important;
    color:      #024769 !important;
}

.jhs-wrap .jhs-dl-note {
    font-size:  0.875rem !important;
    color:      #6b7c94 !important;
    margin:     0 0 24px !important;
    font-style: italic !important;
}

.jhs-wrap .jhs-btn-another {
    padding:       10px 22px !important;
    font-family:   inherit !important;
    font-size:     0.9375rem !important;
    color:         #3d4e63 !important;
    background:    transparent !important;
    border:        2px solid #d1dbe8 !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
}

.jhs-wrap .jhs-btn-another:hover { color: #035A83 !important; border-color: #b8d8ea !important; }

/* ── Error panel ─────────────────────────────────────────────────── */
.jhs-wrap .jhs-error {
    margin:        0 32px 28px !important;
    padding:       16px 18px !important;
    background:    #fff5f5 !important;
    border:        2px solid #feb2b2 !important;
    border-radius: 8px !important;
    text-align:    center !important;
}

.jhs-wrap .jhs-error-msg {
    font-size:   1rem !important;
    color:       #c0392b !important;
    margin:      0 0 14px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
}

.jhs-wrap .jhs-btn-retry {
    padding:       9px 22px !important;
    font-family:   inherit !important;
    font-size:     0.9375rem !important;
    font-weight:   600 !important;
    color:         #c0392b !important;
    background:    transparent !important;
    border:        2px solid #c0392b !important;
    border-radius: 8px !important;
    cursor:        pointer !important;
    transition:    all .15s !important;
}

.jhs-wrap .jhs-btn-retry:hover { background: #c0392b !important; color: #ffffff !important; }

/* ── Validation ──────────────────────────────────────────────────── */
.jhs-wrap .jhs-textarea.jhs-invalid {
    border-color: #e53e3e !important;
    box-shadow:   0 0 0 3px rgba(229,62,62,.12) !important;
}

.jhs-wrap .jhs-field-err {
    display:     block !important;
    font-size:   0.875rem !important;
    color:       #c0392b !important;
    margin-top:  5px !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .jhs-wrap .jhs-body,
    .jhs-wrap .jhs-footer    { padding: 20px 18px !important; }
    .jhs-wrap .jhs-footer    { flex-direction: column-reverse !important; gap: 12px !important; }
    .jhs-wrap .jhs-btn-generate,
    .jhs-wrap .jhs-btn-skip  { width: 100% !important; justify-content: center !important; text-align: center !important; }
    .jhs-wrap .jhs-cards     { grid-template-columns: 1fr 1fr !important; }
    .jhs-wrap .jhs-dl-grid   { grid-template-columns: 1fr !important; }
    .jhs-wrap .jhs-dl-card   { text-align: center !important; }
    .jhs-wrap .jhs-dl-buttons{ align-items: center !important; }
}

@media (max-width: 400px) {
    .jhs-wrap .jhs-cards { grid-template-columns: 1fr !important; }
}