/* Page defaults */
body {
	font-family: "Onest", Sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 25.5px;
}

/* ---------------------------------------------------------------
   Mobile safety net
   Keep full-bleed image sections and stray grid gutters from pushing
   the page wider than the phone screen (the "cut off at the sides"
   symptom). Media never overflows its column. Wide data tables scroll
   inside their own .table-responsive wrapper, so nothing is clipped.
   --------------------------------------------------------------- */
html,
body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
}

/* Bootstrap config */

/* Boostrap Black background */
:root[data-bs-theme="dark"] {
    --bs-body-bg: #000000;
    --bs-body-color: #ffffff;

    /* Optional: make cards & surfaces darker */
    --bs-secondary-bg: #111111;
    --bs-tertiary-bg: #1a1a1a;
}

.accordion-button:not(.collapsed) {
	/* Change the background color of the active (open) button */
	background-color: #97F91B;
	/* Change the text color of the active (open) button */
	color: #97F91B;
}

.accordion-button:focus {
	/* Optional: removes the default blue focus border/shadow */
	box-shadow: none;
}


/* Fonts */
.permanent-marker-regular {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
}

.onest-title {
    font-family: "Onest", Sans-serif;
    font-size: clamp(1.75rem, 6vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: #FFFFFF;
}

.roboto {
    font-family: "Roboto", sans-serif;
}

.large-title {
    font-size: clamp(2.25rem, 9vw, 60px);
    font-weight: 800;
	line-height: 1.1;
}

.bebas-neue {
	font-family: "Bebas Neue", Sans-serif;
}

.bebas-neue-title {
	font-family: "Bebas Neue", Sans-serif;
	font-size: clamp(2.75rem, 11vw, 60px);
	font-weight: 800;
	line-height: 1.05;
	color: #FFFFFF;
}

.bebas-neue-subtitle {
	font-family: "Bebas Neue", Sans-serif;
	font-size: 23px;
	color: #FFFFFF;
}

.text-black {
	color: #000000;
}

.text-green {
	color: #97F91B;
}

.text-light-grey {
	color: #8f8f8f;
}

.link-green {
	color: #97F91B;
	text-decoration: none;
}

.link-white {
	color: #FFFFFF;
	text-underline-offset: 0.3em;
}



/* Buttons */

/* Custom CTA Button */
.btn-cta {
    background-color: #97F91B;
    color: #000000;
    font-weight: 400;
    border: 2px solid #97F91B;
    border-radius: 0.5rem;
    padding: 0.6rem 1.4rem;
    transition: all 0.3s ease;
    font-family: "Bebas Neue", Sans-serif;
}

.btn-cta:hover {
    background-color: #97F91B;
    border-color: #97F91B;
    color: #000000;
    transform: translateY(-1px);
}

.btn-cta:active {
    background-color: #97F91B; 
    border-color: #97F91B;
    color: #000000;
    transform: translateY(0);
}

.btn-cta:focus {
	outline: none;
}


.btn-outline-cta {
    background-color: transparent;
    color: #FFFFFF;
    font-weight: 400;
    border: 2px solid #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.6rem 1.4rem;
    transition: all 0.3s ease;
    font-family: "Bebas Neue", Sans-serif;
}

.btn-outline-cta:hover {
    background-color: #97F91B;
    border-color: #97F91B;
    color: #000000;
    transform: translateY(-1px);
}

.btn-outline-cta:active {
    background-color: #97F91B; 
    border-color: #97F91B;
    color: #000000;
    transform: translateY(0);
}

.btn-outline-cta:focus {
	outline: none;
}

/* Header */
.header-logo {
	max-width: 100px;
}

/* Footer */
.footer-logo {
	max-width: 130px;
}

.footer-link {
	font-size: 15px;
	text-decoration: none;
}

button.footer-link {
    border: none;
    background-color: transparent;
    padding: 0;
}

.footer-link:hover {
	color:#97F91B !important;
}

.footer-social-logo {
	max-width: 20px;
	color: white !important;
}

.footer-social-logo:hover {
	color: #97F91B;
}


/* ---------------------------------------------------------------
   Account / dashboard surfaces
   Reusable brand primitives for the authenticated (logged-in) pages
   --------------------------------------------------------------- */

/* Small hand-drawn marker label that sits above a page/section title */
.brand-eyebrow {
	font-family: "Permanent Marker", cursive;
	color: #97F91B;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	margin-bottom: 0.25rem;
}

/* Dark, slightly raised surface used to group content */
.brand-card {
	background-color: #0f0f0f;
	border: 1px solid #222222;
	border-radius: 0.75rem;
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.brand-card {
		padding: 1.75rem 2rem;
	}
}

.brand-card + .brand-card {
	margin-top: 1.25rem;
}

.brand-card-title {
	font-family: "Onest", Sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 0;
}

/* Page section divider — groups related cards (e.g. security, orders) */
.section-heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: "Bebas Neue", Sans-serif;
	font-size: 1.9rem;
	letter-spacing: 1px;
	color: #ffffff;
	padding-bottom: 0.6rem;
	margin: 2.5rem 0 1.25rem;
	border-bottom: 1px solid #262626;
}

.section-heading::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 1.25rem;
	border-radius: 2px;
	background-color: #97F91B;
}

/* Status pills — order status, 2FA state, etc. */
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	white-space: nowrap;
}

.status-pill::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: currentColor;
}

.status-pill.is-positive {
	color: #97F91B;
	background-color: rgba(151, 249, 27, 0.12);
	border-color: rgba(151, 249, 27, 0.30);
}

.status-pill.is-pending {
	color: #ffc94d;
	background-color: rgba(255, 201, 77, 0.12);
	border-color: rgba(255, 201, 77, 0.30);
}

.status-pill.is-neutral {
	color: #9aa0a6;
	background-color: rgba(154, 160, 166, 0.12);
	border-color: rgba(154, 160, 166, 0.30);
}

.status-pill.is-negative {
	color: #ff6b6b;
	background-color: rgba(255, 107, 107, 0.12);
	border-color: rgba(255, 107, 107, 0.30);
}

/* Branded table — sits inside a .brand-card */
.brand-table {
	--bs-table-bg: transparent;
	margin-bottom: 0;
}

.brand-table thead th {
	font-family: "Bebas Neue", Sans-serif;
	font-weight: 400;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #8f8f8f;
	border-bottom: 1px solid #222222;
}

.brand-table tbody td,
.brand-table tbody th {
	border-bottom: 1px solid #1a1a1a;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	vertical-align: middle;
}

.brand-table tbody tr:last-child td,
.brand-table tbody tr:last-child th {
	border-bottom: 0;
}

/* Full order GUID — de-emphasised so it doesn't dominate the row */
.order-id {
	font-size: 0.8rem;
	font-weight: 400;
	color: #8f8f8f;
}


/* ---------------------------------------------------------------
   Auth pages (login / 2FA / create account)
   Narrow centered form flow, shared across all three screens.
   --------------------------------------------------------------- */
.auth-page {
	max-width: 460px;
	margin: 0 auto;
	padding-top: 1rem;
	padding-bottom: 3rem;
}

.auth-pagehead {
	text-align: center;
	margin-bottom: 1.75rem;
}

.auth-pagehead .eyebrow {
	font-family: "Permanent Marker", cursive;
	color: #97F91B;
	font-size: 1rem;
	letter-spacing: 0.5px;
	margin-bottom: 0.4rem;
}

.auth-pagehead h1 {
	font-family: "Bebas Neue", Sans-serif;
	font-size: clamp(2.25rem, 6vw, 3rem);
	letter-spacing: 1px;
	margin: 0;
}

.auth-pagehead .subtext {
	color: #8f8f8f;
	font-size: 0.95rem;
	margin: 0.6rem 0 0;
}

.auth-page .form-control {
	background-color: #0d0d0d;
	border-color: #2a2a2a;
	color: #ffffff;
}

.auth-page .form-control:focus {
	background-color: #0d0d0d;
	border-color: #97F91B;
	color: #ffffff;
	box-shadow: 0 0 0 0.15rem rgba(151, 249, 27, 0.25);
}

.auth-page .form-control::placeholder {
	color: #6f6f6f;
}

.auth-page .btn-cta:disabled {
	background-color: #2a2a2a;
	border-color: #2a2a2a;
	color: #7a7a7a;
	transform: none;
	cursor: not-allowed;
}

.auth-label {
	display: block;
	font-size: 0.9rem;
	color: #b8b8b8;
	margin: 0 0 0.4rem;
}

.auth-foot {
	text-align: center;
	margin-top: 1.5rem;
}


/* ---------------------------------------------------------------
   Modals — branded dialog chrome (2FA setup/disable, etc.)
   --------------------------------------------------------------- */
.brand-modal .modal-content {
	background-color: #0b0b0b;
	border: 1px solid #222222;
	border-radius: 1rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(151, 249, 27, 0.08);
}

.brand-modal .modal-header {
	border-bottom: 1px solid #1f1f1f;
	padding: 1.5rem 1.75rem 1.1rem;
}

.brand-modal .modal-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: "Bebas Neue", Sans-serif;
	font-size: 1.6rem;
	letter-spacing: 1px;
	color: #ffffff;
}

.brand-modal .modal-title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.45rem;
	height: 1.1rem;
	border-radius: 2px;
	background-color: #97F91B;
}

.brand-modal .modal-body {
	padding: 1.6rem 1.75rem 1.85rem;
}

.brand-modal .spinner-border {
	color: #97F91B;
}

/* Step marker — "1 / SCAN & CONNECT" etc, used inside modal steps */
.modal-step-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}

.modal-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-color: rgba(151, 249, 27, 0.12);
	border: 1px solid rgba(151, 249, 27, 0.35);
	color: #97F91B;
	font-family: "Bebas Neue", Sans-serif;
	font-size: 0.85rem;
	flex: 0 0 auto;
}

.modal-step-label {
	font-family: "Permanent Marker", cursive;
	color: #97F91B;
	font-size: 0.85rem;
	letter-spacing: 0.4px;
}

/* QR code frame */
.qr-frame {
	display: inline-block;
	padding: 0.85rem;
	background-color: #ffffff;
	border-radius: 0.75rem;
	border: 2px solid #97F91B;
	box-shadow: 0 0 0 4px rgba(151, 249, 27, 0.1);
}

.qr-frame img {
	display: block;
	width: 160px;
	height: 160px;
}

.manual-key-box {
	margin-top: 1rem;
	background-color: #0d0d0d;
	border: 1px solid #2a2a2a;
	border-radius: 0.6rem;
	padding: 0.75rem 1rem;
	text-align: left;
}

.manual-key-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #97F91B;
	letter-spacing: 1px;
	word-break: break-all;
}

/* Verification code input — big, centered, spaced-out digits */
.code-input {
	text-align: center;
	font-family: "Bebas Neue", Sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
}

.code-input::placeholder {
	letter-spacing: normal;
}

/* Recovery codes grid */
.recovery-codes-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}

@media (max-width: 400px) {
	.recovery-codes-grid {
		grid-template-columns: 1fr;
	}
}

.recovery-code-chip {
	background-color: #0d0d0d;
	border: 1px solid #2a2a2a;
	border-radius: 0.5rem;
	padding: 0.55rem 0.75rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 1px;
	color: #dcdcdc;
	text-align: center;
}


/* ---------------------------------------------------------------
   Admin — shop dashboard & product management surfaces
   Reuses .brand-card / .brand-table / .status-pill / .brand-eyebrow
   from the account primitives above. The Orders/Payments/Order/Payment
   views keep their own Bootstrap card styling and stay untouched.
   --------------------------------------------------------------- */

/* Page header: eyebrow + Bebas title, with optional actions pinned right */
.admin-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 1.75rem;
}

.admin-head .brand-eyebrow {
	margin-bottom: 0.1rem;
}

.admin-head h1 {
	font-family: "Bebas Neue", Sans-serif;
	font-size: clamp(2.25rem, 6vw, 3.25rem);
	letter-spacing: 1px;
	line-height: 1;
	margin: 0;
	word-break: break-word;
}

.admin-head-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

/* Section header row that carries an action button on the right */
.admin-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 2.5rem 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid #262626;
}

.admin-section-head .section-heading {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Clickable nav tiles — admin landing + shop hub */
.admin-nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
}

.admin-nav-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	background-color: #0f0f0f;
	border: 1px solid #222222;
	border-radius: 0.75rem;
	color: #ffffff;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.admin-nav-card:hover {
	transform: translateY(-3px);
	border-color: rgba(151, 249, 27, 0.55);
	background-color: #121212;
	color: #ffffff;
}

.admin-nav-card .icon {
	font-size: 1.9rem;
	line-height: 1;
	color: #97F91B;
	margin-bottom: 0.35rem;
}

.admin-nav-card .title {
	font-family: "Bebas Neue", Sans-serif;
	font-size: 1.55rem;
	letter-spacing: 0.5px;
}

.admin-nav-card .desc {
	color: #8f8f8f;
	font-size: 0.9rem;
	line-height: 1.4;
}

.admin-nav-card .go {
	margin-top: auto;
	padding-top: 0.6rem;
	color: #97F91B;
	font-family: "Bebas Neue", Sans-serif;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: gap 0.2s ease;
}

.admin-nav-card:hover .go {
	gap: 0.7rem;
}

/* Compact summary strip (variant price / stock at a glance) */
.admin-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
}

.admin-summary .stat .label {
	display: block;
	font-family: "Bebas Neue", Sans-serif;
	letter-spacing: 0.5px;
	color: #8f8f8f;
	font-size: 0.85rem;
}

.admin-summary .stat .value {
	font-size: 1.25rem;
	font-weight: 600;
}

/* Muted GUID / ref shown in tables (category id, sku, etc.) */
.admin-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	color: #8f8f8f;
	word-break: break-all;
}

/* Empty state inside a brand-card */
.admin-empty {
	text-align: center;
	color: #8f8f8f;
	padding: 2.75rem 1rem;
}

.admin-empty .bi {
	font-size: 2rem;
	color: #444;
	display: block;
	margin-bottom: 0.5rem;
}

/* Green focus / checkbox accents inside admin forms & modals */
.admin-form .form-control:focus,
.admin-form .form-select:focus,
.admin-form .form-check-input:focus {
	border-color: #97F91B;
	box-shadow: 0 0 0 0.15rem rgba(151, 249, 27, 0.25);
}

.admin-form .form-check-input:checked {
	background-color: #97F91B;
	border-color: #97F91B;
}

/* Image editor rows on the variant page */
.admin-image-preview {
	max-height: 120px;
	border-radius: 0.5rem;
	border: 1px solid #222;
}

/* brand-modal footer (header/body already styled with the account modals) */
.brand-modal .modal-footer {
	border-top: 1px solid #1f1f1f;
	padding: 1.1rem 1.75rem 1.4rem;
}