/* ui_ux_pro — storefront (Frappe website / webshop)
 *
 * NOTE: every global rule is scoped `body:not([data-path="login"])` so the
 * Frappe /login page renders with stock styling (white card, default blue
 * primary button). A small reset block at the bottom also neutralises the
 * ui_ux_pro brand utility classes (`pl-btn-primary` etc.) that the login
 * form markup itself includes.
 */

@import url("design_system.css");

body:not([data-path="login"]) {
	font-family: var(--pl-font-sans);
	background: var(--pl-bg);
	color: var(--pl-text);
	-webkit-font-smoothing: antialiased;
}
body:not([data-path="login"]) h1,
body:not([data-path="login"]) h2,
body:not([data-path="login"]) h3 {
	font-family: var(--pl-font-display);
	letter-spacing: -0.01em;
}

body:not([data-path="login"]) .navbar {
	background: var(--pl-surface) !important;
	border-bottom: 1px solid var(--pl-border) !important;
	box-shadow: none !important;
}
body:not([data-path="login"]) .navbar .navbar-brand { color: var(--pl-text); font-weight: 700; }
body:not([data-path="login"]) .navbar a,
body:not([data-path="login"]) .navbar .nav-link { color: var(--pl-text); }
body:not([data-path="login"]) .navbar a:hover { color: var(--pl-accent); }

body:not([data-path="login"]) .web-footer {
	background: var(--pl-surface-2);
	border-top: 1px solid var(--pl-border);
	color: var(--pl-text-muted);
}

body:not([data-path="login"]) .product-card,
body:not([data-path="login"]) .item-card,
body:not([data-path="login"]) .card {
	border: 1px solid var(--pl-border) !important;
	border-radius: var(--pl-radius-lg) !important;
	box-shadow: var(--pl-shadow-sm) !important;
	background: var(--pl-surface) !important;
	transition: transform var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease);
}
body:not([data-path="login"]) .product-card:hover,
body:not([data-path="login"]) .item-card:hover,
body:not([data-path="login"]) .card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pl-shadow) !important;
}

body:not([data-path="login"]) .btn-primary {
	background: var(--pl-brand) !important;
	border-color: var(--pl-brand) !important;
	color: #fff !important;
	border-radius: var(--pl-radius) !important;
}
body:not([data-path="login"]) .btn-primary:hover {
	background: var(--pl-brand-600) !important;
	border-color: var(--pl-brand-600) !important;
}

body:not([data-path="login"]) .cart-drawer {
	position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 90vw);
	background: var(--pl-glass-bg);
	backdrop-filter: blur(var(--pl-glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--pl-glass-blur)) saturate(140%);
	border-left: 1px solid var(--pl-glass-border);
	box-shadow: var(--pl-shadow-lg);
	transform: translateX(100%);
	transition: transform var(--pl-dur-slow) var(--pl-ease);
	z-index: 9000;
}
body:not([data-path="login"]) .cart-drawer.is-open { transform: translateX(0); }

/* === Login page reset — minimal ============================================
 * Strategy: let Frappe's stock `.btn-primary` win the cascade (near-black bg
 * with white text — that's the professional Frappe default). Only override:
 *   - body/card bg (white)
 *   - secondary social buttons (high-contrast gray)
 *   - inputs / labels
 *   - links
 * We do NOT touch .btn-primary or .btn-login at all so Frappe's own styling
 * (which is known to be readable) is applied as-is.
 */

body[data-path="login"] {
	background: #ffffff !important;
	color: #1f272e !important;
}
body[data-path="login"] .for-login,
body[data-path="login"] main,
body[data-path="login"] .page_content {
	background: #ffffff !important;
}

body[data-path="login"] .card,
body[data-path="login"] .page-card,
body[data-path="login"] .login-content {
	background: #ffffff !important;
	border: 1px solid #e2e6e9 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	transform: none !important;
	color: #1f272e !important;
}

body[data-path="login"] label,
body[data-path="login"] .control-label,
body[data-path="login"] .form-label,
body[data-path="login"] .text-muted,
body[data-path="login"] small {
	color: #4c5a67 !important;
}

body[data-path="login"] .form-control {
	background: #ffffff !important;
	color: #1f272e !important;
	border: 1px solid #d1d8dd !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	-webkit-text-fill-color: #1f272e !important;
}
body[data-path="login"] .form-control:focus {
	border-color: #2490ef !important;
	box-shadow: 0 0 0 2px rgba(36, 144, 239, 0.15) !important;
}
body[data-path="login"] .form-control::placeholder {
	color: #8a96a3 !important;
	opacity: 1 !important;
}

/* SECONDARY (Google / Email-link) — force readable contrast */
body[data-path="login"] .btn-login-option {
	background: #f4f5f6 !important;
	background-color: #f4f5f6 !important;
	color: #1f272e !important;
	border: 1px solid #d1d8dd !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	font-weight: 500 !important;
}
body[data-path="login"] .btn-login-option * {
	color: #1f272e !important;
}
body[data-path="login"] .btn-login-option:hover {
	background: #e6e8eb !important;
	background-color: #e6e8eb !important;
	border-color: #b8c2cc !important;
}

body[data-path="login"] a,
body[data-path="login"] a:visited {
	color: #2490ef !important;
	text-decoration: none !important;
}
body[data-path="login"] a:hover {
	color: #1a7ad9 !important;
	text-decoration: underline !important;
}