/* ==========================================================================
   Greeting Card Print on Demand — Front-end Styles
   Themed to match H&A Print (haprint.com)
   Two Monkeys Web Design
   ========================================================================== */

/*
   H&A Print colour palette (extracted from site):
   --  Primary / nav dark teal-navy : #1b3a4b
   --  Primary hover / darker       : #122b39
   --  CTA orange                   : #e8622a
   --  CTA hover                    : #cf5422
   --  Body text                    : #1e2a30
   --  Muted text                   : #6b7c85
   --  Surface / light bg           : #f4f6f7
   --  Border                       : #dde3e6
   --  White                        : #ffffff
*/

:root {
	--gcpod-primary:        #1b3a4b;
	--gcpod-primary-dark:   #122b39;
	--gcpod-accent:         #e8622a;
	--gcpod-accent-hover:   #cf5422;
	--gcpod-surface:        #f4f6f7;
	--gcpod-border:         #dde3e6;
	--gcpod-text:           #1e2a30;
	--gcpod-muted:          #6b7c85;
	--gcpod-white:          #ffffff;
	--gcpod-selected-bg:    #eaf1f5;
	--gcpod-selected-ring:  #1b3a4b;
	--gcpod-radius:         6px;
	--gcpod-gap:            1.2rem;
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.gcpod-configurator {
	font-family: inherit;
	color: var(--gcpod-text);
	max-width: 680px;
	margin: 1.5rem 0;
}

/* ── Info strip ───────────────────────────────────────────────────────── */
.gcpod-info-strip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--gcpod-primary);
	color: var(--gcpod-white);
	border-radius: var(--gcpod-radius);
	padding: 0.6rem 1rem;
	margin-bottom: var(--gcpod-gap);
	font-size: 0.85rem;
}
.gcpod-size-badge {
	background: var(--gcpod-accent);
	color: var(--gcpod-white);
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 10px;
	white-space: nowrap;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}
.gcpod-info-note { opacity: 0.88; }

/* ── Section ──────────────────────────────────────────────────────────── */
.gcpod-section {
	background: var(--gcpod-white);
	border: 1px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	padding: 1.1rem 1.25rem;
	margin-bottom: var(--gcpod-gap);
}
.gcpod-section-title,
legend.gcpod-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.93rem;
	font-weight: 700;
	color: var(--gcpod-primary);
	border: none;
	padding: 0;
	margin: 0 0 0.9rem 0;
	float: none;
	width: 100%;
	letter-spacing: 0.01em;
}
.gcpod-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	background: var(--gcpod-accent);
	color: var(--gcpod-white);
	font-size: 0.76rem;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Stock cards ──────────────────────────────────────────────────────── */
.gcpod-stock-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
}
.gcpod-stock-card {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	border: 2px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	padding: 0.75rem 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	position: relative;
	background: var(--gcpod-white);
}
.gcpod-stock-card input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--gcpod-primary);
}
.gcpod-stock-inner strong { display: block; font-size: 0.88rem; color: var(--gcpod-text); }
.gcpod-stock-inner em     { display: block; font-size: 0.77rem; color: var(--gcpod-muted); font-style: normal; margin-top: 1px; }
.gcpod-check-icon {
	margin-left: auto;
	color: var(--gcpod-accent);
	font-size: 1rem;
	opacity: 0;
	transition: opacity 0.15s;
	font-weight: 700;
}
.gcpod-stock-card--selected {
	border-color: var(--gcpod-primary);
	background: var(--gcpod-selected-bg);
}
.gcpod-stock-card--selected .gcpod-check-icon { opacity: 1; }

/* ── Sides cards ──────────────────────────────────────────────────────── */
.gcpod-sides-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
}
.gcpod-sides-card {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	border: 2px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	padding: 0.7rem 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	background: var(--gcpod-white);
	font-size: 0.88rem;
}
.gcpod-sides-card input[type="radio"] {
	margin-bottom: 0.2rem;
	accent-color: var(--gcpod-primary);
}
.gcpod-sides-card span { font-weight: 700; color: var(--gcpod-text); font-size: 0.88rem; }
.gcpod-sides-card em   { font-size: 0.76rem; color: var(--gcpod-muted); font-style: normal; }
.gcpod-sides-card--selected {
	border-color: var(--gcpod-primary);
	background: var(--gcpod-selected-bg);
}

/* ── Quantity row ─────────────────────────────────────────────────────── */
.gcpod-qty-row {
	display: flex;
	align-items: flex-end;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.gcpod-qty-input {
	width: 90px;
	padding: 0.5rem 0.65rem;
	border: 2px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gcpod-primary);
	transition: border-color 0.15s;
	background: var(--gcpod-white);
	margin-bottom: 0;
}
.gcpod-qty-input:focus { border-color: var(--gcpod-primary); outline: none; }

.gcpod-price-display,
.gcpod-total-display {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.gcpod-unit-price-label,
.gcpod-total-label {
	font-size: 0.7rem;
	color: var(--gcpod-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	line-height: 1.4;
	height: 1rem;
}
.gcpod-unit-price {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--gcpod-primary);
	line-height: 1;
}
.gcpod-unit-each {
	font-size: 0.72rem;
	color: var(--gcpod-muted);
	margin-top: 2px;
}
.gcpod-total-price {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--gcpod-accent);
	line-height: 1;
}

/* ── Tier table ───────────────────────────────────────────────────────── */
.gcpod-tier-table {
	border: 1px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	overflow: hidden;
	font-size: 0.77rem;
}
.gcpod-tier-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.gcpod-tier-row > span {
	padding: 0.35rem 0.55rem;
	border-right: 1px solid var(--gcpod-border);
	border-bottom: 1px solid var(--gcpod-border);
	color: var(--gcpod-text);
}
.gcpod-tier-row > span:last-child { border-right: none; }
.gcpod-tier-row:last-child > span { border-bottom: none; }
.gcpod-tier-header {
	background: var(--gcpod-primary);
}
.gcpod-tier-header > span {
	color: var(--gcpod-white) !important;
	font-weight: 700;
	border-color: rgba(255,255,255,0.15);
}
.gcpod-tier-row--active {
	background: #fdf0ea;
}
.gcpod-tier-row--active > span {
	font-weight: 700;
	color: var(--gcpod-accent) !important;
}

/* ── Upload zone ──────────────────────────────────────────────────────── */
.gcpod-upload-zone {
	border: 2px dashed var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	padding: 1.5rem 1rem;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s, background 0.2s;
	background: var(--gcpod-surface);
}
.gcpod-upload-zone:hover,
.gcpod-upload-zone.gcpod-drag-over {
	border-color: var(--gcpod-primary);
	background: var(--gcpod-selected-bg);
}
.gcpod-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}
.gcpod-upload-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	color: var(--gcpod-muted);
	pointer-events: none;
}
.gcpod-upload-label svg { color: var(--gcpod-primary); opacity: 0.55; }
.gcpod-upload-label strong { font-size: 0.88rem; color: var(--gcpod-text); }
.gcpod-upload-label span  { font-size: 0.77rem; }

.gcpod-upload-status {
	margin-top: 0.6rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--gcpod-radius);
	font-size: 0.83rem;
}
.gcpod-upload-status.is-uploading { background: #fef3ee; color: #a0400e; }
.gcpod-upload-status.is-success   { background: #eaf1f5; color: var(--gcpod-primary); font-weight: 600; }
.gcpod-upload-status.is-error     { background: #fdecea; color: #b91c1c; }

/* ── Add-on rows ──────────────────────────────────────────────────────── */
.gcpod-addon-row {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.65rem;
	cursor: pointer;
}
.gcpod-addon-row:last-child { margin-bottom: 0; }
.gcpod-addon-row input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--gcpod-primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.gcpod-addon-label {
	display: flex;
	flex-direction: column;
	font-size: 0.88rem;
	color: var(--gcpod-text);
}
.gcpod-addon-label em {
	font-style: normal;
	font-size: 0.77rem;
	color: var(--gcpod-muted);
}

/* ── Comments textarea ────────────────────────────────────────────────── */
.gcpod-field-hint {
	font-size: 0.82rem;
	color: var(--gcpod-muted);
	margin: 0 0 0.6rem;
	line-height: 1.5;
}
.gcpod-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--gcpod-text);
}
.gcpod-textarea {
	width: 100%;
	border: 2px solid var(--gcpod-border);
	border-radius: var(--gcpod-radius);
	padding: 0.55rem 0.7rem;
	font-size: 0.86rem;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.15s;
	box-sizing: border-box;
	color: var(--gcpod-text);
	background: var(--gcpod-white);
}
.gcpod-textarea:focus { border-color: var(--gcpod-primary); outline: none; }

/* ── Summary bar ──────────────────────────────────────────────────────── */
.gcpod-summary-bar {
	background: var(--gcpod-primary);
	color: var(--gcpod-white);
	border-radius: var(--gcpod-radius);
	padding: 0.85rem 1.1rem;
	margin-bottom: 1rem;
}
.gcpod-summary-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
}
#gcpod-summary-price {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--gcpod-accent);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 520px) {
	.gcpod-stock-options,
	.gcpod-sides-options { grid-template-columns: 1fr; }
	.gcpod-tier-row { font-size: 0.7rem; }
	.gcpod-qty-row  { flex-direction: column; align-items: flex-start; }
}