/* Sunnah Complaints — customer-facing styles.
   Colours inherit the theme's design tokens when present; fall back otherwise. */

.ss-comp-wrap{
	--c-forest: var(--forest, #0B3D2E);
	--c-leaf:   var(--leaf,   #1A6645);
	--c-sage:   var(--sage,   #4A8C6A);
	--c-mist:   var(--mist,   #EAF2EC);
	--c-cream:  var(--cream,  #F5F2ED);
	--c-gold:   var(--gold,   #C9A84C);
	--c-ink:    var(--ink,    #1C1C1E);
	--c-mid:    var(--mid,    #3A3A3C);
	--c-dust:   var(--dust,   #8A8A8E);
	--c-sh:     var(--sh, 0 2px 12px rgba(11,61,46,.07));
	--c-rlg:    var(--r-lg, .75rem);
	--c-rxl:    var(--r-xl, 1.125rem);
	display:flex; flex-direction:column; gap:1.25rem;
	color:var(--c-ink);
}

.ss-comp-card{
	background:#fff;
	border:1px solid var(--c-mist);
	border-radius:var(--c-rxl);
	box-shadow:var(--c-sh);
	padding:1.5rem;
}
.ss-comp-login{ text-align:center; }

.ss-comp-h{
	font-family:"Cormorant Garamond", Georgia, serif;
	font-size:1.6rem; font-weight:600; color:var(--c-forest);
	margin:0 0 .25rem;
}
.ss-comp-sub{ color:var(--c-mid); margin:0 0 1.25rem; font-size:.95rem; }

.ss-comp-form{ display:flex; flex-direction:column; gap:1rem; }
.ss-comp-field{ display:flex; flex-direction:column; gap:.35rem; }
.ss-comp-field label{ font-weight:600; font-size:.9rem; color:var(--c-forest); }
.ss-comp-opt{ font-weight:400; color:var(--c-dust); font-size:.82rem; }
.ss-comp-hint{ color:var(--c-dust); font-size:.8rem; }

.ss-comp-field input[type=text],
.ss-comp-field select,
.ss-comp-field textarea{
	width:100%; box-sizing:border-box;
	padding:.7rem .85rem;
	border:1.5px solid var(--c-mist);
	border-radius:var(--c-rlg);
	font-size:.95rem; font-family:inherit; color:var(--c-ink);
	background:var(--c-cream);
	transition:border-color .15s, box-shadow .15s;
}
.ss-comp-field input:focus,
.ss-comp-field select:focus,
.ss-comp-field textarea:focus{
	outline:none; border-color:var(--c-leaf);
	box-shadow:0 0 0 3px rgba(26,102,69,.12);
	background:#fff;
}

.ss-comp-previews{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.ss-comp-previews img{ width:64px; height:64px; object-fit:cover; border-radius:.5rem; border:1px solid var(--c-mist); }

/* honeypot: visually + a11y hidden but still in the DOM */
.ss-comp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ss-comp-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
	background:var(--c-forest); color:#fff;
	border:none; border-radius:999px;
	padding:.8rem 1.5rem; font-size:.98rem; font-weight:600;
	cursor:pointer; text-decoration:none;
	transition:background .15s, transform .05s;
}
.ss-comp-btn:hover{ background:var(--c-leaf); color:#fff; }
.ss-comp-btn:active{ transform:translateY(1px); }
.ss-comp-btn:disabled{ opacity:.6; cursor:not-allowed; }
.ss-comp-submit{ align-self:flex-start; }

.ss-comp-msg{ font-size:.9rem; margin-top:.25rem; }
.ss-comp-msg.is-ok{ color:var(--c-leaf); font-weight:600; }
.ss-comp-msg.is-err{ color:#b3261e; font-weight:600; }

/* ---- customer list ---- */
.ss-comp-empty{ color:var(--c-mid); }
.ss-comp-items{ display:flex; flex-direction:column; gap:1rem; }
.ss-comp-item{
	border:1px solid var(--c-mist);
	border-radius:var(--c-rlg);
	padding:1rem 1.1rem;
	background:var(--c-cream);
}
.ss-comp-item-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; flex-wrap:wrap; }
.ss-comp-ticket{ font-weight:700; color:var(--c-forest); margin-right:.5rem; }
.ss-comp-type{ color:var(--c-mid); font-size:.9rem; }
.ss-comp-item-meta{ display:flex; gap:.4rem; flex-wrap:wrap; color:var(--c-dust); font-size:.82rem; margin:.4rem 0; }
.ss-comp-desc{ margin:.5rem 0 0; color:var(--c-mid); font-size:.92rem; }

.ss-comp-resolution{
	margin-top:.6rem; padding:.6rem .75rem;
	background:var(--c-mist); border-radius:.5rem; font-size:.9rem;
}

/* status pills */
.ss-comp-pill{
	display:inline-block; padding:.28rem .7rem; border-radius:999px;
	font-size:.78rem; font-weight:600; white-space:nowrap;
}
.ss-pill-dust{ background:#eee; color:#555; }
.ss-pill-gold{ background:var(--c-gold); color:#3a2e00; }
.ss-pill-leaf{ background:var(--c-leaf); color:#fff; }
.ss-pill-mid{ background:#ddd; color:#333; }

/* SLA clock */
.ss-comp-sla{
	display:inline-flex; align-items:center; gap:.4rem;
	margin:.5rem 0; padding:.35rem .7rem; border-radius:.5rem;
	font-size:.85rem; font-weight:600;
}
.ss-comp-sla-label{ font-weight:500; }
.ss-sla-ok{ background:rgba(26,102,69,.1); color:var(--c-leaf); }
.ss-sla-urgent{ background:rgba(201,168,76,.18); color:#8a6d00; }
.ss-sla-overdue{ background:rgba(179,38,30,.1); color:#b3261e; }

/* timeline */
.ss-comp-timeline{ margin-top:.6rem; }
.ss-comp-timeline summary{ cursor:pointer; font-weight:600; color:var(--c-forest); font-size:.88rem; }
.ss-comp-timeline ul{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ss-comp-timeline li{ font-size:.85rem; }
.ss-comp-tl-time{ color:var(--c-dust); display:block; font-size:.78rem; }
.ss-comp-tl-text{ color:var(--c-mid); }

/* order-view chip */
.ss-comp-order-notice{
	display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
	margin:0 0 1.25rem; padding:.75rem 1rem;
	background:var(--mist,#EAF2EC); border-radius:.75rem;
}
.ss-comp-order-notice a{ color:var(--forest,#0B3D2E); font-weight:600; }

@media (max-width:1023px){
	.ss-comp-card{ padding:1.1rem; }
	.ss-comp-h{ font-size:1.4rem; }
}

/* Standalone endpoint wrapper (SS_COMP_STANDALONE) — matches the app-style account pages */
.ss-comp-standalone{ max-width:720px; margin:0 auto; padding:1rem 1rem 2.5rem; }
@media (max-width:1023px){ .ss-comp-standalone{ max-width:480px; padding:1rem .875rem 2rem; } }