/* =========================================================
   Webitjo Invitations — customer dashboard and plans
   Stationery palette: ink, paper, gold leaf.
   ========================================================= */

.wjd {
	--wjd-ink: #1B1A17;
	--wjd-paper: #F7F4EE;
	--wjd-muted: #857E72;
	--wjd-gold: #B8944F;
	--wjd-line: rgba(27, 26, 23, .13);
	--wjd-surface: #FFFDF9;
	--wjd-pine: #2F4F4A;
	--wjd-danger: #A33A2E;

	direction: rtl;
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: var(--wjd-ink);
	font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.8;
	text-align: right;
}

.wjd *,
.wjd *::before,
.wjd *::after { box-sizing: border-box; }

/* ---------- headings ---------- */

.wjd-title {
	margin: 0;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: clamp(24px, 5vw, 33px);
	font-weight: 400;
	line-height: 1.5;
}

.wjd-sub {
	margin: 6px 0 0;
	color: var(--wjd-muted);
	font-size: .93rem;
}

.wjd-head { margin-bottom: 28px; }

.wjd-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}

.wjd-back {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--wjd-muted);
	font-size: .86rem;
	text-decoration: none;
}

.wjd-back:hover { color: var(--wjd-ink); }

.wjd-group { margin-bottom: 32px; }

.wjd-group-title {
	margin: 0 0 13px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wjd-gold);
}

/* ---------- buttons ---------- */

.wjd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: .88rem;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .18s ease, background .18s ease;
	white-space: nowrap;
}

.wjd-btn:hover { opacity: .87; }

.wjd-btn-solid {
	background: var(--wjd-ink);
	border-color: var(--wjd-ink);
	color: #FFFDF9;
}

.wjd-btn-ghost {
	background: transparent;
	border-color: var(--wjd-line);
	color: var(--wjd-ink);
}

.wjd-btn-ghost:hover { background: rgba(27, 26, 23, .04); }

.wjd-btn-danger {
	background: transparent;
	border-color: rgba(163, 58, 46, .35);
	color: var(--wjd-danger);
}

.wjd-btn-wide { width: 100%; }

.wjd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- flashes ---------- */

.wjd-flash {
	margin: 0 0 20px;
	padding: 13px 17px;
	border-radius: 12px;
	font-size: .9rem;
}

.wjd-flash.is-error {
	background: rgba(163, 58, 46, .09);
	border: 1px solid rgba(163, 58, 46, .28);
}

.wjd-flash.is-ok {
	background: rgba(47, 79, 74, .09);
	border: 1px solid rgba(47, 79, 74, .26);
}

.wjd-flash a { color: inherit; }

.wjd-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding: 15px 19px;
	border: 1px solid rgba(184, 148, 79, .34);
	border-radius: 14px;
	background: rgba(184, 148, 79, .08);
}

.wjd-banner p { margin: 0; font-size: .92rem; }
.wjd-banner.is-warn {
	border-color: rgba(163, 58, 46, .3);
	background: rgba(163, 58, 46, .06);
}

.wjd-note {
	margin: 26px 0 0;
	color: var(--wjd-muted);
	font-size: .86rem;
	text-align: center;
}

.wjd-muted { color: var(--wjd-muted); }

/* ---------- plans ---------- */

.wjd-plans .wjd-head { text-align: center; }

.wjd-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	max-width: 780px;
	margin: 0 auto;
}

.wjd-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 26px;
	border: 1px solid var(--wjd-line);
	border-radius: 20px;
	background: var(--wjd-surface);
}

.wjd-plan.is-popular {
	border-color: var(--wjd-gold);
	box-shadow: 0 0 0 1px var(--wjd-gold) inset;
}

.wjd-plan-badge {
	position: absolute;
	top: -12px;
	inset-inline-start: 26px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--wjd-gold);
	color: #fff;
	font-size: .72rem;
}

.wjd-plan-name {
	margin: 0;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.6rem;
	font-weight: 400;
}

.wjd-plan-tag {
	margin: 4px 0 18px;
	color: var(--wjd-muted);
	font-size: .87rem;
}

.wjd-plan-price {
	margin: 0;
	font-size: 2.1rem;
	line-height: 1.3;
}

.wjd-plan-price .woocommerce-Price-amount { font-weight: 400; }

.wjd-plan-quota {
	margin: 2px 0 20px;
	color: var(--wjd-muted);
	font-size: .85rem;
}

.wjd-plan-features {
	flex: 1;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wjd-line);
	padding-top: 18px;
}

.wjd-plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 9px;
	font-size: .88rem;
}

.wjd-plan-features li span {
	flex: none;
	width: 17px;
	color: var(--wjd-gold);
	text-align: center;
}

.wjd-plan-features li.no {
	color: var(--wjd-muted);
	opacity: .72;
}

.wjd-plan-features li.no span { color: var(--wjd-muted); }

/* ---------- empty state ---------- */

.wjd-empty {
	padding: 54px 26px;
	border: 1px dashed var(--wjd-line);
	border-radius: 18px;
	background: rgba(255, 253, 249, .6);
	text-align: center;
}

.wjd-empty-title {
	margin: 0 0 6px;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.35rem;
}

.wjd-empty p { margin: 0 0 18px; color: var(--wjd-muted); }

.wjd-wall { text-align: center; padding: 48px 20px; }
.wjd-wall p { margin-bottom: 20px; }

/* ---------- invitation cards ---------- */

.wjd-cards { display: grid; gap: 16px; }

.wjd-card {
	display: grid;
	grid-template-columns: 128px 1fr;
	border: 1px solid var(--wjd-line);
	border-radius: 18px;
	background: var(--wjd-surface);
	overflow: hidden;
}

.wjd-card-swatch {
	display: grid;
	place-items: center;
	padding: 18px 12px;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.5;
	min-height: 132px;
}

.wjd-card-body { padding: 18px 20px; }

.wjd-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wjd-card-title {
	margin: 0;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.18rem;
	font-weight: 400;
	line-height: 1.6;
}

.wjd-card-meta {
	margin: 3px 0 12px;
	color: var(--wjd-muted);
	font-size: .82rem;
}

.wjd-badge {
	flex: none;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .74rem;
	line-height: 1.7;
}

.wjd-badge.is-live { background: rgba(47, 79, 74, .12); color: var(--wjd-pine); }
.wjd-badge.is-draft { background: rgba(184, 148, 79, .16); color: #8A6A22; }
.wjd-badge.is-off { background: rgba(27, 26, 23, .07); color: var(--wjd-muted); }

.wjd-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 12px;
	color: var(--wjd-muted);
	font-size: .82rem;
}

.wjd-stats b { color: var(--wjd-ink); font-weight: 600; }
.wjd-stats .is-alert b { color: var(--wjd-danger); }

.wjd-link {
	display: flex;
	gap: 6px;
	margin-bottom: 13px;
}

.wjd-link input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--wjd-line);
	border-radius: 9px;
	background: rgba(27, 26, 23, .03);
	color: var(--wjd-muted);
	font: inherit;
	font-size: .78rem;
	direction: ltr;
	text-align: left;
}

.wjd-copy {
	flex: none;
	padding: 8px 15px;
	border: 1px solid var(--wjd-line);
	border-radius: 9px;
	background: transparent;
	color: var(--wjd-ink);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
}

.wjd-copy:hover { background: rgba(27, 26, 23, .04); }

.wjd-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.wjd-card-actions .wjd-btn {
	padding: 7px 15px;
	font-size: .82rem;
}

/* ---------- occasion picker ---------- */

.wjd-occ-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 11px;
}

.wjd-occ {
	display: grid;
	gap: 3px;
	padding: 19px 18px;
	border: 1px solid var(--wjd-line);
	border-radius: 15px;
	background: var(--wjd-surface);
	color: var(--wjd-ink);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.wjd-occ:hover {
	border-color: var(--wjd-gold);
	transform: translateY(-2px);
}

.wjd-occ.is-solemn:hover { border-color: var(--wjd-muted); }

.wjd-occ-name {
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.12rem;
	line-height: 1.6;
}

.wjd-occ-count {
	color: var(--wjd-muted);
	font-size: .76rem;
}

/* ---------- template picker ---------- */

.wjd-tpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
}

.wjd-tpl {
	border: 1px solid var(--wjd-line);
	border-radius: 16px;
	background: var(--wjd-surface);
	overflow: hidden;
}

.wjd-tpl.is-locked { opacity: .68; }

.wjd-phone {
	position: relative;
	aspect-ratio: 9 / 15;
	display: grid;
	place-items: center;
	padding: 26px 16px;
	text-align: center;
}

.wjd-phone-notch {
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: currentColor;
	opacity: .18;
}

.wjd-phone-face { line-height: 1.6; }

.wjd-phone-kicker {
	margin: 0 0 10px;
	font-size: .62rem;
	opacity: .7;
	color: var(--wj-accent);
}

.wjd-phone-name {
	margin: 0;
	font-size: 1.24rem;
	line-height: 1.4;
}

.wjd-phone-amp {
	margin: 1px 0;
	font-size: .82rem;
	color: var(--wj-accent);
}

.wjd-phone-rule {
	display: block;
	width: 42px;
	height: 1px;
	margin: 12px auto;
	background: var(--wj-accent);
	opacity: .55;
}

.wjd-phone-date {
	margin: 0;
	font-size: .68rem;
	opacity: .6;
}

.wjd-tpl-badge {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: .6rem;
	font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.wjd-tpl-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding: 12px 14px;
	border-top: 1px solid var(--wjd-line);
}

.wjd-tpl-name { margin: 0; font-size: .93rem; }

.wjd-tpl-code {
	margin: 0;
	color: var(--wjd-muted);
	font-size: .72rem;
}

.wjd-tpl-foot .wjd-btn {
	padding: 6px 15px;
	font-size: .8rem;
}

/* ---------- manage: KPIs, table, wishes ---------- */

.wjd-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 11px;
	margin-bottom: 26px;
}

.wjd-kpi {
	padding: 17px 18px;
	border: 1px solid var(--wjd-line);
	border-radius: 14px;
	background: var(--wjd-surface);
}

.wjd-kpi b {
	display: block;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.85rem;
	font-weight: 400;
	line-height: 1.3;
}

.wjd-kpi span {
	color: var(--wjd-muted);
	font-size: .8rem;
}

.wjd-panel {
	margin-bottom: 26px;
	padding: 20px 22px;
	border: 1px solid var(--wjd-line);
	border-radius: 16px;
	background: var(--wjd-surface);
}

.wjd-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.wjd-panel-head h3 {
	margin: 0;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
}

.wjd-table-wrap { overflow-x: auto; }

.wjd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .86rem;
}

.wjd-table th,
.wjd-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--wjd-line);
	text-align: right;
	white-space: nowrap;
}

.wjd-table th {
	color: var(--wjd-muted);
	font-weight: 500;
	font-size: .78rem;
}

.wjd-yes { color: var(--wjd-pine); }
.wjd-no { color: var(--wjd-muted); }

.wjd-wishes {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.wjd-wish {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--wjd-line);
	border-radius: 13px;
}

.wjd-wish.is-pending { background: rgba(184, 148, 79, .07); }
.wjd-wish.is-spam { opacity: .5; }

.wjd-wish-body { margin: 0; font-size: .92rem; }

.wjd-wish-meta {
	margin: 4px 0 0;
	color: var(--wjd-muted);
	font-size: .76rem;
}

.wjd-wish-actions {
	display: flex;
	flex: none;
	gap: 6px;
}

.wjd-mini {
	padding: 5px 12px;
	border: 1px solid var(--wjd-line);
	border-radius: 999px;
	background: transparent;
	color: var(--wjd-ink);
	font: inherit;
	font-size: .76rem;
	cursor: pointer;
}

.wjd-mini:hover { background: rgba(27, 26, 23, .04); }

.wjd-mini.is-danger {
	color: var(--wjd-danger);
	border-color: rgba(163, 58, 46, .3);
}

/* ---------- focus ---------- */

.wjd a:focus-visible,
.wjd button:focus-visible,
.wjd input:focus-visible,
.wjd select:focus-visible,
.wjd textarea:focus-visible {
	outline: 2px solid var(--wjd-gold);
	outline-offset: 2px;
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	.wjd-card { grid-template-columns: 1fr; }
	.wjd-card-swatch { min-height: 108px; }
	.wjd-head-row { align-items: stretch; }
	.wjd-wish { flex-direction: column; }
	.wjd-wish-actions { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	.wjd * { transition-duration: .01ms !important; }
	.wjd-occ:hover { transform: none; }
}

/* ---------- upgrade offer ---------- */

.wjd-upgrade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 780px;
	margin: 0 auto 20px;
	padding: 20px 24px;
	border: 1px solid var(--wjd-gold);
	border-radius: 18px;
	background: rgba(184, 148, 79, .07);
}

.wjd-upgrade-text { flex: 1; min-width: 240px; }

.wjd-upgrade h3 {
	margin: 0 0 5px;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6;
}

.wjd-upgrade p {
	margin: 0;
	color: var(--wjd-muted);
	font-size: .88rem;
}

/* =========================================================
   Sign in / sign up
   ========================================================= */

.wja { max-width: 980px; padding-block: 46px; }

.wja-split {
	display: grid;
	grid-template-columns: 1fr 360px;
	border: 1px solid var(--wjd-line);
	border-radius: 22px;
	overflow: hidden;
	background: var(--wjd-surface);
}

.wja-main { padding: 44px 40px 36px; }

.wja-aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding: 44px 34px;
	background: var(--wjd-ink);
	color: var(--wjd-paper);
}

.wja-seal { width: 70px; height: 70px; }

.wja-aside h3 {
	margin: 0;
	font-family: 'Aref Ruqaa', Georgia, serif;
	font-size: 1.42rem;
	font-weight: 400;
	line-height: 1.5;
}

.wja-aside > div > p {
	margin: 6px 0 0;
	color: rgba(247, 244, 238, .62);
	font-size: .9rem;
}

.wja-list {
	display: grid;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid rgba(247, 244, 238, .18);
}

.wja-item b { display: block; font-weight: 500; font-size: .93rem; }
.wja-item span { color: rgba(247, 244, 238, .55); font-size: .83rem; }

@media (max-width: 820px) {
	.wja { max-width: 520px; }
	.wja-split { grid-template-columns: 1fr; }
	.wja-aside { order: 2; padding: 32px 28px; }
	.wja-main { padding: 34px 26px 28px; }
}

.wja-card {
	padding: 34px 30px 28px;
	border: 1px solid var(--wjd-line);
	border-radius: 20px;
	background: var(--wjd-surface);
}

.wja-head { margin-bottom: 22px; }
.wja-head .wjd-title { font-size: 1.75rem; }

.wja-form { display: grid; gap: 15px; }

.wja-f { display: block; }

.wja-f > span {
	display: block;
	margin-bottom: 6px;
	color: var(--wjd-muted);
	font-size: .84rem;
}

.wja-f > span em { font-style: normal; opacity: .75; }

.wja-f input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--wjd-line);
	border-radius: 11px;
	background: #fff;
	color: var(--wjd-ink);
	font: inherit;
	font-size: .95rem;
}

.wja-f input:focus { outline: none; border-color: var(--wjd-gold); }

.wja-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.wja-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.wja-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .86rem;
	cursor: pointer;
}

.wja-check input { accent-color: var(--wjd-gold); }

.wja-link,
.wja-alt a { color: var(--wjd-gold); font-size: .85rem; }

.wja-hint { margin: -4px 0 0; color: var(--wjd-muted); font-size: .78rem; }

.wja-alt {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--wjd-line);
	color: var(--wjd-muted);
	font-size: .88rem;
	text-align: center;
}

.wja-actions { display: grid; gap: 9px; margin-top: 20px; }

@media (max-width: 480px) {
	.wja-row2 { grid-template-columns: 1fr; }
}

/* =========================================================
   Public template gallery
   ========================================================= */

.wjg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wjd-line);
}

.wjg-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border: 1px solid var(--wjd-line);
	border-radius: 999px;
	background: var(--wjd-surface);
	color: var(--wjd-ink);
	font-size: .86rem;
	text-decoration: none;
	transition: border-color .18s ease;
}

.wjg-chip span { color: var(--wjd-muted); font-size: .76rem; }
.wjg-chip:hover { border-color: var(--wjd-gold); }

.wjg-chip.is-on {
	background: var(--wjd-ink);
	border-color: var(--wjd-ink);
	color: #FFFDF9;
}

.wjg-chip.is-on span { color: rgba(255, 253, 249, .6); }
.wjg-chip.is-solemn:hover { border-color: var(--wjd-muted); }
.wjg-chip.is-solemn.is-on { background: var(--wjd-pine); border-color: var(--wjd-pine); }

.wjg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
}

.wjg-card {
	border: 1px solid var(--wjd-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--wjd-surface);
}

.wjg-face {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 15;
	padding: 26px 16px;
	text-align: center;
	text-decoration: none;
	background-position: center;
	background-size: cover;
}

.wjg-notch {
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: currentColor;
	opacity: .18;
}

.wjg-face-inner { line-height: 1.6; }

.wjg-kicker {
	display: block;
	margin-bottom: 10px;
	color: var(--wj-accent);
	font-size: .64rem;
	opacity: .85;
}

.wjg-name { display: block; font-size: 1.3rem; line-height: 1.4; }

.wjg-rule {
	display: block;
	width: 42px;
	height: 1px;
	margin: 12px auto;
	background: var(--wj-accent);
	opacity: .55;
}

.wjg-date { display: block; font-size: .68rem; opacity: .6; }

.wjg-badge {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .38);
	color: #fff;
	font-family: 'IBM Plex Sans Arabic', sans-serif;
	font-size: .62rem;
}

.wjg-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--wjd-line);
}

.wjg-title { margin: 0; font-size: .93rem; }
.wjg-meta { margin: 0; color: var(--wjd-muted); font-size: .72rem; }
.wjg-foot .wjd-btn { padding: 6px 15px; font-size: .8rem; }

.wjg-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 32px;
	padding: 20px 24px;
	border: 1px solid var(--wjd-gold);
	border-radius: 18px;
	background: rgba(184, 148, 79, .07);
}

.wjg-cta p { margin: 0; font-size: .92rem; }