/* ============================================================
   KARVE brand skin — aligns the eshop with karve.gr look & feel
   Loaded LAST (linked from footer.php) so it wins the cascade.
   To adapt for another brand site: change the variables below,
   the @font-face, and the @import.
   Rollback: remove the <link> in footer.php.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

@font-face {
	font-family: 'Glinte';
	src: url('../../fonts/Glinte.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--karve-bg: #000;
	--karve-panel: #212721;   /* karve.gr "dark green" section color */
	--karve-card: #282828;    /* karve.gr package-card grey */
	--karve-card-selected: #3d423d;
	--karve-text: #fff;
	--karve-text-dim: #cfcfcf;
	--karve-btn-bg: #fff;
	--karve-btn-text: #000;
	--karve-radius: 12px;
}

/* ------------------------------------------------------------
   Typography — faithful to karve.gr: Poppins/Glinte are Latin-only,
   so Greek text intentionally falls back to the browser serif,
   exactly like the main site (client-approved choice).
   ------------------------------------------------------------ */
body, div, p, a, li, td, th, label, input, select, textarea, button, h4, h5, h6,
span:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
	font-family: 'Poppins' !important;
}

h1, h2, h3, .jo_slick_title, .payment_header, .hero_text {
	font-family: 'Glinte', 'Poppins' !important;
	letter-spacing: 0.03em;
}

/* keep icon fonts working after the blanket font rules */
.fa, .fas, .far { font-family: 'Font Awesome 5 Free' !important; }
.fab { font-family: 'Font Awesome 5 Brands' !important; }

/* ------------------------------------------------------------
   Wizard surfaces: white zone -> dark, like karve.gr
   ------------------------------------------------------------ */
.join-online-wrapper {
	background: var(--karve-bg) !important;
	color: var(--karve-text);
}

.jo-nav { background: var(--karve-bg) !important; }

.join-online-wrapper h1,
.join-online-wrapper h2,
.join-online-wrapper h3,
.join-online-wrapper p,
.join-online-wrapper .jo_header h2 {
	color: var(--karve-text);
}

/* details/account form panel becomes a dark card; inputs stay white */
.jo-details {
	background: var(--karve-card) !important;
	color: var(--karve-text);
	border-radius: var(--karve-radius);
}

.jo-details label, .jo-details h3 { color: var(--karve-text) !important; }

/* ------------------------------------------------------------
   Cards (subscriptions, modules, payment boxes) — karve.gr style:
   dark grey, rounded, no border, single surface
   ------------------------------------------------------------ */
.jo-options-box, .jo-module-box {
	background: var(--karve-card) !important;
	border: none !important;
	border-radius: var(--karve-radius) !important;
	color: var(--karve-text);
	overflow: hidden;
}

.jo-options-box h2, .jo-module-box h2,
.jo-options-box .jo-box-subline, .jo-module-box .jo-box-subline {
	color: var(--karve-text) !important;
}

.options-box-header { background: transparent !important; color: var(--karve-text) !important; }
.options-box-body { color: var(--karve-text); }

.jo-options-box.jo-box-selected, .jo-module-box.jo-selected {
	background: var(--karve-card-selected) !important;
	outline: 2px solid var(--karve-text);
}

/* installments warning was grey-on-white; lift it for dark cards */
.installments_credit_warning { color: #bbb !important; }

/* ------------------------------------------------------------
   Buttons — karve.gr style: light pill, dark uppercase text
   ------------------------------------------------------------ */
.button_bl, .cg_label,
.jo-arrow-next, .jo-arrow-final, .jo-arrow-inside-next,
.side_bar .jo-arrow-next {
	background: var(--karve-btn-bg) !important;
	color: var(--karve-btn-text) !important;
	border: none !important;
	border-radius: 50px !important;
	text-transform: uppercase;
}

.button_bl:hover, .cg_label:hover,
.jo-arrow-next:hover, .jo-arrow-final:hover, .jo-arrow-inside-next:hover {
	background: #d9d9d9 !important;
}

.button_bl i, .button_bl svg { color: var(--karve-btn-text) !important; }

/* the white check icon inside the select pill must flip to dark */
.cg_label img { filter: invert(1); }

/* paid boxes keep their green confirmation */
.jo-options-box.payment-box.ispaid .button_bl.payment_button {
	background: #4BB543 !important;
	color: #fff !important;
}

/* disabled steps/buttons: dark-theme muted look (must follow button rules) */
.prevented {
	background-color: #4a4a4a !important;
	color: #9a9a9a !important;
}

/* ------------------------------------------------------------
   Light leftovers inside the dark zone (audit fixes)
   ------------------------------------------------------------ */

/* wizard templates set html to #ececec — kill the light canvas */
html { background-color: var(--karve-bg) !important; }

/* cart summary (was #ececec / #fff => white-on-white text): dark card */
.jo-summary-item,
#payment_view .jo-summary-item,
.summary_continue {
	background: var(--karve-card) !important;
	color: var(--karve-text);
	border-radius: var(--karve-radius);
}

/* summary date chip: white pill so its dark text stays readable */
#datepicker { background-color: #fff !important; }

/* other light boxes that inherited white text: make them cards too */
.jo-childtype-box, .jo-member-option, .referred_box_parent {
	background: var(--karve-card) !important;
	color: var(--karve-text);
	border-radius: var(--karve-radius);
}

/* "read more" popups keep their white background — force dark text inside,
   overriding the .join-online-wrapper white-heading rules */
#modal, .jo-out-item { color: #111; }
#modal h1, #modal h2, #modal h3, #modal p, #modal li, #modal span, #modal label,
.jo-out-item h1, .jo-out-item h2, .jo-out-item h3, .jo-out-item p, .jo-out-item li, .jo-out-item span {
	color: #111 !important;
}

/* ------------------------------------------------------------
   Subscription benefits: clamped description + expand toggle
   (markup/JS in template-parts/eshop/membership.php)
   ------------------------------------------------------------ */
.benefits_wrap { display: block; overflow: hidden; }

.benefits_wrap.clamped {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.benefits_toggle {
	display: inline-block;
	background: none !important;
	border: none !important;
	color: var(--karve-text) !important;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	margin: 8px 0 0;
	padding: 0;
}

/* ============================================================
   B2B account area + Class Timetable: dark background
   ============================================================ */

/* account pages force body #f5f5f7 — the whole site goes dark */
body { background-color: var(--karve-bg) !important; }

/* ---------- B2B / account area ---------- */

/* dashboard value chips: light borders & grey text -> dark theme */
.DashCard li:not(.iti__country):not(.iti__divider) {
	border-color: #3a3a3a !important;
}

.DashValue li:not(.li_Title) { color: #cfcfcf !important; }
.DashValue li.li_Title { color: var(--karve-text); }

/* grey info sections -> cards; their black titles -> white */
.GrBg { background: var(--karve-card) !important; }
.GrBg .DashTitle li { color: var(--karve-text) !important; }

/* left account menu: grey links / black hover were made for a light page */
.account-menu .section-links li a:not(.delivery-delay-badge) { color: #cfcfcf !important; }
.account-menu .section-links li:before { color: #cfcfcf !important; }
.account-menu .section-links li a:not(.delivery-delay-badge):hover { color: #fff !important; }
.account-menu .section-links li.active a, .account-menu .section-links li.active:before { color: #fff !important; }

/* location picker chip (my_account/membership) inherited white-on-light */
.jo-location { background: var(--karve-card) !important; color: var(--karve-text); }

/* DataTables (booking history, invoices, products, contracts, payments) */
.dataTables_scrollBody { background: transparent !important; }
table.dataTable, .mytable { background: transparent !important; color: var(--karve-text); }
.mytable thead tr, table.dataTable thead th {
	background-color: var(--karve-panel) !important;
	color: var(--karve-text) !important;
	border-bottom-color: #3a3a3a !important;
}
table.dataTable tbody tr { background-color: var(--karve-card) !important; color: var(--karve-text); }
table.dataTable tbody tr.even, tr.even { background-color: #2e2e2e !important; }
table.dataTable tbody td { color: var(--karve-text); border-color: #3a3a3a !important; }
table.dataTable td.dataTables_empty { background: var(--karve-card) !important; color: var(--karve-text) !important; }
table.dataTable.no-footer { border-bottom-color: #3a3a3a !important; }
.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate { color: var(--karve-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--karve-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--karve-card) !important;
	color: var(--karve-text) !important;
	border-color: #3a3a3a !important;
}
.dataTables_filter input, .dataTables_length select { background: #fff !important; color: #000 !important; }

/* ---------- Class Timetable (schedule.php) ---------- */

/* toolbar strip was #ecedf3 */
.schedulerHeader { background: var(--karve-bg) !important; }

/* the striped light calendar canvas -> same stripes, dark */
.days_grid,
.weekDays_header_grid_mobile .daybodys {
	background: repeating-linear-gradient(-45deg, #141414, #141414 15px, #1d1d1d 0, #1d1d1d 25px) !important;
}

/* class cards: white -> brand cards; status chips keep their own colors */
.schedule_item {
	background: var(--karve-card) !important;
	border-color: #3a3a3a !important;
	color: var(--karve-text);
}

.schedule_item.gray { background: #1f1f1f !important; }

.no_events > label { background: var(--karve-card) !important; color: var(--karve-text); }

/* tooltips stay white — pin dark text so wrapper inheritance can't blank them */
.tooltip_inner { color: #111; }

/* scrollbar track was #f1f1f1 */
.days_grid::-webkit-scrollbar-track { background: #1d1d1d !important; }

/* the grey empty-cart illustration reads too dim on the dark card */
.emptycart img { filter: brightness(1.5); }