/* =========================================================
   GPL Villa — Cart / Checkout / Payment proof
   ========================================================= */

/* Checkout: summary+coupon on one side, customer details+payment on the
   other, balanced evenly — previously undefined here, so the two blocks
   just stacked as plain full-width divs with no actual layout, which on
   wider screens could look lopsided depending on content length. */
.gsm-checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gv-space-lg);
	align-items: start;
}
/* Grid items default to min-width:auto, meaning their contents' natural
   size (a long line item name, an unbroken payment number, etc.) can
   still force this column wider than the viewport even once the grid
   itself has collapsed to one column on mobile — which is exactly what
   made the checkout column look shifted to the right / part off-screen.
   min-width:0 lets it actually shrink to fit. */
.gsm-checkout-summary,
.gsm-checkout-form {
	min-width: 0;
}
/* The error/notice messages are siblings of the two columns, not part of
   either — without this they'd become stray extra grid cells and shove
   the summary/form columns out of alignment whenever one is shown. */
.gsm-checkout > .gsm-error,
.gsm-checkout > .gsm-notice {
	grid-column: 1 / -1;
}
@media (max-width: 800px) {
	.gsm-checkout { grid-template-columns: 1fr; }
}

.gsm-checkout-summary ul {
	list-style: disc;
	padding-left: 20px;
	margin: 12px 0;
	color: var(--gv-text-muted);
}
.gsm-checkout-summary li { margin-bottom: 6px; }

.gsm-coupon-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin: 14px 0;
}
.gsm-coupon-form input[type="text"] {
	flex: 1;
	min-width: 0;
}
.gsm-coupon-form button {
	flex-shrink: 0;
	white-space: nowrap;
}

table.cart,
table.shop_table,
.gsm-store table.shop_table {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	color: var(--gv-text);
	overflow: hidden;
}

.gsm-store table.shop_table th {
	background: var(--gv-bg-alt);
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.gsm-store table.shop_table td {
	border-top: 1px solid var(--gv-border);
}

.gsm-store-cart-form,
.cart-collaterals .cart_totals {
	background: transparent;
}

.cart_totals {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	padding: var(--gv-space-md);
}

.cart_totals h2 { margin-bottom: 12px; }

.gsm-store-checkout #payment,
.gsm-store-checkout-review-order {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	overflow: hidden;
}

.gsm-store-checkout #payment ul.payment_methods {
	border-bottom-color: var(--gv-border);
	padding: 14px;
}

.gsm-store-checkout #payment div.payment_box {
	background: var(--gv-bg-alt);
	color: var(--gv-text);
	border-radius: var(--gv-radius-sm);
}

.gsm-store-checkout #payment div.payment_box::before {
	border-bottom-color: var(--gv-bg-alt);
}

.gsm-store-billing-fields,
.gsm-store-additional-fields {
	background: var(--gv-card);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	padding: var(--gv-space-md);
	margin-bottom: var(--gv-space-md);
}

.gsm-store-checkout h3 {
	margin-bottom: 16px;
}

/* Checkout step indicator (visual only) — one line always, all 4 the
   same style (no special highlight color), sized to fit on mobile
   without wrapping. */
.gv-checkout-steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin-bottom: var(--gv-space-md);
	overflow-x: auto;
}
.gv-checkout-steps span {
	background: var(--gv-card);
	border: 1px solid var(--gv-gold-dark);
	border-radius: 20px;
	padding: 6px 10px;
	font-size: 11px;
	color: var(--gv-gold-light);
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Payment proof upload (rendered by the GPL Store Manager plugin) */
.gsm-proof-upload,
.gsm-license-status {
	margin-top: var(--gv-space-md);
	padding: var(--gv-space-md);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius);
	background: var(--gv-card);
}
.gsm-proof-upload h2, .gsm-license-status h2 { font-size: 18px; margin-bottom: 10px; }
.gsm-rejected-note { color: var(--gv-red); }

.gsm-proof-upload input[type="file"] {
	width: 100%;
}

/* Safety net: force-hide address/company/last-name fields even if a page
   cache serves stale markup before the PHP field filter takes effect. */
#billing_last_name_field,
#billing_company_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
.gsm-store-shipping-fields {
	display: none !important;
}

/* Buy Now button (next to Add to Cart) */
.gsm-buy-now-button {
	background: linear-gradient(135deg, var(--gv-pink-strong), var(--gv-red-strong)) !important;
	color: #fff !important;
	border: none !important;
	margin-left: 10px;
}
.gsm-buy-now-button:hover {
	filter: brightness(1.08);
}

/* SadaPay / manual payment account box on checkout — redesigned to feel
   trustworthy and "automatic" (clear header, icon, verification note)
   rather than a plain box of text. */
.gsm-payment-account-box {
	background: linear-gradient(160deg, var(--gv-bg-alt), var(--gv-card));
	border: 1px solid var(--gv-gold-dark);
	border-radius: var(--gv-radius);
	padding: 18px 20px;
	margin-top: 10px;
}
.gsm-payment-box-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}
.gsm-payment-box-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(232,172,31,0.15);
	border: 1px solid var(--gv-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.gsm-payment-box-head h3 { margin: 0 0 2px; font-size: 15.5px; }
.gsm-payment-box-sub { margin: 0; font-size: 12px; color: var(--gv-text-muted); }
.gsm-payment-instructions { font-size: 13.5px; color: var(--gv-text-muted); line-height: 1.6; margin-bottom: 14px; }

.gsm-payment-account-card {
	background: var(--gv-bg);
	border: 1px dashed var(--gv-gold-dark);
	border-radius: var(--gv-radius-sm);
	padding: 14px 16px;
}
.gsm-payment-summary-box {
	background: var(--gv-bg-alt);
	border: 1px solid var(--gv-border);
	border-radius: var(--gv-radius-sm);
	padding: 14px 16px;
	margin: 10px 0;
}
.gsm-payment-summary-title { margin: 0 0 8px; font-weight: 700; color: var(--gv-gold-light); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
.gsm-payment-summary-list { margin: 0 0 10px; padding-left: 18px; color: var(--gv-text-muted); font-size: 14px; }
.gsm-payment-summary-list li { margin-bottom: 6px; }
.gsm-payment-summary-total { margin: 0; font-size: 15px; }
.gsm-payment-auto-note { margin: 12px 0 0; font-size: 12.5px; color: var(--gv-text-muted); line-height: 1.6; }
.gsm-payment-account-row {
	font-size: 14px;
	color: var(--gv-text-muted);
	padding: 3px 0;
}
.gsm-payment-provider {
	font-weight: 700;
	color: var(--gv-gold-light);
	font-size: 15px;
}
.gsm-payment-bank-name {
	font-weight: 500;
	color: var(--gv-text-muted);
	font-size: 13px;
}
.gsm-payment-number-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}
.gsm-payment-number {
	font-family: var(--gv-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	word-break: break-all;
}
.gsm-payment-help-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 16px;
	background: #1fae5a;
	color: #fff !important;
	font-weight: 700;
	font-size: 13.5px;
	border-radius: var(--gv-radius-sm);
	text-align: center;
}
.gsm-payment-help-btn:hover { background: #189349; }
.gsm-copy-btn {
	background: var(--gv-card);
	border: 1px solid var(--gv-border-light);
	color: var(--gv-gold-light);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.gsm-copy-btn:hover {
	border-color: var(--gv-gold);
	background: var(--gv-card-hover);
}

/* Simplified checkout — full-width single-column fields */
.gsm-store-billing-fields .form-row-wide {
	width: 100%;
	float: none;
}

/* ===================== NEW CUSTOMER / LOGIN TABS (checkout) ===================== */
/* Plain buttons + a few lines of JS in the template — no hidden radio
   inputs to accidentally leak through as visible circles. */

.gsm-auth-tabs {
	position: relative;
}
.gsm-auth-tab-labels {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--gv-border);
}
.gsm-auth-tab-btn {
	background: none;
	border: none;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 14px;
	font-family: inherit;
	color: var(--gv-text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.gsm-auth-tab-btn:hover { color: var(--gv-text); }
.gsm-auth-tab-btn.is-active {
	color: var(--gv-gold-light);
	border-bottom-color: var(--gv-gold);
}

.gsm-auth-panel[hidden] { display: none; }

.gsm-inline-login-form input[type="text"],
.gsm-inline-login-form input[type="password"] {
	width: 100%;
	margin-top: 4px;
}
.gsm-remember-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--gv-text-muted);
	font-size: 13px;
	margin: 4px 0 14px;
}
.gsm-remember-row input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
}
.gsm-remember-row label { margin: 0; }

.gsm-checkout-form small {
	display: block;
	color: var(--gv-text-faint);
	font-size: 12px;
	margin-top: 4px;
}

.gsm-terms-agree-row {
	font-size: 13px;
	color: var(--gv-text-muted);
	line-height: 1.6;
	margin: 16px 0;
}
.gsm-terms-agree-row label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.gsm-terms-agree-row input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
/* The checkbox text used to be one long run-on paragraph wrapping
   around the Terms & Conditions / Refund Policy links — cramped and
   hard to read on narrow screens. It's now two short lines (see the
   <br> in checkout.php); this just makes that block take its own
   full-width column next to the checkbox instead of trying to sit on
   the same line as it. */
.gsm-terms-text {
	display: block;
	min-width: 0;
}
.gsm-terms-agree-row a { color: var(--gv-gold-light); text-decoration: underline; }