/* ==========================================================================
   Single Page Checkout Builder — Frontend Styles
   Mobile-first approach: base styles = mobile, then enhance with min-width
   ========================================================================== */

:root {
	--spcb-primary: #1d3557;
	--spcb-cta: #e63946;
	--spcb-bg-light: #f8f9fb;
	--spcb-text: #222;
	--spcb-muted: #666;
	--spcb-border: #e5e7eb;
	--spcb-radius: 10px;
}

.spcb-landing-wrap * { box-sizing: border-box; }

.spcb-landing-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", "Noto Sans Bengali", sans-serif;
	color: var(--spcb-text);
	font-size: 16px; /* prevents iOS auto-zoom on inputs */
	line-height: 1.55;
	padding-bottom: 70px; /* space for mobile sticky bar */
}

.spcb-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}

.spcb-section-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
	text-align: center;
	color: var(--spcb-primary);
}

/* ============ HERO ============ */
.spcb-hero {
	background: linear-gradient(180deg, #fff 0%, var(--spcb-bg-light) 100%);
	padding: 20px 0 28px;
}
.spcb-hero-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.spcb-hero-image {
	position: relative;
	text-align: center;
}
.spcb-hero-image img {
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: var(--spcb-radius);
}
.spcb-badge-sale {
	position: absolute;
	top: 10px;
	right: calc(50% - 195px);
	background: var(--spcb-cta);
	color: #fff;
	padding: 6px 14px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 13px;
}
.spcb-hero-content { text-align: center; }
.spcb-headline {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 10px;
	color: var(--spcb-primary);
	line-height: 1.3;
}
.spcb-subheadline {
	font-size: 16px;
	color: var(--spcb-muted);
	margin: 0 0 16px;
}
.spcb-price-box {
	margin-bottom: 18px;
}
.spcb-price-old {
	text-decoration: line-through;
	color: #999;
	font-size: 16px;
	margin-right: 10px;
}
.spcb-price-new {
	font-size: 30px;
	font-weight: 800;
	color: var(--spcb-cta);
}
.spcb-stock-line {
	margin-top: 12px;
	font-size: 14px;
	color: var(--spcb-cta);
	font-weight: 600;
}

/* ============ CTA BUTTON (shared) ============ */
.spcb-btn-cta {
	display: inline-block;
	background: var(--spcb-cta);
	color: #fff !important;
	font-weight: 700;
	font-size: 17px;
	padding: 16px 28px;
	border-radius: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
	text-align: center;
	min-height: 44px; /* touch-target friendly */
}
.spcb-btn-cta:hover,
.spcb-btn-cta:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(230, 57, 70, 0.45);
	color: #fff;
}

/* ============ TRUST STRIP ============ */
.spcb-trust-strip {
	background: var(--spcb-primary);
	padding: 14px 0;
}
.spcb-trust-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
.spcb-trust-item {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

/* ============ URGENCY / COUNTDOWN ============ */
.spcb-urgency {
	background: #fff4f4;
	padding: 20px 0;
	text-align: center;
	border-top: 1px solid var(--spcb-border);
	border-bottom: 1px solid var(--spcb-border);
}
.spcb-urgency-label {
	font-weight: 700;
	color: var(--spcb-cta);
	margin: 0 0 10px;
}
.spcb-countdown {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.spcb-cd-box {
	background: var(--spcb-primary);
	color: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	min-width: 60px;
}
.spcb-cd-box span {
	display: block;
	font-size: 22px;
	font-weight: 800;
}
.spcb-cd-box small { font-size: 11px; opacity: .8; }

/* ============ BENEFITS ============ */
.spcb-benefits { padding: 32px 0; }
.spcb-benefits-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
}
.spcb-benefits-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	background: var(--spcb-bg-light);
	padding: 12px 14px;
	border-radius: 8px;
}
.spcb-check-icon {
	background: #2a9d8f;
	color: #fff;
	border-radius: 50%;
	width: 22px; height: 22px;
	min-width: 22px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

/* ============ DESCRIPTION ============ */
.spcb-description { padding: 20px 0 32px; }
.spcb-description-content { max-width: 700px; margin: 0 auto; font-size: 15px; color: var(--spcb-muted); }

/* ============ TESTIMONIALS ============ */
.spcb-testimonials { padding: 32px 0; background: var(--spcb-bg-light); }
.spcb-testimonial-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.spcb-testimonial-card {
	background: #fff;
	border-radius: var(--spcb-radius);
	padding: 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.spcb-stars { color: #ffb703; margin-bottom: 8px; font-size: 14px; }
.spcb-testimonial-text { font-size: 14px; color: var(--spcb-text); margin: 0 0 10px; }
.spcb-testimonial-name { font-size: 13px; color: var(--spcb-muted); font-weight: 600; margin: 0; }

/* ============ FAQ ============ */
.spcb-faq { padding: 32px 0; }
.spcb-faq-list { max-width: 700px; margin: 0 auto; }
.spcb-faq-item {
	border-bottom: 1px solid var(--spcb-border);
	padding: 12px 0;
}
.spcb-faq-item summary {
	font-weight: 700;
	cursor: pointer;
	font-size: 15px;
	color: var(--spcb-primary);
}
.spcb-faq-item p { margin: 10px 0 0; color: var(--spcb-muted); font-size: 14px; }

/* ============ CHECKOUT SECTION ============ */
.spcb-checkout-section {
	background: var(--spcb-bg-light);
	padding: 32px 0 40px;
	scroll-margin-top: 20px;
}
.spcb-checkout-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.spcb-summary-card {
	background: #fff;
	border-radius: var(--spcb-radius);
	padding: 16px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.spcb-summary-product {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--spcb-border);
	margin-bottom: 14px;
}
.spcb-summary-product img {
	width: 64px; height: 64px;
	object-fit: cover;
	border-radius: 8px;
}
.spcb-summary-title { font-weight: 700; margin: 0 0 4px; font-size: 15px; }
.spcb-summary-price { color: var(--spcb-cta); font-weight: 700; margin: 0; }

.spcb-qty-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.spcb-qty-control {
	display: flex;
	align-items: center;
	border: 1px solid var(--spcb-border);
	border-radius: 8px;
	overflow: hidden;
}
.spcb-qty-btn {
	background: var(--spcb-bg-light);
	border: none;
	width: 40px; height: 40px;
	font-size: 18px;
	cursor: pointer;
}
#spcb-qty-input {
	width: 48px;
	text-align: center;
	border: none;
	height: 40px;
	font-size: 15px;
	-moz-appearance: textfield;
}
.spcb-summary-total-row {
	display: flex;
	justify-content: space-between;
	font-size: 17px;
	padding-top: 12px;
	border-top: 1px solid var(--spcb-border);
}
.spcb-summary-total-row strong { color: var(--spcb-cta); }

/* Checkout form */
.spcb-checkout-form-wrap {
	background: #fff;
	border-radius: var(--spcb-radius);
	padding: 18px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.spcb-field { margin-bottom: 14px; }
.spcb-field label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
.spcb-field input,
.spcb-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--spcb-border);
	border-radius: 8px;
	font-size: 16px; /* avoid mobile auto-zoom */
	font-family: inherit;
	min-height: 44px;
}
.spcb-field textarea { min-height: 60px; resize: vertical; }
.spcb-field input:focus,
.spcb-field textarea:focus {
	outline: none;
	border-color: var(--spcb-primary);
}
.spcb-error {
	display: block;
	color: var(--spcb-cta);
	font-size: 12px;
	margin-top: 4px;
}
.spcb-payment-method {
	background: var(--spcb-bg-light);
	padding: 12px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
}
.spcb-radio-label { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.spcb-submit-btn { font-size: 18px; padding: 18px; }
.spcb-form-message {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}
.spcb-form-message.success { background: #d1fae5; color: #065f46; }
.spcb-form-message.error { background: #fee2e2; color: #991b1b; }

/* ============ MOBILE STICKY CTA ============ */
.spcb-sticky-mobile-cta {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: #fff;
	border-top: 1px solid var(--spcb-border);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 999;
	box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.spcb-sticky-mobile-cta .spcb-btn-cta {
	flex: 1;
	padding: 12px 16px;
	font-size: 15px;
}
.spcb-sticky-price {
	font-weight: 800;
	color: var(--spcb-primary);
	font-size: 16px;
	white-space: nowrap;
}

/* ==========================================================================
   TABLET (≥768px)
   ========================================================================== */
@media (min-width: 768px) {
	.spcb-hero-inner {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}
	.spcb-hero-image, .spcb-hero-content { width: 50%; }
	.spcb-hero-content { text-align: left; }
	.spcb-headline { font-size: 34px; }
	.spcb-badge-sale { right: 10px; }

	.spcb-trust-inner { flex-direction: row; justify-content: center; gap: 30px; }

	.spcb-testimonial-grid { flex-direction: row; }
	.spcb-testimonial-card { flex: 1; }

	.spcb-checkout-inner { flex-direction: row; align-items: flex-start; }
	.spcb-order-summary, .spcb-checkout-form-wrap { flex: 1; }

	/* Sticky bar কম দরকার বড় স্ক্রিনে, hero button-ই যথেষ্ট, চাইলে hide করতে পারো */
}

/* ==========================================================================
   DESKTOP (≥1200px)
   ========================================================================== */
@media (min-width: 1200px) {
	.spcb-container { padding: 0 24px; }
	.spcb-headline { font-size: 40px; }
	.spcb-sticky-mobile-cta { display: none; } /* desktop এ sticky bar দরকার নেই */
}