/* Müşteri Adres Defteri - shared styles for account page + checkout */

/* Brand colors (hemfikirkitap logo): accent red from the "kitap" wordmark
   and book icon, text color from the "hemfikir" wordmark's dark charcoal
   -- was WooCommerce's stock purple (#7f54b3) before. */
.cab-page,
.cab-checkout-block,
.cab-checkout-layout,
.cab-modal-overlay {
	--cab-accent: #e2231a;
	--cab-accent-soft: rgba(226, 35, 26, 0.08);
	--cab-border: #e2e2e2;
	--cab-border-hover: #c6c6c6;
	--cab-text: #231f20;
	--cab-text-muted: #6b6b6b;
	--cab-danger: #c0392b;
	--cab-radius: 8px;
	font-size: 14px;
	color: var(--cab-text);
}

.cab-page__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5em;
	gap: 1em;
}

.cab-page__header h2 {
	margin: 0;
}

.cab-notice {
	background: #edf9f0;
	color: #1f7a3d;
	border: 1px solid #cdeeda;
	padding: .7em 1em;
	border-radius: var(--cab-radius);
	margin-bottom: 1em;
	font-size: .92em;
}

.cab-notice--error {
	background: #fdedec;
	color: var(--cab-danger);
	border-color: #f6d2ce;
}

/* Buttons - self-contained, no dependency on theme .button styles */

.cab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	border: 1px solid var(--cab-border);
	background: #fff;
	color: var(--cab-text);
	border-radius: var(--cab-radius);
	padding: .6em 1.1em;
	font-size: .92em;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.cab-btn:hover {
	border-color: var(--cab-border-hover);
	background: #fafafa;
}

.cab-btn-primary {
	background: var(--cab-accent);
	border-color: var(--cab-accent);
	color: #fff;
}

.cab-btn-primary:hover {
	background: #6d4599;
	border-color: #6d4599;
	color: #fff;
}

.cab-btn:disabled {
	opacity: .6;
	cursor: default;
}

.cab-btn-outline {
	background: #fff;
	border-color: var(--cab-accent);
	color: var(--cab-accent);
	font-size: .85em;
	padding: .45em .85em;
}

.cab-btn-outline:hover {
	background: var(--cab-accent-soft);
	border-color: var(--cab-accent);
	color: var(--cab-accent);
}

/* Address grid + cards */

.cab-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}

@media (max-width: 782px) {
	.cab-grid {
		grid-template-columns: 1fr;
	}
}

.cab-card {
	position: relative;
	border: 1px solid var(--cab-border);
	border-radius: var(--cab-radius);
	padding: 1em 1.2em;
	background: #fff;
}

.cab-card--selectable {
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.cab-card--selectable:hover {
	border-color: var(--cab-border-hover);
}

.cab-card--selected {
	border-color: var(--cab-accent);
	background: var(--cab-accent-soft);
}

.cab-card__radio {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #bbb;
	background: #fff;
	display: inline-block;
}

.cab-card--selected .cab-card__radio {
	border-color: var(--cab-accent);
	box-shadow: inset 0 0 0 4px var(--cab-accent);
}

.cab-card__header {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: .4em;
	padding-right: 1.6em;
}

.cab-card__title {
	margin: 0;
	font-size: 1em;
}

.cab-badge {
	font-size: .68em;
	background: var(--cab-accent);
	color: #fff;
	padding: .15em .5em;
	border-radius: 3px;
	letter-spacing: .03em;
}

.cab-card__type,
.cab-card__name,
.cab-card__company,
.cab-card__address,
.cab-card__phone {
	margin: .2em 0;
	font-size: .9em;
	color: var(--cab-text-muted);
}

.cab-card__actions {
	margin-top: .8em;
	display: flex;
	gap: 1em;
	font-size: .85em;
}

.cab-card__actions a {
	text-decoration: none;
	color: var(--cab-text-muted);
}

.cab-card__actions a:hover {
	color: var(--cab-text);
}

.cab-action-delete {
	color: var(--cab-danger) !important;
}

/* The "Seç" button in the checkout picker -- a real .cab-btn-primary
   pill, not a plain text link like its siblings in .cab-card__actions, so
   it reads as the obvious primary action on the card. Needs !important to
   beat ".cab-card__actions a" above (a higher-specificity generic rule
   that would otherwise mute its text color back to gray, same reason
   .cab-action-delete already needs it for its own red). */
.cab-btn-sm {
	padding: .35em .8em;
	font-size: .85em;
}

.cab-card__actions a.cab-action-select,
.cab-card__actions a.cab-action-select:hover {
	color: #fff !important;
	text-decoration: none;
}

.cab-card--add {
	border-style: dashed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--cab-accent);
	cursor: pointer;
	min-height: 140px;
	gap: .4em;
	font-size: .9em;
}

.cab-card--add:hover {
	border-color: var(--cab-accent);
	background: var(--cab-accent-soft);
}

.cab-card--add__icon {
	font-size: 1.6em;
	line-height: 1;
}

/* Modal - compact, self-contained, scrolls internally so it never
   spills past the viewport regardless of how many fields are visible */

.cab-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, .55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2em;
	box-sizing: border-box;
}

.cab-modal {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* isolate from theme typography so em-based theme rules can't leak in */
	font-size: 14px;
	line-height: 1.4;
}

.cab-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .9em 1.1em;
	border-bottom: 1px solid var(--cab-border);
	flex: 0 0 auto;
}

.cab-modal__header h3 {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.3;
}

.cab-modal__close {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--cab-text-muted);
	background: transparent;
	transition: background-color .15s ease, color .15s ease;
}

.cab-modal__close:hover {
	background: var(--cab-accent-soft);
	color: var(--cab-text);
}

/* The form itself (#cab-address-form) sits between .cab-modal and
   .cab-modal__body/.cab-modal__footer in the actual markup -- it's an
   unstyled, plain block element, NOT part of the .cab-modal flex layout.
   That means .cab-modal__body's `flex: 1 1 auto; min-height: 0` below
   never actually applies (flex-item properties only do anything when the
   element's DIRECT parent is a flex container, and here that parent is
   the form, not .cab-modal) -- the form just grows to fit all of its
   content, full height, and .cab-modal's own `overflow: hidden` then
   silently clips everything past 85vh with no scrollbar anywhere, since
   the one element that DOES have `overflow-y: auto` never ends up with a
   constrained height to actually scroll within. `display: contents`
   removes the form from the render tree without affecting its DOM/form
   semantics at all (submission, field association, etc. all still work
   exactly the same) -- its children become flex items of .cab-modal
   directly, which is what the rest of this layout already assumed. */
.cab-modal form#cab-address-form {
	display: contents;
}

.cab-modal__body {
	overflow-y: auto;
	padding: 1em 1.1em;
	flex: 1 1 auto;
	min-height: 0;
}

/* Shown briefly while editing an existing address: resetForm() already
   blanked every field before the modal appears, and the real data only
   arrives a moment later via its own AJAX call -- dim + disable the form
   during that gap so it visibly reads as "loading", not "came back
   empty". */
.cab-modal__body--loading {
	opacity: .35;
	pointer-events: none;
	transition: opacity .15s ease;
}

.cab-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: .6em;
	padding: .8em 1.1em;
	border-top: 1px solid var(--cab-border);
	flex: 0 0 auto;
}

/* Fields
   Many themes style raw input/select/textarea elements with their own
   padding + font-size (often sized for a much larger base font, which is
   exactly what was inflating these to ~60px tall) and, loading after this
   stylesheet, win cascade ties. The box-model properties below are forced
   with !important so this form looks the same on every theme. */

.cab-field {
	margin-bottom: .65em;
}

.cab-field label {
	display: block;
	margin-bottom: .25em;
	font-weight: 500;
	font-size: 12px;
	color: var(--cab-text-muted);
}

.cab-modal input[type="text"],
.cab-modal select,
.cab-modal textarea,
.cab-checkout-block input[type="text"],
.cab-checkout-block select {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 36px !important;
	margin: 0 !important;
	border: 1px solid var(--cab-border) !important;
	border-radius: 6px !important;
	padding: 0 .6em !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 34px !important;
	color: var(--cab-text) !important;
	background: #fff !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.cab-modal textarea {
	height: auto !important;
	min-height: 64px;
	line-height: 1.4 !important;
	padding: .5em .6em !important;
}

.cab-modal select,
.cab-checkout-block select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .7em center !important;
	background-size: 9px 6px !important;
	padding-right: 1.8em !important;
}

.cab-modal input[type="text"]:focus,
.cab-modal select:focus,
.cab-modal textarea:focus,
.cab-checkout-block input[type="text"]:focus,
.cab-checkout-block select:focus {
	outline: none !important;
	border-color: var(--cab-accent) !important;
	box-shadow: 0 0 0 3px var(--cab-accent-soft) !important;
}

.cab-field textarea {
	resize: vertical;
}

/* Some themes (Motta included) style every input[type=checkbox]/[type=radio]
   on the page globally with a decorative ::before/::after "fake" indicator,
   assuming their own specific markup (e.g. a sibling <span>). Our modal
   doesn't use that markup, so the theme's overlay ends up misaligned with
   the real native control -- reported as ghost circles that don't seem to
   respond to clicks. Cancel the theme's pseudo-elements within our own
   containers and fall back to a plain native control with accent-color. */

.cab-modal input[type="checkbox"]::before,
.cab-modal input[type="checkbox"]::after,
.cab-modal input[type="radio"]::before,
.cab-modal input[type="radio"]::after,
.cab-checkout-block input[type="checkbox"]::before,
.cab-checkout-block input[type="checkbox"]::after,
.cab-checkout-block input[type="radio"]::before,
.cab-checkout-block input[type="radio"]::after {
	content: none !important;
	display: none !important;
}

.cab-modal input[type="checkbox"],
.cab-modal input[type="radio"],
.cab-checkout-block input[type="checkbox"],
.cab-checkout-block input[type="radio"] {
	position: static !important;
	-webkit-appearance: auto !important;
	appearance: auto !important;
	width: 15px !important;
	height: 15px !important;
	min-width: 15px;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--cab-accent);
	flex-shrink: 0;
	cursor: pointer;
}

.cab-field--checkbox label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: .5em;
	color: var(--cab-text);
	font-size: 13px;
}

.cab-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .7em;
}

.cab-field-row--align-end {
	align-items: end;
}

.cab-split-inputs {
	display: flex;
	gap: .5em;
}

.cab-radio-row {
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1.2em;
	font-weight: normal;
}

.cab-radio-row label {
	display: flex;
	align-items: center;
	gap: .4em;
	font-weight: normal;
	font-size: 13px;
	color: var(--cab-text);
}

.cab-invoice-person-fields,
.cab-invoice-company-fields {
	border-left: 2px solid var(--cab-border);
	padding-left: .9em;
	margin: -.2em 0 .9em;
}

.cab-field-error {
	display: none;
	color: var(--cab-danger);
	font-size: .8em;
	margin-top: .3em;
}

.cab-field-error.is-visible {
	display: block;
}

.cab-checkout-block {
	margin-bottom: 1.5em;
}

.cab-checkout-block__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6em 1em;
	margin-bottom: .8em;
}

.cab-checkout-block__title {
	margin: 0;
	font-size: 15px !important;
	font-weight: 700;
}

/* Still inline in .cab-checkout-block (before its picker is ever opened --
   a narrow column, always 1-up) vs. moved into the picker popup itself
   (.cab-picker-modal, see cab-checkout.js's openPicker()/returnGridToBlock()
   -- the grid moves between the two, so this needs its own rule). The
   popup is its own wide overlay, not squeezed into a narrow column, so it
   can afford 2 cards per row on desktop -- each card is quite tall (badge,
   name, company, address lines, phone, "Değiştir"), so 1-up here was a
   lot of scrolling for not much reason. */
.cab-checkout-block .cab-grid {
	grid-template-columns: 1fr;
}

.cab-picker-modal .cab-grid {
	grid-template-columns: 1fr 1fr;
}

/* Wider than the base .cab-modal (520px) specifically for this 2-up grid
   to have room to breathe -- the add/edit modal keeps the narrower
   default, this is scoped to the picker popup only. */
.cab-picker-modal {
	max-width: 680px;
}

@media (max-width: 782px) {
	.cab-picker-modal .cab-grid {
		grid-template-columns: 1fr;
	}
}

.cab-grid-wrapper {
	margin-bottom: .8em;
}

/* Address picker popup (checkout only): reuses the base .cab-modal look
   (same flex/scroll behavior fixed for the add/edit modal) -- no <form>
   wrapper issue here since this one has no form inside it. */
.cab-picker-modal__body .cab-grid-wrapper {
	margin-bottom: 0;
}

.cab-selected-card {
	position: relative;
	display: block;
	border: 1px solid var(--cab-accent);
	background: var(--cab-accent-soft);
	border-radius: var(--cab-radius);
	padding: .9em 2.2em .9em 1.1em;
	margin-bottom: .8em;
	cursor: pointer;
	line-height: 1.6;
}

.cab-selected-card__label {
	margin-right: .4em;
}

.cab-selected-card__locality {
	color: var(--cab-text-muted);
	font-size: .9em;
}

.cab-selected-card__address {
	display: block;
	font-size: .9em;
	color: var(--cab-text-muted);
}

.cab-selected-card__edit {
	display: inline-block;
	margin-top: .3em;
	font-size: .85em;
	color: var(--cab-accent);
	text-decoration: underline;
}

.cab-selected-card__edit:hover {
	color: var(--cab-text);
}

.cab-selected-card__chevron {
	position: absolute;
	right: .9em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4em;
	color: var(--cab-accent);
	line-height: 1;
}

/* Checkout layout: Teslimat-first restructuring (cab-checkout-layout.js) */

[hidden] {
	display: none !important;
}

/*
 * Force the two address columns to sit side by side as two matching cards,
 * rather than trusting the theme's float-based #customer_details layout
 * (which stacked them in practice) -- flexbox + explicit widths here is
 * immune to whatever float/clear quirks the theme has.
 */
#customer_details.col2-set {
	display: flex !important;
	flex-wrap: wrap;
	float: none !important;
	width: 100% !important;
	gap: 1.2em;
	align-items: flex-start;
}

#customer_details .col-1,
#customer_details .col-2 {
	float: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	flex: 1 1 320px;
	background: #fff;
	border: 1px solid var(--cab-border, #e2e2e2);
	border-radius: 10px;
	padding: 1.2em;
	margin: 0 !important;
}

@media (max-width: 782px) {
	#customer_details .col-1,
	#customer_details .col-2 {
		flex-basis: 100%;
		padding: 1em;
	}

	.cab-checkout-block__title {
		font-size: 14px !important;
	}

	.cab-btn-outline {
		font-size: .8em;
		padding: .4em .7em;
	}
}

/* Defensive: nothing in this layout should ever be wider than its own
   container -- guards against any single rule above miscalculating and
   forcing the mobile page into horizontal scroll. */
#customer_details,
#customer_details .col-1,
#customer_details .col-2,
.cab-checkout-layout,
.cab-checkout-main,
.cab-checkout-sidebar {
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Belt-and-suspenders: hide the raw native address-only field rows by their
 * exact ids directly in CSS, not only via cab-checkout-layout.js's
 * `.prop('hidden', true)`. These ids are fixed regardless of which address
 * is selected, so there's no reason to depend on JS timing/load-order at
 * all for an always-on hide -- our card grid + "Değiştir" modal are the
 * only way these ever need to be set. Also hides the invoice-type/company/
 * tax/TC fields and our own TC field -- all of that is now captured once,
 * inside the address itself (our modal's "Fatura Tipi" section), so asking
 * for it again at checkout is pure duplication; the (still-present, just
 * invisible) inputs keep carrying whatever value our JS fills in from the
 * selected address, so submission is unaffected. billing_email is ALSO
 * hidden here -- but only because this whole stylesheet is exclusively
 * enqueued for logged-in checkout (see CAB_Checkout::enqueue_assets), where
 * CAB_Checkout::filter_checkout_value() already prefills it from the
 * account's own email; guests never load this file, so their email field
 * stays visible and required as normal. Also drops the unrelated
 * "Siparişinizle ilgili notlar" textarea per explicit request.
 */
#billing_first_name_field,
#billing_last_name_field,
#billing_country_field,
#billing_state_field,
#billing_city_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_postcode_field,
#billing_phone_field,
#billing_company_field,
#billing_email_field,
#shipping_first_name_field,
#shipping_last_name_field,
#shipping_country_field,
#shipping_state_field,
#shipping_city_field,
#shipping_address_1_field,
#shipping_address_2_field,
#shipping_postcode_field,
#shipping_phone_field,
#shipping_company_field,
#cab-checkout-tc-wrap,
#hezarfen_invoice_type_field,
#hezarfen_tax_number_field,
#hezarfen_tax_office_field,
#hezarfen_TC_number_field,
#order_comments_field,
.woocommerce-additional-fields,
.woocommerce-billing-fields > h3:first-child {
	display: none !important;
}

/* Hiding almost every row inside these wrappers (above) left the theme's
   OWN border+padding on the wrapper itself still visible as an empty-
   looking box (Motta's woocommerce.css puts a real border/padding on
   `.woocommerce-billing-fields__field-wrapper` regardless of what's
   inside it). Strip that chrome -- whatever's actually left visible
   (Fatura Tipi radio, company/tax fields when Kurumsal) gets its spacing
   from the fields themselves, not from an outer decorative box. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	border: none !important;
	padding: 0 !important;
}

/* Now sits inside the Teslimat Adresi card itself, right below the
   selected-address card/picker -- no outer box of its own, just a plain
   checkbox row matching the rest of the card's own spacing. */
.cab-same-address-row {
	margin: .9em 0 0;
}

.cab-same-address-row label {
	display: flex;
	align-items: center;
	gap: .6em;
	font-weight: 500;
	font-size: .92em;
	cursor: pointer;
}

.cab-same-address-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cab-accent, #e2231a);
	cursor: pointer;
}

/* Collapsible "Sepetimdeki Ürünler" cart-items accordion (cab-checkout-layout.js)
   AND the coupon-code accordion (cab-checkout-sidebar.js) share this same
   look via the combined selector below -- but deliberately NOT the same
   class name. syncSidebar()'s cart-section logic does
   `freshElements('.cab-order-review-toggle', $cartSection)` and relocates
   whatever matches into the cart area; the coupon toggle used to share
   that exact class purely for styling and got silently dragged into the
   cart section by that unrelated code the moment it was created. */
.cab-order-review-toggle,
.cab-coupon-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .9em 1.1em;
	background: #f7f7f7;
	border: 1px solid var(--cab-border, #e2e2e2);
	border-radius: 8px;
	margin-bottom: 1em;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
}

.cab-order-review-toggle__chevron,
.cab-coupon-toggle__chevron {
	display: inline-block;
	transition: transform .15s ease;
	color: var(--cab-text-muted, #6b6b6b);
}

.cab-order-review-toggle--open .cab-order-review-toggle__chevron,
.cab-coupon-toggle--open .cab-coupon-toggle__chevron {
	transform: rotate(180deg);
}

/* Two-column checkout page layout (cab-checkout-sidebar.js):
   main content (address, payment, agreements) + sticky order-summary
   sidebar, replacing the single long stacked page. */

#order_review_heading {
	display: none !important;
}

/* #order_review used to be the theme's own half-width card (float:left,
   40.4% width, its own border/background/padding) wrapping the cart table
   *and* #payment together as one box. Now that the cart table has been
   relocated into the sidebar, #order_review contains almost nothing but
   #payment -- so its leftover theme box styling just produces a narrow,
   floated, double-bordered shell with our own #payment card nested inside
   it. Strip it down to a plain full-width wrapper; #payment supplies the
   one visible card now. */
#order_review.woocommerce-checkout-review-order {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

/* Free-shipping progress bar (Motta's own module, not ours) now sits full
   width above the two-column layout -- right below the coupon notice,
   above the address section, same place it always rendered. */
.motta-free-shipping-bar {
	margin-bottom: 1.2em;
}

/* Motta's coupon box (".checkout-coupon", inside ".checkout-form-cols")
   renders WooCommerce's stock coupon form -- a bare <input class="input-text">
   and <button class="button">, both wrapped in .form-row-first/.form-row-last
   <p> tags. Targeted overrides on top of the theme's own input/.button
   styling kept fighting new theme properties one at a time (float+width,
   then flex-basis, then -- the one that actually explained the stacking --
   the theme's generic `.button{min-width:160px;line-height:60px}` rule
   (site-wide, meant for full-size page buttons) forcing the button wider
   than its 30% flex cell regardless of flex-basis, wrapping it onto its
   own line no matter what the row's own flex rules said. Rather than keep
   discovering theme properties one by one, this is a full self-contained
   reset: every box-model/typography property these two elements could
   inherit from the theme is set explicitly here, the same "don't trust
   the cascade, own every property" pattern already used for this plugin's
   modal inputs (see ".cab-modal input[type=text]" above). */
.checkout-coupon form.checkout_coupon {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	/* Theme's own ".checkout-form-cols .checkout-coupon .checkout_coupon"
	   rule puts `padding:10px 0 0 30px` directly on this form (note:
	   `.checkout-coupon`, the wrapper div, and `.checkout_coupon`, this
	   form itself, are two different classes one hyphen/underscore apart
	   -- resetting the wrapper's own padding, done back in round 30,
	   never touched the form's). That lopsided left-only 30px padding is
	   exactly what pushed the input off-center from the card's edges. */
	padding: 0 !important;
}

.checkout-coupon form.checkout_coupon .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Input/button sit flush against each other (no gap) at a 70/30 split --
   flattened on their touching edge so they read as one joined control,
   not two separate rounded boxes with a seam between them. */
.checkout-coupon form.checkout_coupon .form-row-first {
	flex: 0 0 70% !important;
	min-width: 0 !important;
}

.checkout-coupon form.checkout_coupon .form-row-last {
	flex: 0 0 30% !important;
	min-width: 0 !important;
}

.checkout-coupon form.checkout_coupon input.input-text,
.checkout-coupon form.checkout_coupon .button {
	box-sizing: border-box !important;
	min-width: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

.checkout-coupon form.checkout_coupon input.input-text {
	width: 100% !important;
	min-width: 100% !important;
	height: 38px !important;
	line-height: 36px !important;
	padding: 0 .8em !important;
	border: 1px solid var(--cab-border) !important;
	border-radius: 6px 0 0 6px !important;
	color: var(--cab-text) !important;
	background: #fff !important;
	font-weight: 400 !important;
}

.checkout-coupon form.checkout_coupon input.input-text:focus {
	outline: none !important;
	border-color: var(--cab-accent) !important;
	box-shadow: 0 0 0 3px var(--cab-accent-soft) !important;
}

.checkout-coupon form.checkout_coupon .button {
	/* min-height, not a fixed height -- unlike the input, this button's
	   label text length isn't under our control (it's WooCommerce core's
	   own translated "Kuponu Uygula" string), so let it grow to 2 lines
	   gracefully in a narrow 30% cell instead of either overflowing past
	   its own edges or getting clipped. */
	width: 100% !important;
	min-height: 38px !important;
	height: auto !important;
	line-height: 1.3 !important;
	padding: .4em .6em !important;
	border: 1px solid var(--cab-accent) !important;
	border-radius: 0 6px 6px 0 !important;
	color: #fff !important;
	background: var(--cab-accent) !important;
	font-weight: 500 !important;
	cursor: pointer;
}

.checkout-coupon form.checkout_coupon .button:hover {
	background: var(--cab-text) !important;
	border-color: var(--cab-text) !important;
}

.checkout-coupon form.checkout_coupon .clear {
	display: none;
}

/* Narrow screens: a 70/30 side-by-side split leaves too little room for
   the button's own label -- stack both at full width instead, same as
   every other field in this plugin collapses to a single column below
   this breakpoint. Undo the flattened touching-edge corners too, since
   stacked fields aren't touching each other left-to-right any more. */
@media (max-width: 782px) {
	.checkout-coupon form.checkout_coupon .form-row-first,
	.checkout-coupon form.checkout_coupon .form-row-last {
		flex: 0 0 100% !important;
	}

	.checkout-coupon form.checkout_coupon input.input-text,
	.checkout-coupon form.checkout_coupon .button {
		width: 100% !important;
		border-radius: var(--cab-radius) !important;
	}
}

/* The coupon box now lives inside the ~300px sidebar, right below the
   order total -- its theme-level width/padding/centering assumed a
   full-width page section (two columns wide), so left alone it would
   look oversized and oddly indented in here. Shrink it down to match the
   sidebar's own compact scale instead. */
.cab-checkout-sidebar__coupon {
	margin: 1em 0;
}

.cab-checkout-sidebar__coupon .checkout-form-cols,
.cab-checkout-sidebar__coupon .checkout-coupon {
	/* Motta's own ".col-flex-md-6{flex:0 0 50%;max-width:50%}" (meant to
	   sit the coupon box next to a login box, half the page wide) was
	   still winning over a plain `width:100%` override -- `flex-basis`
	   takes precedence over `width` for sizing a flex item, so without
	   also resetting `flex`/`max-width` directly, the box was computing to
	   ~50% of the sidebar's own already-narrow column (~130px), squeezing
	   its text down to one word per line. */
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
}

/* (sizing/typography for these two now fully owned by the self-contained
   reset above, ".checkout-coupon form.checkout_coupon input.input-text,
   .button" -- no separate sidebar-scoped override needed any more) */

/* The native "Kuponun var mı? Tıklayın" toggle prompt is hidden outright
   -- replaced with our own accordion header (cab-checkout-sidebar.js),
   reusing the "Sepetimdeki Ürünler" toggle's own look/classes so both
   collapsible sections in this sidebar read as the same UI pattern:
   collapsed by default, slides open on click. */
.cab-checkout-sidebar__coupon .woocommerce-form-coupon-toggle {
	display: none !important;
}

.cab-coupon-collapse {
	margin-top: .6em;
}

.cab-checkout-sidebar__coupon .checkout-coupon {
	border: 1px solid var(--cab-border);
	border-radius: var(--cab-radius);
	background: #fff;
	padding: .9em !important;
	box-sizing: border-box;
}

/* (button color/border already fully owned by the self-contained reset
   above -- no separate sidebar-scoped override needed any more) */

/* Grid (not flex) for the two columns: explicit track sizes are immune to
   the flex-grow/shrink-basis edge cases that left the main column stuck at
   content-width with a visible gap before the sidebar. */
.cab-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
	gap: 1.5em;
	width: 100%;
	box-sizing: border-box;
}

.cab-checkout-main {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.cab-checkout-sidebar {
	position: sticky;
	top: 20px;
	background: #fff;
	border: 1px solid var(--cab-border);
	border-radius: 10px;
	padding: 1.2em;
	font-size: 14px;
	box-sizing: border-box;
}

.cab-checkout-sidebar__title {
	margin: 0 0 .8em;
	font-size: 1.05em;
}

.cab-checkout-sidebar__cart {
	margin-bottom: 1em;
}

.cab-checkout-sidebar__cart .cab-order-review-toggle {
	margin-bottom: .6em;
}

/* The cart-items table now lives inside the narrow sidebar -- compact it
   (smaller thumbnails, tighter text) so it actually fits. */
.cab-checkout-sidebar .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85em;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table img {
	width: 40px !important;
	height: 40px !important;
	margin-right: .5em;
}

/* Quantity badge, moved onto the thumbnail by moveQuantityOntoThumbnail()
   in cab-checkout-layout.js. .cab-thumb-wrap is inserted as a SIBLING
   BEFORE ".checkout-review-product-name", not nested inside it -- that
   span carries the theme's own 2-line-clamp text truncation
   (`-webkit-line-clamp`/`overflow:hidden`/`display:-webkit-box`), a
   layout mode that does not tolerate an absolutely-positioned child
   living inside it (a first attempt nesting the badge there broke both
   the clamp's truncation point and the badge's own position). Every
   property here is explicit/self-contained -- nothing is left to inherit
   from the theme's own image/float handling, so this wrapper's size and
   the badge's position can't silently depend on theme behavior changing
   out from under it. */
/* Floats here turned out unreliable: the theme's own text span still has
   its own `max-width`, and two floated siblings whose combined width
   doesn't fit the ~260px sidebar column drop the second one onto its own
   line instead of sitting beside the first -- exactly what happened
   (thumbnail above the text instead of beside it). Flexbox on the cell
   itself sidesteps that entirely: flex items ignore `float` altogether,
   and an explicit fixed-width thumbnail + a `flex:1 1 auto; min-width:0`
   text column are guaranteed to sit side by side and share the row's
   width correctly regardless of what the theme's own float/max-width
   rules say. */
.cab-checkout-sidebar .woocommerce-checkout-review-order-table td.product-name {
	display: flex !important;
	align-items: flex-start;
	gap: .5em;
	/* Theme's own "form.checkout table.shop_table tbody td.product-name"
	   rule reserves padding-left:50px (meant for an image absolutely
	   positioned within that space in its OWN original layout) -- now
	   that the thumbnail is a real flex item with its own `gap` spacing
	   instead, that reserved padding is pure extra, unwanted space before
	   the row's content even starts. Scoped to this sidebar specifically
	   (not reset globally) since this exact table only ever renders here
	   on the checkout page -- the cart page, mini-cart widget, and admin
	   order screens use entirely different templates/classes, so the
	   theme's original padding-based layout for THEM is left untouched. */
	padding: .4em 0 !important;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table .cab-thumb-wrap {
	position: relative;
	float: none !important;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	margin-right: 0;
	overflow: visible;
	box-sizing: content-box;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table .checkout-review-product-name {
	float: none !important;
	max-width: none !important;
	flex: 1 1 auto;
	min-width: 0;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table .cab-thumb-wrap img {
	display: block;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
}

/* !important on every property here, not just the "obvious" ones: the
   theme's own ".product-quantity" color rule
   ("form.checkout table.shop_table tbody td.product-name .product-quantity")
   turns out to have a HIGHER specificity than this selector despite this
   one having more classes -- it carries 4 type selectors (form, table,
   tbody, td) on top of its 4 classes, and type-selector count is what
   breaks the tie once class counts are equal. Recalculating specificity
   by eye is exactly the kind of mistake `!important` exists to make moot. */
.cab-checkout-sidebar .woocommerce-checkout-review-order-table .cab-thumb-wrap .product-quantity {
	position: absolute !important;
	bottom: -6px !important;
	right: -6px !important;
	left: auto !important;
	top: auto !important;
	float: none !important;
	display: inline-block !important;
	box-sizing: border-box !important;
	min-width: 20px !important;
	background: var(--cab-accent) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	font-style: normal !important;
	line-height: 17px !important;
	text-align: center !important;
	padding: 0 4px !important;
	margin: 0 !important;
	border: 2.5px solid #fff !important;
	border-radius: 11px !important;
	white-space: nowrap !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
	z-index: 1 !important;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table th,
.cab-checkout-sidebar .woocommerce-checkout-review-order-table td {
	padding: .4em 0;
	font-weight: normal;
	border: none;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table thead th {
	display: none;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table .product-total,
.cab-checkout-sidebar .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

/* Theme's own "td.product-total{vertical-align:top}" pins the price to the
   top of the row -- looks fine next to a single line of text, but awkward
   next to the row's 40px product thumbnail. Center it regardless of
   screen size; its own font-size is matched to the product name's further
   down (same value, in the same desktop-only media query) rather than set
   here, so the two always render at the same size as each other. */
.cab-checkout-sidebar .woocommerce-checkout-review-order-table .product-total {
	vertical-align: middle !important;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table .order-total th,
.cab-checkout-sidebar .woocommerce-checkout-review-order-table .order-total td {
	font-weight: 700;
	font-size: 1.15em;
	border-top: 1px solid var(--cab-border);
	padding-top: .7em;
}

/* A divider between each pair of products (not before the first, not
   after the last -- the totals section's own border-top already
   separates it from the last item) so a multi-item cart visibly reads as
   separate products instead of a single run-on block of text. */
.cab-checkout-sidebar .woocommerce-checkout-review-order-table tbody tr.cart_item:not(:last-child) td {
	border-bottom: 1px solid var(--cab-border);
	padding-bottom: .7em;
}

.cab-checkout-sidebar .woocommerce-checkout-review-order-table tbody tr.cart_item:not(:first-child) td {
	padding-top: .7em;
}

/* Product name, quantity ("× N"), and price are all meant to read as one
   consistent size now -- simplest way to guarantee that is to not give
   any of the three their own font-size override at all, so all three
   just inherit the same table-wide base size together (this replaces
   round 40/41/42's separate per-column tuning, which kept needing a new
   compensating value every time one piece changed). */

.cab-checkout-sidebar__actions {
	margin-top: .4em;
}

.cab-checkout-sidebar__actions .form-row {
	font-size: .85em;
	margin-bottom: .6em;
}

.cab-checkout-sidebar #place_order {
	width: 100%;
	margin-top: .4em;
}

/* Kept literally `disabled` (not just visually dimmed) until the contract
   checkbox is checked -- see updatePlaceOrderButtonState() in
   cab-checkout-sidebar.js -- but make sure that state actually reads as
   "can't click this yet" rather than looking identical to normal. */
.cab-checkout-sidebar #place_order:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.cab-payment-heading {
	margin: 0 0 .8em;
}

#payment.woocommerce-checkout-payment {
	background: #fff;
	border: 1px solid var(--cab-border);
	border-radius: 10px;
	padding: 1.2em;
	/* Full shorthand, not just margin-top: the theme's own rule sets
	   margin: 0 -30px (a bleed trick meant to cancel out #order_review's
	   old 30px side padding) -- leaving left/right at -30px here would
	   still pull this card sideways out of its now-padding-less parent. */
	margin: 1.2em 0 0;
	width: auto !important;
	max-width: none !important;
}

/* The theme styles payment method boxes assuming the old half-width
   checkout column -- now that "Ödeme Seçenekleri" spans the full main
   column, let its contents actually use that width instead of staying
   pinned to a narrow leftover size. */
.cab-checkout-main #payment ul.wc_payment_methods,
.cab-checkout-main #payment li.wc_payment_method,
.cab-checkout-main #payment .payment_box {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* turkpos (Param POS) gateway's own credit-card form (#wc-<id>-cc-form,
   class .wc-credit-card-form) uses plain WooCommerce form-row/input-text
   markup, which inherits the theme's generic input styling -- the same
   60px-tall / 22px-side-padding rule already fought for our own address
   fields, plus the theme's 20px form-row bottom margin on top. Four rows
   at that size is what was taking up so much page height; shrink both
   independently of each other, scoped to this one form so no other
   payment method or page is affected. */
/*
 * Layout: inputs on the left, the jquery.card.js preview (.card-wrapper) on
 * the right, instead of the form's native DOM order (card preview first,
 * then every field stacked full-width beneath it). turkpos's markup has no
 * grouping wrapper around the 4 field rows, so a plain two-column flex/grid
 * split isn't possible without touching its PHP -- instead this places each
 * child explicitly via CSS Grid's named `grid-area`, keyed to turkpos's own
 * (stable, directly-read-from-source) field ids. Pure visual reorder: the
 * actual DOM order, field names/ids and submitted values are all untouched.
 */
.cab-checkout-main #payment .wc-credit-card-form {
	display: grid;
	grid-template-columns: 1fr 1fr 260px;
	grid-template-areas:
		"name    name    card"
		"number  number  card"
		"expiry  cvv     card"
		"installment installment .";
	column-gap: 1.5em;
	align-items: start;
}

.cab-checkout-main #payment .wc-credit-card-form #cc_name_field { grid-area: name; }
.cab-checkout-main #payment .wc-credit-card-form #cc_number_field { grid-area: number; }
.cab-checkout-main #payment .wc-credit-card-form #cc_expiry_field { grid-area: expiry; }
.cab-checkout-main #payment .wc-credit-card-form #cc_cvv_field { grid-area: cvv; }
.cab-checkout-main #payment .wc-credit-card-form #cc_installment_field { grid-area: installment; }

/* Grid items ignore float, but WooCommerce's own form-row-first/-last still
   set a 48% width meant for the old floated two-up layout -- left alone,
   that would leave each field only half as wide as its now-single-column
   grid cell. Force every field row to fill its cell fully. */
.cab-checkout-main #payment .wc-credit-card-form .form-row {
	width: 100% !important;
	margin: 0 0 10px !important;
}

.cab-checkout-main #payment .wc-credit-card-form label {
	font-size: .85em !important;
	margin-bottom: 4px !important;
}

.cab-checkout-main #payment .wc-credit-card-form .input-text,
.cab-checkout-main #payment .wc-credit-card-form select {
	width: 100% !important;
	height: 36px !important;
	padding: 0 .8em !important;
	font-size: 14px !important;
	box-sizing: border-box !important;
}

/* jquery.card.js's animated card preview (.card-wrapper > .jp-card) defaults
   to a fixed 350x200 block -- scale it to its grid column's width and
   vertically center it alongside the (taller) stack of fields beside it. */
.cab-checkout-main #payment .wc-credit-card-form .card-wrapper {
	grid-area: card;
	align-self: center;
	max-width: 260px;
	width: 100%;
	margin: 0 auto;
}

.cab-checkout-main #payment .wc-credit-card-form .jp-card-container {
	width: 100%;
	height: 150px;
}

/* Narrow screens: two columns side by side would cramp both the fields and
   the card preview -- fall back to the original stacked single column
   (card preview first, same as turkpos's native DOM order). */
@media (max-width: 600px) {
	.cab-checkout-main #payment .wc-credit-card-form {
		grid-template-columns: 1fr;
		grid-template-areas:
			"card"
			"name"
			"number"
			"expiry"
			"cvv"
			"installment";
		row-gap: 0;
	}

	.cab-checkout-main #payment .wc-credit-card-form .card-wrapper {
		max-width: 260px;
		margin: 0 auto .8em;
	}
}

.cab-checkout-agreements-home {
	margin-top: 1.2em;
}

#checkout-sozlesmeler {
	background: #fff;
	border: 1px solid var(--cab-border);
	border-radius: 10px;
	padding: 1.2em;
}

@media (max-width: 900px) {
	.cab-checkout-layout {
		grid-template-columns: 1fr;
	}

	.cab-checkout-sidebar {
		position: static;
		width: 100%;
	}
}