/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	--color-primary: #0F4AC6; /* primary modern blue */
	--color-primary-600: #0B3FAF; /* darker primary */
	--color-primary-600-rgb: 11,63,175; /* darker primary RGB */
	--color-primary-rgb: 15,74,198; /* primary RGB for rgba() usage */
	--color-accent: #FF7A18; /* accent / CTA */
	--color-success: #16A34A; /* green */
	--color-success-rgb: 22,163,74; /* success RGB */
	--color-bg: #FFFFFF; /* white */
	--color-bg-alt: #F8FAFC; /* light gray */
	--color-text: #111827; /* dark gray */
	--color-text-secondary: #6B7280; /* medium gray */
	--color-alert: #FF9F1C; /* orange */
	--color-danger: #E63946; /* red */
	--color-soft-blue: #EEF2FF; /* subtle overlay */
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.layout-two-column { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 16px; }
.store-info { background: var(--color-bg-alt); padding: 16px; border-radius: 8px; }
.store-content { padding: 16px; }
.coupon-card { background: var(--color-bg); border: 1px solid #eaeaea; padding: 18px; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.05); }
.coupon-card:hover { background: var(--color-soft-blue); transition: background-color .18s ease-in-out; transform: translateY(-2px); }
.coupon-card.mobile { padding: 12px; }
.coupon-card.expired { border-color: var(--color-danger); opacity: 0.6; position: relative; }
.coupon-card.expired::after { content: ""; position:absolute; inset:0; background: rgba(230,57,70,0.08); border-radius:8px; pointer-events:none; }
.coupon-code { color: var(--color-primary); font-weight:600; font-size:16px; font-family: 'Inter', system-ui, -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.coupon-description { color: var(--color-text); font-size: 14px; }
.btn-primary { background: var(--color-primary); color: white; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--color-primary-600-rgb), 0.06); }
.btn-secondary { background: var(--color-success); color: white; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--color-primary-600); color: white; transform: translateY(-2px); }
.btn-secondary:hover { filter: brightness(0.96); }
.btn-ghost { background: transparent; color: var(--color-primary); padding: 10px 20px; border-radius: 4px; border: none; cursor: pointer; }
.btn-small { padding: 6px 12px; border-radius: 4px; }
.upvote-btn { background: var(--color-success); color: white; padding: 8px 12px; border-radius: 9999px; box-shadow: 0 4px 12px rgba(var(--color-success-rgb), 0.08); font-weight: 600; }
.share-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: transparent; transition: background-color .12s ease, transform .12s ease; }
.share-icon:hover { background: var(--color-soft-blue); transform: translateY(-2px); }
.share-icon + .share-icon { margin-left: 8px; }
.badge-trending { background: var(--color-alert); color: white; padding: 6px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
/* Navbar */
.site-header { background: var(--color-bg); position: sticky; top: 0; z-index: 50; height: 64px; box-shadow: 0 2px 8px rgba(16,24,40,0.04); backdrop-filter: blur(4px); }
.site-header .container { padding-left: 16px; padding-right: 16px; }
.site-header .logo { height: 40px; }
.site-header .logo img { height: 40px; }
.nav-link { color: var(--color-text-secondary); }
.nav-link:hover { background: var(--color-soft-blue); color: var(--color-primary); }
.nav-cta { background: var(--color-accent); color: white; padding: 10px 20px; border-radius: 6px; }
.nav-cta:hover { filter: brightness(0.95); }
.language-item { color: var(--color-text-secondary); }
.language-item.selected { color: var(--color-alert); font-weight: 600; }

/* Section spacing */
.section { padding-top: 64px; padding-bottom: 64px; }
.section.alt { background: var(--color-bg-alt); }

/* Utilities */
.text-dark { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.gap-24 { gap: 24px; }

/* Responsive header sizes */
@media (max-width: 640px) {
	.site-header { height: 50px; }
	.site-header .container { padding-left: 12px; padding-right: 12px; }
	.coupon-card { padding: 12px; }
}