/* DSAND Smart Protein Calculator - Frontend Styles
   Mobile-first, glassmorphism, professional healthcare aesthetic. */

.dsand-pc-wrap {
	--dsand-primary: #704293;
	--dsand-primary-light: #9a6fc0;
	--dsand-secondary: #FFFFFF;
	--dsand-bg: #F7F3FB;
	--dsand-text: #2b2237;
	--dsand-muted: #766b85;
	--dsand-error: #d0483f;
	--dsand-radius: 18px;
	--dsand-shadow: 0 8px 30px rgba(112, 66, 147, 0.15);

	max-width: 720px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dsand-text);
	box-sizing: border-box;
}
.dsand-pc-wrap *, .dsand-pc-wrap *::before, .dsand-pc-wrap *::after { box-sizing: inherit; }

.dsand-pc-card {
	background: linear-gradient(155deg, rgba(255,255,255,0.85), rgba(247,243,251,0.65));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: var(--dsand-radius);
	box-shadow: var(--dsand-shadow);
	padding: 28px 22px;
	animation: dsandFadeUp 0.5s ease both;
}

@keyframes dsandFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.dsand-pc-title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	color: var(--dsand-primary);
}
.dsand-pc-subtitle {
	margin: 0 0 20px;
	color: var(--dsand-muted);
	font-size: 14px;
}

.dsand-pc-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 22px;
}
.dsand-pc-fieldset legend {
	font-weight: 600;
	color: var(--dsand-primary);
	font-size: 15px;
	padding: 0 0 10px;
	width: 100%;
	border-bottom: 1px solid rgba(112,66,147,0.15);
	margin-bottom: 14px;
}

.dsand-pc-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
@media (min-width: 560px) {
	.dsand-pc-row { grid-template-columns: 1fr 1fr; }
}

.dsand-pc-field { display: flex; flex-direction: column; }
.dsand-pc-field label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--dsand-text);
}
.dsand-pc-field input[type="text"],
.dsand-pc-field input[type="tel"],
.dsand-pc-field input[type="number"],
.dsand-pc-field select {
	appearance: none;
	border: 1.5px solid rgba(112,66,147,0.2);
	background: rgba(255,255,255,0.75);
	border-radius: 12px;
	padding: 11px 13px;
	font-size: 15px;
	color: var(--dsand-text);
	transition: border-color .2s ease, box-shadow .2s ease;
	width: 100%;
}
.dsand-pc-field input:focus,
.dsand-pc-field select:focus {
	outline: none;
	border-color: var(--dsand-primary);
	box-shadow: 0 0 0 4px rgba(112,66,147,0.12);
}
.dsand-pc-field input.dsand-pc-invalid,
.dsand-pc-field select.dsand-pc-invalid {
	border-color: var(--dsand-error);
}

.dsand-pc-field-inline { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }

.dsand-pc-error {
	color: var(--dsand-error);
	font-size: 12px;
	margin-top: 4px;
	min-height: 14px;
	display: block;
}

.dsand-pc-pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.dsand-pc-pill {
	position: relative;
	cursor: pointer;
}
.dsand-pc-pill input { position: absolute; opacity: 0; }
.dsand-pc-pill span {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid rgba(112,66,147,0.25);
	background: rgba(255,255,255,0.7);
	font-size: 13px;
	transition: all .2s ease;
}
.dsand-pc-pill input:checked + span {
	background: var(--dsand-primary);
	border-color: var(--dsand-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(112,66,147,0.35);
}

.dsand-pc-submit {
	position: relative;
	width: 100%;
	background: linear-gradient(135deg, var(--dsand-primary), var(--dsand-primary-light));
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 10px 24px rgba(112,66,147,0.35);
}
.dsand-pc-submit:hover { transform: translateY(-1px); }
.dsand-pc-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.dsand-pc-spinner {
	display: none;
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,0.5);
	border-top-color: #fff;
	border-radius: 50%;
	margin-left: 8px;
	vertical-align: -3px;
	animation: dsandSpin .7s linear infinite;
}
.dsand-pc-submit.is-loading .dsand-pc-spinner { display: inline-block; }
@keyframes dsandSpin { to { transform: rotate(360deg); } }

.dsand-pc-form-error {
	color: var(--dsand-error);
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
}

/* ---------- Modal ---------- */
.dsand-pc-modal[hidden] { display: none; }
.dsand-pc-modal {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.dsand-pc-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(43, 34, 55, 0.55);
	backdrop-filter: blur(3px);
	animation: dsandFade .2s ease both;
}
@keyframes dsandFade { from { opacity: 0; } to { opacity: 1; } }

.dsand-pc-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 20px;
	max-width: 640px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: 30px 22px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.3);
	animation: dsandPop .25s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes dsandPop { from { opacity:0; transform: scale(.92) translateY(10px);} to {opacity:1; transform: scale(1) translateY(0);} }

.dsand-pc-modal-close {
	position: absolute; top: 14px; right: 14px;
	background: rgba(112,66,147,0.1);
	border: none; border-radius: 50%;
	width: 34px; height: 34px;
	font-size: 20px; line-height: 1;
	cursor: pointer; color: var(--dsand-primary);
}

.dsand-pc-result-hero { text-align: center; margin-bottom: 20px; }
.dsand-pc-result-hero h2 { margin: 0 0 4px; color: var(--dsand-primary); font-size: 20px; }
.dsand-pc-result-big { font-size: 46px; font-weight: 800; color: var(--dsand-primary); line-height: 1; margin: 8px 0; }
.dsand-pc-result-big span { font-size: 16px; font-weight: 600; color: var(--dsand-muted); }

.dsand-pc-metric-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
	margin-bottom: 20px;
}
@media (min-width: 480px) { .dsand-pc-metric-grid { grid-template-columns: repeat(3, 1fr); } }
.dsand-pc-metric {
	background: var(--dsand-bg);
	border-radius: 14px;
	padding: 12px 10px;
	text-align: center;
}
.dsand-pc-metric .val { font-size: 18px; font-weight: 700; color: var(--dsand-primary); display:block; }
.dsand-pc-metric .lbl { font-size: 11px; color: var(--dsand-muted); }

.dsand-pc-section-title { font-size: 15px; font-weight: 700; color: var(--dsand-primary); margin: 22px 0 10px; }

.dsand-pc-advice-list { margin: 0; padding-left: 18px; font-size: 13.5px; }
.dsand-pc-advice-list li { margin-bottom: 6px; }

.dsand-pc-source-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 480px) { .dsand-pc-source-grid { grid-template-columns: repeat(3, 1fr); } }
.dsand-pc-source-card {
	background: rgba(112,66,147,0.06);
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	font-size: 12px;
}
.dsand-pc-source-card .name { font-weight: 700; display:block; margin-bottom: 2px; }

.dsand-pc-meal-plan { display: grid; gap: 8px; }
.dsand-pc-meal-row { display: flex; justify-content: space-between; background: var(--dsand-bg); border-radius: 10px; padding: 8px 12px; font-size: 13px; }

.dsand-pc-product-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .dsand-pc-product-grid { grid-template-columns: 1fr 1fr; } }
.dsand-pc-product-card {
	border: 1px solid rgba(112,66,147,0.15);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	display: flex; flex-direction: column;
}
.dsand-pc-product-card img { width: 100%; height: 130px; object-fit: cover; }
.dsand-pc-product-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dsand-pc-product-body .name { font-weight: 700; font-size: 13.5px; }
.dsand-pc-product-body .price { color: var(--dsand-primary); font-weight: 700; }
.dsand-pc-product-actions { display: flex; gap: 8px; margin-top: auto; }
.dsand-pc-product-actions a {
	flex: 1; text-align: center; text-decoration: none;
	padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
}
.dsand-pc-product-actions .add-cart { background: var(--dsand-primary); color: #fff; }
.dsand-pc-product-actions .buy-now { background: var(--dsand-bg); color: var(--dsand-primary); border: 1px solid var(--dsand-primary); }

.dsand-pc-share-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.dsand-pc-share-row a, .dsand-pc-share-row button {
	flex: 1; min-width: 140px; text-align: center; padding: 12px; border-radius: 12px;
	font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; border: none;
}
.dsand-pc-share-pdf { background: var(--dsand-bg); color: var(--dsand-primary); border: 1px solid var(--dsand-primary) !important; }
.dsand-pc-share-whatsapp { background: #25D366; color: #fff; }

.dsand-pc-disclaimer { font-size: 11px; color: var(--dsand-muted); margin-top: 16px; text-align: center; }