/* Keep native WooCommerce fields and payment controls within the plugin's card layout. */

/* These surfaces stay transparent — the active theme paints them white/gray
   (beauty_learn3 style.css: cart-collaterals .shop_table !important,
   checkout-container, .total, review-order-table, #payment) but the plugin's
   .sm-card wrappers already provide the configurable surface. The theme loads
   after plugin styles and uses !important, so we need !important plus higher
   specificity (page wrapper + IDs where available). */
.sm-page form.checkout.woocommerce-checkout,
.sm-page #order_review.woocommerce-checkout-review-order,
.sm-page #order_review .woocommerce-checkout-review-order-table,
.sm-page table.shop_table,
.sm-page .cart-collaterals .shop_table,
.sm-page .woocommerce .cart-collaterals .shop_table {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* keep inner paddings the theme forces on the table shells neutralized too */
.sm-page table.shop_table,
.sm-page .cart-collaterals .shop_table {
    padding: 0 !important;
}
/* Theme paints table headers/footers light — transparent with soft border. */
.sm-page table.shop_table th,
.sm-page table.shop_table td,
.sm-page table.shop_table tfoot,
.sm-page .cart-collaterals .shop_table th,
.sm-page .cart-collaterals .shop_table td {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--sm-border, rgba(127, 127, 127, 0.25)) !important;
}
/* #payment boxes — theme forces #e4e4e7 / white with !important */
.sm-page #payment,
.sm-page #payment .payment_box,
.sm-page #payment .payment_box::before {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
/* coupon form the theme paints white */
.sm-page form.checkout_coupon {
    background: transparent !important;
    background-color: transparent !important;
}
/* customer-details inner the theme also colors */
.sm-page .woocommerce-billing-fields__field-wrapper input.input-text {
    background-color: var(--sm-input-bg, transparent) !important;
}

.sm-page .woocommerce-billing-fields h3,
.sm-page .woocommerce-additional-fields h3 { margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 700; }
.sm-page .form-row { margin: 0 0 1rem; }
.sm-page .form-row label { display: block; margin-bottom: .5rem; }
.sm-page .form-row .woocommerce-input-wrapper { display: block; }
.sm-page .form-row .input-text,
.sm-page .form-row select,
.sm-page .select2-container .select2-selection--single {
    width: 100%; min-height: 48px; border: 1px solid var(--sm-border-strong, var(--color-border, #d1d5db));
    border-radius: var(--sm-radius-sm, 12px); padding: .65rem .85rem; color: inherit;
    background: var(--sm-input-bg, transparent); font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sm-page .form-row textarea { min-height: 100px; }
.sm-page .form-row .input-text:focus,
.sm-page .form-row select:focus,
.sm-page .select2-container .select2-selection--single:focus {
    outline: none; border-color: var(--sm-primary, var(--color-primary, #d3283d));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sm-primary, var(--color-primary, #d3283d)) 20%, transparent);
}

/* Native selects (country / province / city) rendered like the other inputs. */
.sm-page .form-row select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .85rem center;
    background-size: 16px 16px;
    padding-inline-end: .85rem; padding-inline-start: .85rem;
    cursor: pointer;
}
.sm-page .form-row select option { background-color: var(--sm-input-bg, #fff); color: inherit; }

/* Select2 (enhanced selects) share the same surface. */
.sm-page .select2-container .select2-selection--single .select2-selection__rendered { line-height: inherit; }
.sm-page .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; }

.sm-page #payment { margin-top: 1.5rem; background: transparent; }
.sm-page #payment ul.payment_methods { padding: 0; list-style: none; border: 0; }
.sm-page #payment ul.payment_methods li { padding: 1rem 0; }
.sm-page #payment .payment_box { border-radius: 12px; }
.sm-page #payment .place-order { padding: 1rem 0 0; }

/* ------------------------------------------------------------------
   دکمه‌های خود ووکامرس (ثبت سفارش، اعمال کد تخفیف، محاسبه حمل) داخل
   صفحات افزونه از «رنگ دکمه‌های قالب» رنگ می‌گیرند.
   قالب این دکمه‌ها را با !important رنگ می‌کند و سطر
   `.woocommerce #payment #place_order` آن دقیقاً هم‌وزن
   `.sm-page #payment #place_order` است؛ چون style.css قالب بعد از این فایل
   لود می‌شود، در تساوی وزن قالب برنده می‌شد. پیشوند body یک element اضافه
   می‌کند تا وزن افزونه قطعاً بالاتر باشد.
   اگر این هماهنگی لازم نیست، همین بلوک را حذف کنید.
   ------------------------------------------------------------------ */
body .sm-page .woocommerce .button,
body .sm-page .woocommerce .wc-forward,
body .sm-page #payment #place_order,
body .sm-dash .woocommerce .button,
body .sm-dash .woocommerce .wc-forward {
    background: var(--sm-btn) !important;
    color: var(--sm-inv) !important;
}
body .sm-page .woocommerce .button:hover,
body .sm-page .woocommerce .wc-forward:hover,
body .sm-page #payment #place_order:hover,
body .sm-dash .woocommerce .button:hover,
body .sm-dash .woocommerce .wc-forward:hover {
    background: var(--sm-btn-dark) !important;
}

/* ------------------------------------------------------------------
   سایدبار داشبورد کاربری — آیتم فعال
   ------------------------------------------------------------------
   قالب beauty_learn3 خودش منوی حساب کاربری را رندر می‌کند
   (woocommerce/myaccount/navigation.php) و تمپلیت افزونه را سایه می‌اندازد،
   پس آیتم فعال با کلاس db-active می‌آید، نه sm-nav__item--active.
   رنگش در قالب هارد‌کد است:
       .db-menu-item.db-active a         { background:#1c1d22; color:#fff }
       .db-menu-item.db-active a … svg   { stroke:#fff }
   این بلوک همان را با «رنگ اصلی» سایت عوض می‌کند. مقدار از --sm-primary
   می‌آید که خودش با قرارداد «قالب اول، افزونه دوم» پر می‌شود
   (sm_get_site_colors در includes/woocommerce-checkout.php): رنگ اصلی قالب،
   و اگر در /admin.php?page=sm-wc-settings تیک «رنگ اصلی» خورده باشد رنگ خود
   افزونه. متن و آیکون با --sm-inv (رنگ متن دکمه‌های قالب) رنگ می‌گیرند تا روی
   پس‌زمینه رنگی خوانا بمانند.
   پیشوند body وزن را به (0,3,2)/(0,4,3) می‌برد؛ قالب (0,2,1)/(0,3,2) دارد و
   چون style.css قالب بعد از این فایل لود می‌شود، در تساوی وزن قالب برنده
   می‌شد. قالب روی این دو قاعده !important ندارد، پس وزن کافی است.
   ------------------------------------------------------------------ */
body .db-sidebar .db-menu-item.db-active a {
    background: var(--sm-primary);
    color: var(--sm-inv);
}
body .db-sidebar .db-menu-item.db-active a .db-menu-icon svg {
    stroke: var(--sm-inv);
}

.sm-page #place_order { width: 100%; padding: 1rem; border: 0; border-radius: 12px; background: var(--sm-btn, var(--color-primary, #d3283d)); color: var(--sm-inv, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.sm-page .sm-shipping-table { width: 100%; border: 0; }
.sm-page .sm-shipping-table th, .sm-page .sm-shipping-table td { padding: .5rem 0; border: 0; }
.sm-page .sm-shipping-table ul { margin: 0; padding: 0; list-style: none; }
@media (max-width: 600px) {
    .sm-page .form-row-first, .sm-page .form-row-last { float: none; width: 100%; }
}