/* ─── iCertifi Feedback v2 — CSS Variable Driven ─── */
#icf-feedback-app.icf-wrap { max-width:820px; margin:0 auto; padding:40px 20px; font-family:var(--icf-font); color:var(--icf-text); line-height:1.6; }
#icf-feedback-app.icf-wrap * { box-sizing:border-box; }
#icf-feedback-app .icf-step { display:none; }
#icf-feedback-app .icf-step.icf-active { display:block; }
#icf-feedback-app .icf-hidden { display:none !important; }

/* Header */
#icf-feedback-app .icf-title { font-size:var(--icf-heading-size) !important; font-weight:700 !important; text-align:center !important; margin:0 0 16px !important; color:var(--icf-text) !important; }
#icf-feedback-app .icf-subtitle { font-size:18px; text-align:center; color:var(--icf-text-secondary); max-width:620px; margin:0 auto 48px; }
#icf-feedback-app .icf-muted { font-size:15px; color:var(--icf-text-secondary); margin:0 0 24px; }

/* Type Cards */
#icf-feedback-app .icf-type-cards { display:flex !important; gap:20px !important; margin-bottom:48px !important; flex-wrap:wrap !important; }
#icf-feedback-app .icf-type-card { flex:1 !important; min-width:220px !important; background:var(--icf-bg-input) !important; border-radius:var(--icf-radius) !important; padding:32px 24px !important; text-align:center !important; transition:transform 0.2s,box-shadow 0.2s; }
#icf-feedback-app .icf-type-card:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.08); }
#icf-feedback-app .icf-type-icon { font-size:40px !important; margin-bottom:12px !important; line-height:1; display:flex; justify-content:center; align-items:center; }
#icf-feedback-app .icf-type-card h3 { font-size:18px !important; font-weight:600 !important; margin:0 0 8px !important; }
#icf-feedback-app .icf-type-card p { font-size:15px !important; color:var(--icf-text-secondary) !important; margin:0 !important; }

/* Card */
#icf-feedback-app .icf-card { background:var(--icf-bg-card) !important; border:1px solid var(--icf-border) !important; border-radius:var(--icf-radius) !important; padding:40px !important; box-shadow:0 2px 12px rgba(0,0,0,0.04) !important; position:relative; overflow:visible !important; }
#icf-feedback-app .icf-card h2 { font-size:24px !important; font-weight:600 !important; margin:0 0 8px !important; }

/* Fields */
#icf-feedback-app .icf-field { margin-bottom:20px; }
#icf-feedback-app .icf-field label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
#icf-feedback-app .icf-req { color:var(--icf-error); }
#icf-feedback-app .icf-opt { color:var(--icf-text-secondary); font-weight:400; font-size:13px; }
#icf-feedback-app .icf-field input[type="text"],#icf-feedback-app .icf-field input[type="email"],#icf-feedback-app .icf-field textarea,#icf-feedback-app .icf-field select {
    width:100% !important; padding:12px 16px !important; font-size:16px !important; border:1px solid var(--icf-border) !important;
    border-radius:calc(var(--icf-radius) - 2px) !important; background:var(--icf-bg-input) !important; color:var(--icf-text) !important;
    font-family:inherit; transition:border-color 0.2s,box-shadow 0.2s; -webkit-appearance:none; appearance:none;
}
#icf-feedback-app .icf-field select { 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='%2386868b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px !important; position:relative; z-index:2; }
#icf-feedback-app .icf-field { position:relative; overflow:visible !important; }
#icf-feedback-app .icf-field input:focus,#icf-feedback-app .icf-field textarea:focus,#icf-feedback-app .icf-field select:focus { outline:none; border-color:var(--icf-primary) !important; box-shadow:0 0 0 3px rgba(52,152,219,0.15) !important; background:var(--icf-bg-card) !important; }
#icf-feedback-app .icf-field textarea { resize:vertical; min-height:120px; }
#icf-feedback-app .icf-hint { font-size:13px; color:var(--icf-text-secondary); margin:6px 0 0; }
#icf-feedback-app .icf-hint a { color:var(--icf-primary); text-decoration:none; }
#icf-feedback-app .icf-hint a:hover { text-decoration:underline; }
#icf-feedback-app .icf-right { text-align:right; }

/* Input group */
#icf-feedback-app .icf-input-group { display:flex; gap:10px; }
#icf-feedback-app .icf-input-group input { flex:1; }
#icf-feedback-app .icf-input-group button { padding:12px 24px; font-size:15px; font-weight:600; border:none; border-radius:calc(var(--icf-radius) - 2px); background:var(--icf-primary); color:#fff; cursor:pointer; white-space:nowrap; transition:background 0.2s; }
#icf-feedback-app .icf-input-group button:hover { background:var(--icf-primary-hover); }
#icf-feedback-app .icf-input-group button:disabled { opacity:0.5; cursor:not-allowed; }

/* Row layout */
#icf-feedback-app .icf-row { display:flex; gap:16px; }
#icf-feedback-app .icf-half { flex:1; }
@media(max-width:600px){ #icf-feedback-app .icf-row{flex-direction:column;gap:0;} }

/* Messages */
#icf-feedback-app .icf-message { padding:14px 20px; border-radius:calc(var(--icf-radius) - 2px); font-size:15px; margin-top:16px; line-height:1.5; }
#icf-feedback-app .icf-msg-success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
#icf-feedback-app .icf-msg-error { background:#fdecea; color:#c62828; border:1px solid #ef9a9a; }

/* Verified badge */
#icf-feedback-app .icf-verified-badge { background:#e8f5e9; color:#2e7d32; padding:12px 20px; border-radius:calc(var(--icf-radius) - 2px); font-size:15px; margin-bottom:24px; text-align:center; }

/* Info boxes */
#icf-feedback-app .icf-info-box { background:var(--icf-bg-input); border-left:4px solid var(--icf-primary); padding:16px 20px; border-radius:8px; margin-bottom:20px; font-size:15px; }
#icf-feedback-app .icf-info-box.icf-info-green { border-left-color:var(--icf-success); }
#icf-feedback-app .icf-info-box strong { display:block; margin-bottom:8px; }
#icf-feedback-app .icf-info-box ol { margin:0; padding-left:20px; }
#icf-feedback-app .icf-info-box ol li { margin-bottom:4px; }

/* Dropzone */
#icf-feedback-app .icf-dropzone { border:2px dashed var(--icf-border); border-radius:var(--icf-radius); padding:32px; text-align:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; }
#icf-feedback-app .icf-dropzone:hover,.icf-dropzone-active { border-color:var(--icf-primary); background:#f0f7ff; }
#icf-feedback-app .icf-dropzone-icon { font-size:28px; }
#icf-feedback-app .icf-dropzone p { margin:8px 0 0; font-size:15px; color:var(--icf-text-secondary); }
#icf-feedback-app .icf-file-label { color:var(--icf-primary); font-weight:600; cursor:pointer; text-decoration:underline; }
#icf-feedback-app .icf-file-list { margin-top:12px; }
#icf-feedback-app .icf-file-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--icf-bg-input); border-radius:8px; margin-bottom:8px; font-size:14px; }
#icf-feedback-app .icf-file-name { flex:1; }
#icf-feedback-app .icf-file-error { color:var(--icf-error); }
#icf-feedback-app .icf-file-status { color:var(--icf-text-secondary); font-size:13px; }
#icf-feedback-app .icf-file-remove { background:none; border:none; font-size:20px; color:#95a5a6; cursor:pointer; padding:0 4px; }
#icf-feedback-app .icf-file-remove:hover { color:var(--icf-error); }

/* Conduct */
#icf-feedback-app .icf-conduct { background:#fff8e1; border:1px solid #ffe082; border-radius:calc(var(--icf-radius) - 2px); padding:16px 20px; margin:24px 0; font-size:14px; color:#6d4c00; }
#icf-feedback-app .icf-conduct p { margin:0; }

/* Submit */
#icf-feedback-app .icf-submit-row { text-align:center; margin-top:8px; }
#icf-feedback-app .icf-submit-btn { display:inline-block; padding:16px 48px; font-size:17px; font-weight:600; border:none; border-radius:calc(var(--icf-radius) - 2px); background:var(--icf-primary); color:#fff; cursor:pointer; transition:background 0.2s,transform 0.1s; }
#icf-feedback-app .icf-submit-btn:hover { background:var(--icf-primary-hover); }
#icf-feedback-app .icf-submit-btn:active { transform:scale(0.98); }
#icf-feedback-app .icf-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Success */
#icf-feedback-app .icf-success-card { text-align:center; padding:48px 40px; margin-bottom:40px; }
#icf-feedback-app .icf-success-icon { font-size:56px; margin-bottom:16px; }
#icf-feedback-app .icf-success-card h2 { font-size:28px; font-weight:700; margin:0 0 8px; }
#icf-feedback-app .icf-reference-box { background:var(--icf-bg-input); border-radius:var(--icf-radius); padding:20px; display:inline-block; margin:24px 0; }
#icf-feedback-app .icf-ref-label { display:block; font-size:13px; color:var(--icf-text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
#icf-feedback-app .icf-ref-id { font-size:28px; font-weight:700; color:var(--icf-primary); letter-spacing:2px; }
#icf-feedback-app .icf-success-actions { display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
#icf-feedback-app .icf-btn-primary { padding:12px 28px; font-size:15px; font-weight:600; border:none; border-radius:calc(var(--icf-radius) - 2px); background:var(--icf-primary); color:#fff; cursor:pointer; text-decoration:none; }
#icf-feedback-app .icf-btn-primary:hover { background:var(--icf-primary-hover); }
#icf-feedback-app .icf-btn-outline { padding:12px 28px; font-size:15px; font-weight:600; border:2px solid var(--icf-border); border-radius:calc(var(--icf-radius) - 2px); background:transparent; color:var(--icf-text); cursor:pointer; text-decoration:none; }
#icf-feedback-app .icf-btn-outline:hover { border-color:var(--icf-primary); color:var(--icf-primary); }
#icf-feedback-app .icf-remaining { display:none; margin-top:16px; font-size:14px; color:var(--icf-warning); }

/* Responsive */
@media(max-width:640px){
    #icf-feedback-app.icf-wrap{padding:20px 16px;}
    #icf-feedback-app .icf-title{font-size:32px !important;}
    #icf-feedback-app .icf-subtitle{font-size:16px;}
    #icf-feedback-app .icf-type-cards{flex-direction:column;}
    #icf-feedback-app .icf-card,#icf-feedback-app .icf-success-card{padding:24px !important;}
    #icf-feedback-app .icf-input-group{flex-direction:column;}
    #icf-feedback-app .icf-input-group button{width:100%;}
    #icf-feedback-app .icf-row{flex-direction:column;gap:0;}
}