/* ================================================================
   キャリアナビ ステップフォーム v2 – CSS
   All rules scoped to #csf-root for maximum specificity
   ================================================================ */

/* --- Root Container --- */
#csf-root {
    max-width: 620px !important;
    margin: 0 auto 40px !important;
    padding: 0 16px !important;
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1.6 !important;
    color: #444 !important;
}
#csf-root *, #csf-root *::before, #csf-root *::after {
    box-sizing: border-box !important;
}

/* --- Panel visibility (CRITICAL) ---
   Hidden panels get inline style from PHP.
   JS controls show/hide via direct .style.cssText */
#csf-root .csf-panel {
    /* no display rule here – inline style controls it */
}

/* --- Progress --- */
#csf-root .csf-progress {
    background: #e0e0e0 !important;
    border-radius: 20px !important;
    height: 10px !important;
    overflow: hidden !important;
    margin: 0 0 6px !important;
}
#csf-root .csf-progress-fill {
    width: 16.66%;
    height: 100% !important;
    background: linear-gradient(90deg, #7cb342, #558b2f) !important;
    border-radius: 20px !important;
    transition: width 0.5s ease !important;
}
#csf-root .csf-step-indicator {
    text-align: center !important;
    font-size: 12px !important;
    color: #999 !important;
    margin: 0 0 20px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

/* --- Chat Bubble --- */
#csf-root .csf-chat {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
}
#csf-root .csf-avatar {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    background: #f0f0e8 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
#csf-root .csf-avatar svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
#csf-root .csf-bubble {
    position: relative !important;
    background: #fff !important;
    border: 2px solid #c5d89a !important;
    border-radius: 0 16px 16px 16px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #444 !important;
    flex: 1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
#csf-root .csf-bubble::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: -10px !important;
    border: 5px solid transparent !important;
    border-right-color: #c5d89a !important;
}

/* --- Option Cards --- */
#csf-root .csf-grid1,
#csf-root .csf-grid2,
#csf-root .csf-grid3 {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}
#csf-root .csf-grid1 { grid-template-columns: 1fr !important; }
#csf-root .csf-grid2 { grid-template-columns: 1fr 1fr !important; }
#csf-root .csf-grid3 { grid-template-columns: 1fr 1fr 1fr !important; }

#csf-root .csf-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    padding: 14px 10px !important;
    background: linear-gradient(135deg, #8da65d, #6b8c3e) !important;
    border: 3px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    box-shadow: 0 3px 10px rgba(107,140,62,0.25) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}
#csf-root .csf-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(107,140,62,0.35) !important;
}
#csf-root .csf-card.on {
    background: linear-gradient(135deg, #c8a83e, #b8942e) !important;
    border-color: #e8c84a !important;
    box-shadow: 0 4px 14px rgba(200,168,62,0.4) !important;
    transform: scale(1.03) !important;
}
#csf-root .csf-card.on::after {
    content: '✓' !important;
    position: absolute !important;
    top: 5px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #b8942e !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
#csf-root .csf-span2 {
    grid-column: 1 / -1 !important;
}

/* --- Buttons --- */
#csf-root .csf-btn-next {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #c49a6c, #a07c54) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 2px !important;
    box-shadow: 0 4px 14px rgba(160,124,84,0.35) !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    margin: 0 !important;
}
#csf-root .csf-btn-next:hover {
    background: linear-gradient(135deg, #d4aa7c, #b08c64) !important;
    transform: translateY(-1px) !important;
}

#csf-root .csf-btnrow {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}
#csf-root .csf-btnrow .csf-btn-next {
    flex: 1 !important;
}

#csf-root .csf-btn-back {
    flex-shrink: 0 !important;
    padding: 14px 18px !important;
    border: 2px solid #ccc !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #888 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}
#csf-root .csf-btn-back:hover {
    border-color: #999 !important;
    color: #555 !important;
}

#csf-root .csf-btn-submit {
    flex: 1 !important;
    padding: 16px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #e65100, #bf360c) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 2px !important;
    box-shadow: 0 4px 14px rgba(230,81,0,0.35) !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}
#csf-root .csf-btn-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #f4651a, #d84315) !important;
    transform: translateY(-1px) !important;
}
#csf-root .csf-btn-submit:disabled {
    background: #ccc !important;
    color: #999 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* --- Form Inputs --- */
#csf-root .csf-field-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #555 !important;
    margin: 16px 0 6px !important;
}
#csf-root .csf-field-label:first-child {
    margin-top: 0 !important;
}
#csf-root .csf-req {
    display: inline-block !important;
    background: #e53935 !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
}
#csf-root .csf-input {
    display: block !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    font-family: inherit !important;
    margin: 0 0 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
#csf-root .csf-input:focus {
    border-color: #7cb342 !important;
    box-shadow: 0 0 0 3px rgba(124,179,66,0.15) !important;
}
#csf-root .csf-input.err {
    border-color: #e53935 !important;
}
#csf-root .csf-sel {
    display: block !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    margin: 0 0 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    box-shadow: none !important;
}
#csf-root .csf-sel:focus {
    border-color: #7cb342 !important;
}

/* --- Sub-area panels --- */
#csf-root .csf-sub {
    display: none;
    margin-top: 12px !important;
}

/* --- Notice / Remaining --- */
#csf-root .csf-notice {
    background: #fff8e1 !important;
    border-left: 4px solid #ffc107 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #795548 !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 0 0 14px !important;
    line-height: 1.6 !important;
}
#csf-root .csf-remaining {
    text-align: center !important;
    font-size: 12px !important;
    color: #aaa !important;
    margin: 10px 0 !important;
    font-weight: 600 !important;
}

/* --- Terms --- */
#csf-root .csf-terms {
    background: #fafafa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 14px 0 !important;
}
#csf-root .csf-terms-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #555 !important;
    cursor: pointer !important;
}
#csf-root .csf-terms-inner input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #7cb342 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
#csf-root .csf-terms-inner a {
    color: #1976d2 !important;
    text-decoration: underline !important;
}

/* --- Done screen --- */
#csf-root .csf-done-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
}
#csf-root .csf-done-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
#csf-root .csf-done-text {
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444 !important;
    font-weight: 600 !important;
}

/* --- Error msg --- */
#csf-root .csf-errmsg {
    color: #e53935 !important;
    font-size: 12px !important;
    margin: 0 0 8px !important;
    font-weight: 600 !important;
}

/* --- Animations --- */
@keyframes csf-fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
#csf-root .csf-anim {
    animation: csf-fadeUp 0.35s ease !important;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    #csf-root { padding: 0 10px !important; }
    #csf-root .csf-card { min-height: 52px !important; font-size: 13px !important; padding: 12px 8px !important; }
    #csf-root .csf-avatar { width: 42px !important; height: 42px !important; }
    #csf-root .csf-bubble { font-size: 13px !important; padding: 12px 14px !important; }
    #csf-root .csf-grid3 { grid-template-columns: 1fr 1fr !important; }
}