/**
 * Wander Wise Pro — Social Layer (Slice 1) : Preferences styles
 */
.ww-profile-wrap {
	--ww-primary: var(--primary, #6B2FA0);
	--ww-gold: var(--gold, #D4A24C);
	--ww-ink: #241633;
	--ww-sub: #6E6180;
	--ww-mist: #F6F2FB;
	--ww-line: #EBE1F6;
}

/* Completion */
.ww-completion {
	background: #fff;
	border: 1px solid var(--ww-line);
	border-radius: 16px;
	padding: 1.1rem 1.25rem;
	margin: 1.25rem 0;
}
.ww-completion-label { font-weight: 700; color: var(--ww-ink); font-size: .98rem; }
.ww-progress {
	height: 10px; border-radius: 999px; background: var(--ww-mist);
	overflow: hidden; margin: .7rem 0;
}
.ww-progress-bar {
	display: block; height: 100%;
	background: linear-gradient(90deg, #3B1A5E, #6B2FA0, #D4A24C);
	border-radius: 999px; transition: width .4s ease;
}
.ww-completion-tips {
	list-style: none; margin: .5rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.ww-completion-tips li {
	font-size: .82rem; color: var(--ww-primary);
	background: var(--ww-mist); border-radius: 999px; padding: .25rem .7rem;
}
.ww-completion-tips li::before { content: "+ "; font-weight: 700; }

/* Read-only badges */
.ww-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.ww-badge {
	background: linear-gradient(135deg, #F2E9FB, #FBF3E2);
	color: #5B2C8C;
	border: 1px solid var(--ww-line);
	border-radius: 999px;
	padding: .35rem .85rem;
	font-size: .85rem; font-weight: 600;
}

/* Editable chips */
.ww-chip-set { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.ww-chip {
	background: #fff; border: 1.5px solid var(--ww-line);
	color: var(--ww-sub); border-radius: 999px;
	padding: .4rem .9rem; font: inherit; font-size: .88rem; font-weight: 600;
	cursor: pointer; transition: all .12s;
}
.ww-chip:hover { border-color: var(--ww-primary); color: var(--ww-primary); }
.ww-chip.is-selected {
	background: linear-gradient(135deg, #6B2FA0, #B0688F);
	border-color: transparent; color: #fff;
}

.ww-pref-section { margin-top: 1.75rem; }
.ww-pref-section .ww-section-title { margin-bottom: .25rem; }
.ww-pref-hint { color: var(--ww-sub); font-size: .85rem; margin: 0 0 .5rem; }

/* Save toast */
.ww-prefs-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
	background: #241633; color: #fff; padding: .6rem 1.2rem; border-radius: 999px;
	font-size: .9rem; font-weight: 600; opacity: 0; pointer-events: none;
	transition: opacity .2s, transform .2s; z-index: 9999;
}
.ww-prefs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Travel map + destinations (Slice 2) ──────────────────── */
.ww-travel-map { margin-top: 1rem; }
.ww-map-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.ww-stat {
	background: linear-gradient(150deg, #3B1A5E, #6B2FA0);
	color: #fff; border-radius: 16px; padding: 1rem .5rem; text-align: center;
}
.ww-stat-n { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; font-family: Georgia, serif; }
.ww-stat-l { display: block; font-size: .74rem; margin-top: .35rem; opacity: .9; letter-spacing: .3px; }

.ww-map-holder {
	background: var(--ww-mist, #F6F2FB);
	border: 1px solid var(--ww-line, #EBE1F6);
	border-radius: 18px; padding: 1rem; margin-bottom: 1.5rem;
}
.ww-india-map { width: 100%; height: auto; display: block; max-height: 460px; }
.ww-india-map .ww-state {
	fill: #E4D8F2; stroke: #fff; stroke-width: 0.8; transition: fill .2s;
}
.ww-india-map .ww-state.is-visited { fill: #6B2FA0; }
.ww-india-map .ww-state:hover { fill: #B0688F; }

.ww-dest-title {
	font-family: Georgia, serif; font-size: 1.1rem; color: var(--ww-ink, #241633); margin: 1.25rem 0 .35rem;
}
.ww-dest-editor { margin-bottom: 1rem; }
.ww-dest-search-wrap { position: relative; }
.ww-dest-search {
	width: 100%; box-sizing: border-box; border: 1px solid var(--ww-line, #EBE1F6);
	border-radius: 999px; padding: .55rem .95rem; font: inherit; font-size: .9rem; background: #fff;
}
.ww-dest-results {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
	background: #fff; border: 1px solid var(--ww-line, #EBE1F6); border-radius: 12px;
	box-shadow: 0 8px 24px rgba(74,29,115,.14); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.ww-dest-opt {
	display: block; width: 100%; text-align: left; background: none; border: none;
	padding: .55rem .85rem; font: inherit; font-size: .9rem; cursor: pointer; color: var(--ww-ink, #241633);
}
.ww-dest-opt:hover { background: var(--ww-mist, #F6F2FB); }

.ww-dest-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ww-dest-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	background: var(--ww-mist, #F6F2FB); border: 1px solid var(--ww-line, #EBE1F6);
	border-radius: 999px; padding: .35rem .5rem .35rem .85rem; font-size: .85rem; font-weight: 600; color: var(--ww-ink, #241633);
}
.ww-dest-x { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ww-sub, #6E6180); }
.ww-dest-x:hover { color: #B23B4E; }

.ww-dest-collection { margin-bottom: 1rem; }
.ww-dest-cards {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem;
}
.ww-dest-card {
	display: block; border: 1px solid var(--ww-line, #EBE1F6); border-radius: 14px;
	overflow: hidden; text-decoration: none; color: var(--ww-ink, #241633); background: #fff;
}
.ww-dest-thumb { display: block; height: 80px; background-size: cover; background-position: center; background-color: var(--ww-mist, #F6F2FB); }
.ww-dest-name { display: block; padding: .5rem .6rem 0; font-weight: 700; font-size: .88rem; }
.ww-dest-state { display: block; padding: 0 .6rem .5rem; font-size: .76rem; color: var(--ww-sub, #6E6180); }

@media (max-width: 480px) {
	.ww-stat-n { font-size: 1.5rem; }
	.ww-stat-l { font-size: .68rem; }
}

/* ── Public profile tabs + editorial polish (Slice 5) ─────── */
.ww-profile-pronouns { color: var(--ww-sub, #6E6180); font-size: .82rem; margin-left: .4rem; }
.ww-profile-tagline { margin: .35rem 0 .15rem; color: var(--ww-ink, #241633); font-size: .98rem; font-style: italic; }
.ww-profile-web { display: inline-block; margin-top: .25rem; color: var(--ww-primary, #6B2FA0); font-weight: 600; font-size: .85rem; text-decoration: none; }
.ww-about-text { color: var(--ww-ink, #241633); line-height: 1.65; }

.ww-ptabs {
	display: flex; gap: .3rem; margin: 1.5rem 0 1rem;
	border-bottom: 1px solid var(--ww-line, #EBE1F6);
}
.ww-ptab {
	background: none; border: none; cursor: pointer; font: inherit;
	font-size: .95rem; font-weight: 600; color: var(--ww-sub, #6E6180);
	padding: .6rem .9rem; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.ww-ptab.is-active { color: var(--ww-primary, #6B2FA0); border-bottom-color: var(--ww-primary, #6B2FA0); }
.ww-ppanel { display: none; }
.ww-ppanel.is-active { display: block; }