/* «الشكاوى والاقتراحات», builds on membership.css (hero, card, success icon). */

.fb-section{max-width:780px;}
.fb-card{padding:34px 34px 30px;}

.fb-step{display:flex; align-items:center; gap:10px; margin:28px 0 14px;}
.fb-card .fb-step:first-child{margin-top:0;}
.fb-step h3{margin:0; font-size:16.5px; font-weight:800; color:var(--text);}
.fb-step h3 em{font-style:normal; font-weight:600; font-size:12.5px; color:var(--text-faint);}
.fb-num{width:26px; height:26px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
	font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 4px 10px -3px rgba(30,90,220,.45);}

/* 1, complaint / suggestion */
.fb-types{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.fb-type{position:relative; display:flex; align-items:center; gap:14px; text-align:right; font-family:inherit; cursor:pointer;
	background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:16px 16px; transition:all .2s var(--ease);}
.fb-type:hover{border-color:var(--primary-light); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.fb-type-ic{width:50px; height:50px; flex:none; border-radius:15px; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);}
.fb-type-ic svg{width:26px; height:26px;}
.fb-type-complaint .fb-type-ic{background:#FDECEC; color:#D9363E;}
.fb-type-suggestion .fb-type-ic{background:#FEF3DA; color:#C98A00;}
.fb-type-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.fb-type-txt b{font-size:16px; font-weight:800; color:var(--text);}
.fb-type-txt small{font-size:12.5px; color:var(--text-soft); line-height:1.6;}
.fb-type-complaint.active{border-color:#E5484D; background:#FFF7F7; box-shadow:0 0 0 4px rgba(229,72,77,.10);}
.fb-type-complaint.active .fb-type-ic{background:#E5484D; color:#fff;}
.fb-type-suggestion.active{border-color:#E0A100; background:#FFFCF3; box-shadow:0 0 0 4px rgba(232,161,0,.12);}
.fb-type-suggestion.active .fb-type-ic{background:#E8A100; color:#fff;}

.fb-check{position:absolute; top:10px; left:10px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--primary); color:#fff; opacity:0; transform:scale(.6); transition:all .2s var(--ease);}
.fb-check svg{width:13px; height:13px;}
.active > .fb-check{opacity:1; transform:scale(1);}
.fb-type-complaint .fb-check{background:#E5484D;}
.fb-type-suggestion .fb-check{background:#E8A100;}

/* 2, branch */
.fb-branches{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px;}
.fb-branch{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:right; font-family:inherit; cursor:pointer;
	background:var(--surface-2); border:1.5px solid var(--border); border-radius:14px; padding:12px 14px 11px; transition:all .2s var(--ease);}
.fb-branch:hover{border-color:var(--primary-light); background:#fff;}
.fb-branch b{font-size:14px; font-weight:800; color:var(--text);}
.fb-branch small{font-size:11.5px; color:var(--text-faint); font-weight:600;}
.fb-branch.active{border-color:var(--primary); background:#EEF4FF; box-shadow:0 0 0 4px rgba(30,90,220,.10);}
.fb-branch.active b{color:var(--primary-dark);}
.fb-branch .fb-check{top:50%; margin-top:-11px; left:12px;}
.fb-branch-general{border-style:dashed;}

/* 3, text */
.fb-textarea{position:relative;}
.fb-textarea textarea{width:100%; box-sizing:border-box; min-height:160px; resize:vertical; font-family:inherit; font-size:14.5px; line-height:1.85; color:var(--text);
	background:var(--surface-2); border:1.5px solid var(--border); border-radius:16px; padding:14px 16px 30px; transition:border-color .2s var(--ease), background .2s var(--ease);}
.fb-textarea textarea:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(30,90,220,.08);}
.fb-count{position:absolute; left:14px; bottom:10px; font-size:11.5px; font-weight:700; color:var(--text-faint); direction:ltr;}
.fb-count.over{color:var(--danger);}

/* 4, optional contact */
.fb-toggle{display:flex; align-items:center; gap:14px; cursor:pointer; padding:14px 16px; border:1.5px solid var(--border); border-radius:16px; background:var(--surface-2); transition:all .2s var(--ease); user-select:none;}
.fb-toggle:hover{border-color:var(--primary-light);}
.fb-toggle input{position:absolute; opacity:0; pointer-events:none;}
.fb-switch{position:relative; width:46px; height:26px; flex:none; border-radius:999px; background:#CBD5E5; transition:background .2s var(--ease);}
.fb-switch::after{content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(10,30,70,.25); transition:transform .2s var(--ease);}
.fb-toggle input:checked + .fb-switch{background:linear-gradient(135deg,var(--primary),var(--accent));}
.fb-toggle input:checked + .fb-switch::after{transform:translateX(-20px);}
.fb-toggle input:focus-visible + .fb-switch{outline:3px solid rgba(30,90,220,.35); outline-offset:2px;}
.fb-toggle-txt{display:flex; flex-direction:column; gap:2px;}
.fb-toggle-txt b{font-size:14px; font-weight:800; color:var(--text);}
.fb-toggle-txt small{font-size:12px; color:var(--text-soft);}
.fb-contact{margin-top:14px; padding:18px 16px 6px; border-radius:16px; background:#F7FAFF; border:1px solid var(--border-soft); animation:fbSlide .25s var(--ease);}
.fb-contact .form-grid{margin:0;}
.fb-contact #fbEmail{direction:ltr; text-align:right;}
.fb-hint{font-size:12px; color:var(--text-faint); margin:10px 2px 8px; line-height:1.7;}
@keyframes fbSlide{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* honeypot: off-screen, never shown to people */
.fb-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* send */
.fb-card .mem-apply-error{margin:20px 0 0;}
.fb-submit{margin-top:24px; height:54px; font-size:16px; gap:10px;}
.fb-submit svg{width:19px; height:19px;}
.fb-submit.is-sending{opacity:.75; pointer-events:none;}
.fb-anon-note{display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 0; font-size:12px; color:var(--text-faint); font-weight:600; text-align:center;}
.fb-anon-note svg{width:14px; height:14px; flex:none;}

/* thank-you */
.fb-success{text-align:center; padding:10px 0 4px;}
.fb-success h3{margin:0 0 8px; font-size:21px; font-weight:800;}
.fb-success-text{color:var(--text-soft); font-size:14px; line-height:1.9; margin:0 auto 18px; max-width:460px;}
.fb-success-ref{display:inline-flex; flex-direction:column; gap:2px; padding:10px 28px; border-radius:14px; background:var(--surface-2); border:1px dashed #C5D3EE; margin-bottom:22px;}
.fb-success-ref span{font-size:11.5px; color:var(--text-faint); font-weight:700;}
.fb-success-ref b{font-size:22px; font-weight:800; color:var(--primary-dark); letter-spacing:1px;}
.fb-success-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}

/* urgent: WhatsApp cards */
.fb-urgent{padding-top:10px; max-width:1100px;}

@media (max-width:640px){
	.fb-card{padding:24px 16px 22px;}
	.fb-types{grid-template-columns:1fr;}
	.fb-branches{grid-template-columns:1fr 1fr;}
	.fb-step{margin-top:24px;}
}
@media (max-width:380px){
	.fb-branches{grid-template-columns:1fr;}
}