:root{
	--bg: #ffffff;
	--panel: #f7f9fc;
	--muted: #6b7280; /* gray-500 */
	--accent: #0ea5a4; /* teal-ish */
	--accent-600: #0b8b89;
	--danger: #bf360c;
	--glass: rgba(255,255,255,0.6);
	--card-shadow: 0 6px 18px rgba(3,15,24,0.06);
	--card-elev: 0 3px 8px rgba(3,15,24,0.08);
	--radius: 12px;
	--radius-sm: 8px;
	--max-width: 1160px;
	--content-gap: 20px;
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	--flow-space: 1rem;
}

/* Reset & sensible defaults */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: var(--font-sans), serif;
	line-height:1.45;
	color:#0f1724;
	background:linear-gradient(180deg,#fbfdff 0%, #f6f9fb 100%);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	padding:24px 18px;
}

/* Skip link for accessibility (visible on focus) */
.skip-link{
	position:fixed;
	left:12px;
	top:12px;
	background:#0f1724;
	color:#fff;
	padding:8px 12px;
	border-radius:6px;
	z-index:9999;
	transform:translateY(-8px);
	opacity:0;
	transition:transform .18s ease, opacity .18s ease;
}
.skip-link:focus{
	transform:translateY(0);
	opacity:1;
	outline:3px solid rgba(14,165,164,0.18);
}

/* Site header */
.site-header{
	max-width:var(--max-width);
	margin:0 auto 22px auto;
	background:transparent;
	padding:10px 14px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.header-top{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.package-type{
	display:flex;
	color: #6b7885;
	font-weight: bold;
}
.brand-left{
	display:flex;
	align-items:center;
	gap:12px;
}
.company-logo{
	width:56px;
	height:56px;
	object-fit:contain;
	border-radius:10px;
	box-shadow:var(--card-elev);
	background:var(--panel);
	padding:6px;
}
.brand-text{
	display:flex;
	flex-direction:column;
}
.header-title{
	font-weight:700;
	font-size:1.15rem;
	letter-spacing:0.2px;
}
#current-time{
	font-size:0.85rem;
	color:var(--muted);
}
.header-actions{
	display:flex;
	gap:12px;
	align-items:center;
}
.header-cta button{
	background:var(--accent);
	color:white;
	border:none;
	padding:10px 14px;
	border-radius:10px;
	font-weight:600;
	cursor:pointer;
	box-shadow:0 6px 18px rgba(14,165,164,0.12);
	transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.header-cta button[aria-disabled="true"]{
	opacity:0.6;
	cursor:not-allowed;
	background:linear-gradient(180deg,#b7fffd,#88eee9);
}
.header-cta button:focus{
	outline:3px solid rgba(14,165,164,0.18);
}
.header-cta button:hover:not([aria-disabled="true"]) {
	transform:translateY(-2px);
}

/* Main content */
main{
	max-width:var(--max-width);
	margin:8px auto 34px auto;
	display:block;
}

.section{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--content-gap);
	align-items:start;
}
/* Responsive layout */
@media (max-width:980px){
	.section{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:640px){
	.section{grid-template-columns:1fr}
	body{padding:12px}
}

/* Card base */
.card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:linear-gradient(180deg, #fff 0%, var(--panel) 100%);
	padding:16px;
	border-radius:var(--radius);
	box-shadow:var(--card-shadow);
	border:1px solid rgba(15,23,36,0.04);
	transition:transform .16s ease, box-shadow .16s ease, border-color .12s ease;
	cursor:pointer;
	min-height:86px;
}
.card:focus{
	outline:none;
	transform:translateY(-6px);
	box-shadow:0 18px 36px rgba(3,15,24,0.12);
	border-color:rgba(14,165,164,0.18);
}
.card[aria-pressed="true"]{
	border:1px solid var(--accent-600);
	box-shadow:0 14px 34px rgba(14,165,164,0.08);
}
.card-left{
	display:flex;
	gap:12px;
	align-items:center;
}
.card-icon{
	display:inline-grid;
	place-items:center;
	width:64px;
	height:64px;
	border-radius:12px;
	background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,250,250,0.8));
	box-shadow:var(--card-elev);
}
.card-icon svg{width:48px;height:48px;display:block}

.card-meta h2{
	margin:0 0 6px 0;
	font-size:1.02rem;
	letter-spacing:0.2px;
}
.card-meta p{
	margin:0;
	font-size:0.9rem;
	color:var(--muted);
}


/* Payment list styling */
.payment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

/* each payment option */
.payment-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(15,23,36,0.03);
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
	cursor: pointer;
	user-select: none;
	min-width: 120px;
	box-shadow: 0 6px 18px rgba(3,15,24,0.04);
	border: 1px solid rgba(12,20,40,0.03);
	text-decoration: none;
	color: inherit;
	font-weight: 700;
}

/* Icon sizing */
.pay-icon { flex: 0 0 auto; width: 40px; height: 40px; }

/* label */
.payment-label { font-size: 0.98rem; color: #07122a; }

/* hover/focus */
.payment-item:hover,
.payment-item:focus {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(3,15,24,0.10);
	background: rgba(255,255,255,0.96);
	outline: none;
}

/* keyboard focus ring */
.payment-item:focus {
	outline: 3px solid rgba(99,91,255,0.12); /* subtle focus ring (uses stripe blurple for visibility) */
	border-radius: 12px;
}

/* Brand-specific light backgrounds to hint brand color (subtle) */
#paypal { background: linear-gradient(90deg, rgba(0,48,135,0.06), rgba(0,156,222,0.05)); }
#stripe { background: linear-gradient(90deg, rgba(99,91,255,0.06), rgba(99,91,255,0.03)); }
#mpesa  { background: linear-gradient(90deg, rgba(48,181,74,0.06), rgba(48,181,74,0.03)); }

/* When icons are inline SVGs with text, ensure font smoothing & alignment */
.payment-item .pay-icon text {
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	shape-rendering: geometricPrecision;
}

/* Responsive: stack on very small screens */
@media (max-width:420px){
	.payment-list {
		gap: 10px;
		justify-content: flex-start;
	}
	.payment-item {
		min-width: 110px;
		padding: 10px 10px;
		gap: 8px;
	}
	.payment-label { font-size: 0.95rem; }
}


/* PRICE styling (updated for desktop items)
   - kept .price class name unchanged (JS/FTL depend on it)
   - improved visual hierarchy for professional quotes
*/
.price{
	font-weight:700;
	color:#0f1724;
	background:linear-gradient(180deg,#fff,#f3f7f9);
	padding:10px 14px;
	border-radius:10px;
	box-shadow:0 6px 18px rgba(3,15,24,0.06);
	font-size:0.95rem;
	border:1px solid rgba(15,23,36,0.04);
	min-width:fit-content;
	white-space:nowrap;
	text-align:right;
}

/* Price accent for ranges: enhance readability */
.price::before{
	content:"";
	display:inline-block;
	margin-right:8px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:linear-gradient(180deg,var(--accent),var(--accent-600));
	vertical-align:middle;
	box-shadow:0 2px 6px rgba(14,165,164,0.12);
}

/* Slightly larger price for high-complexity domains (visual hint) */
.card.analytics .price,
.card.hospitality .price,
.card.health .price {
	font-size:1.02rem;
	padding:10px 16px;
}

/* Card variations (kept as originally defined) */
.card.pos .card-icon{background:linear-gradient(180deg,#fff5f3,#fff2f0)}
.card.pos .card-icon svg rect{filter:none}
.card.finance .card-icon{background:linear-gradient(180deg,#fffaf0,#fff7e6)}
.card.analytics .card-icon{background:linear-gradient(180deg,#f3fbff,#eaf6ff)}
.card.management .card-icon{background:linear-gradient(180deg,#fff8f1,#fff2e6)}
.card.crm .card-icon{background:linear-gradient(180deg,#f0fbff,#e7f7ff)}
.card.health .card-icon{background:linear-gradient(180deg,#f7fff0,#f0ffea)}
.card.hospitality .card-icon{background:linear-gradient(180deg,#fffaf0,#fff7e6)}

.card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(3,15,24,0.08)}
.card:active{transform:translateY(-2px)}

/* Ensure keyboard-focusable indicators are visible */
.card:focus-visible{outline:3px solid rgba(14,165,164,0.14); border-radius:var(--radius)}

/* CTA container (for global actions) */
.cta-container{margin-top:18px;display:flex;justify-content:center}
.cta-container a{
	background:var(--accent);
	color:white;
	padding:12px 18px;
	border-radius:12px;
	text-decoration:none;
	font-weight:700;
}

/* Confirmation modal */
.confirm-modal{
	position:fixed;
	inset:0;
	display:none; /* toggled via JS */
	place-items:center;
	z-index:9998;
}
.confirm-modal[aria-hidden="false"]{display:grid}
.confirm-modal::before{
	content:"";
	position:fixed;
	inset:0;
	background:rgba(3,6,12,0.48);
	backdrop-filter:blur(3px) saturate(1.02);
}
.confirm-panel{
	background:linear-gradient(180deg,#fff,#fbfdff);
	border-radius:14px;
	padding:20px;
	width:min(560px, calc(100% - 40px));
	box-shadow:0 20px 50px rgba(3,15,24,0.2);
	position:relative;
	z-index:9999;
}
.confirm-close{
	position:absolute;
	right:12px;
	top:12px;
	background:transparent;
	border:none;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	color:var(--muted);
}
.confirm-close:focus{outline:3px solid rgba(14,165,164,0.12);border-radius:8px}
.confirm-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.confirm-btn{
	padding:10px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:700
}
.confirm-btn.cancel{background:transparent;border:1px solid rgba(15,23,36,0.06)}
.confirm-btn.ok{background:var(--accent);color:white}
.confirm-btn:focus{outline:3px solid rgba(14,165,164,0.12)}

/* Tiny toast */
#toast{
	position:fixed;
	right:18px;
	bottom:18px;
	min-width:200px;
	max-width:420px;
	padding:10px 12px;
	border-radius:10px;
	box-shadow:0 8px 20px rgba(3,15,24,0.12);
	background:#0f1724;color:#fff;display:none;z-index:10000;font-weight:600
}
#toast.show{display:block; animation:toast-in .28s ease}
@keyframes toast-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* Footer */
footer{
	max-width:var(--max-width);
	margin:18px auto 40px auto;
	padding:12px 16px;
	color:var(--muted);
	font-size:0.9rem;
	text-align:center;
}

/* Utilities */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.flex{display:flex}
.center{display:grid;place-items:center}
.mt-6{margin-top:1.5rem}

/* Print adjustments */
@media print{
	body{background:#fff;padding:0}
	.section{grid-template-columns:repeat(2,1fr)}
	footer,.header-cta,#toast,.confirm-close{display:none}
}

/* Small accessibility helpers for color contrast improvement on lower-end displays */
@media (prefers-contrast: more){
	.card{border-color:rgba(15,23,36,0.12)}
	.price{box-shadow:0 8px 18px rgba(3,15,24,0.12)}
}

/* Desktop-specific notes (styling helpers only; no class renames)
   - If you want to add "enterprise" visual variant, toggle .card.enterprise via JS.
*/
.card.enterprise{ border:1px solid rgba(14,165,164,0.14); box-shadow:0 20px 60px rgba(14,165,164,0.06) }
.card.enterprise .price{ background: linear-gradient(180deg,#f7fffb,#e6fffc); border-color: rgba(14,165,164,0.06); }

/* End of file */