/* =====================================================================
   BRAND LAYER: site-wide dark look & feel (mirrors holmesplace.gr)
   Loaded on every front-end page by functions.php:
     - body.brand-dark  : every page (dark ground, light text)
     - body.eshop-brand : eshop wizard pages additionally (component styles)
   Scoped under body classes so it wins over custom_wizard.css and the
   per-template <style> blocks, which load later inside <body>.

   "Light islands" keep a white background with dark text on purpose:
   modals, jQuery-UI datepicker, phone-country list, select2 dropdown,
   tooltips, status badges and schedule lesson cards (their text colours
   come from the server, so they must stay on white to stay readable).
   Exclusions use :where() so they add no specificity.
   ===================================================================== */

@font-face {
	font-family: 'NeutraTextGreek';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../../fonts/NeutrTexGreLig.otf') format('opentype');
}

@font-face {
	font-family: 'NeutraTextGreek';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/NeutrTexGreBoo.otf') format('opentype');
}

@font-face {
	font-family: 'NeutraTextGreek';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/NeutrTexGreDem.otf') format('opentype');
}

@font-face {
	font-family: 'NeutraTextGreek';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/NeutrTexGreBol.otf') format('opentype');
}

body.brand-dark {
	--hp-font: 'NeutraTextGreek', 'Neutraface2text book', 'Open Sans', Arial, sans-serif;
	--hp-dark: #26262C;
	--hp-dark-2: #2F2F37;
	--hp-dark-3: #39393F;
	--hp-deep: #1F1F24;
	--hp-line: #4B4B50;
	--hp-white: #FFFFFF;
	--hp-text-light: #D0D0CE;
	--hp-muted: #A7A8AA;
	--hp-gold: #CAB683;
	--hp-gold-dark: #AD8F53;
	--hp-gold-tint: #ECE7D6;
	--hp-red: #F07272;
	--hp-ink: #26262C;
	--hp-ink-muted: #5A5A5E;
	--hp-radius: 5px;
}

/* ---------- Typography ----------
   header.php sets `body *:not(.fa):not(.fas):not(.far):not(.fal) { font-family: Open sans }`
   (0,4,1). Mirror that selector with the body class so the brand font wins. */
body.brand-dark,
body.brand-dark *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
	font-family: var(--hp-font);
}

body.brand-dark #masthead .caps-small.demi,
body.brand-dark .nav-link-block .nav-link-sm .nav-link-content {
	font-family: var(--hp-font) !important;
}

/* =====================================================================
   1. BASE
   ===================================================================== */

html:has(> body.brand-dark) {
	background-color: #26262C !important;
}

body.brand-dark,
body.brand-dark #page,
body.brand-dark .site-main,
body.brand-dark .join-online-wrapper {
	background-color: var(--hp-dark) !important;
	color: var(--hp-text-light);
}

/* Light islands: white panels that must keep dark text */
body.brand-dark :is(.modal-content, .ui-datepicker, .iti__country-list, .select2-dropdown, .event_tooltip, .tooltip_inner, #modal, .jo-out-item, .schedule_item) {
	color: var(--hp-ink);
}

/* =====================================================================
   2. TEXT (outside islands, header and footer)
   ===================================================================== */

body.brand-dark :is(h1, h2, h3, h4, h5, h6):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, .event_tooltip, .tooltip_inner, #modal, .jo-out-item, .schedule_item, #masthead) *) {
	color: var(--hp-white);
}

body.brand-dark :is(p, li, td, th, dt, dd, legend, small):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, .event_tooltip, .tooltip_inner, #modal, .jo-out-item, .schedule_item, .appointment_status, .inprogress_label, #masthead) *) {
	color: var(--hp-text-light);
}

body.brand-dark label:not(:where(.button_bl, .cg_label, .button)):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, #modal, .jo-out-item, .schedule_item, #masthead) *) {
	color: var(--hp-text-light);
}

body.brand-dark a:not(:where(.button, .button_bl, .pill, .w-tab-link, .event-panel, .jo-nav-item, .w-inline-block, .cg_label)):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, #modal, .jo-out-item, .schedule_item, #masthead, .c-footer) *) {
	color: var(--hp-gold);
}

/* Elements that had explicit dark text colours in the theme */
body.brand-dark :is(.heading-large, .heading-largest, .heading-small, .heading-small a, .user-info .username, .user-info .greetings, .user-info .user-stats > li strong, .order-list-card p, .order-list-card span + span, .order-no span:last-child, .GrBg .DashTitle li, .Logist .BoxInfo, .pairValue):not(:where(.modal) *) {
	color: var(--hp-white) !important;
}

body.brand-dark :is(.order-list-card span, .DashValue li:not(.li_Title), .LogistValue.BoxInfo, .pairHeader, .address-list .card p, .invoice-list .card p, .address-list .add-new, .invoice-list .add-new, .new-user, .mobile-optimised td:before, .mobile-optimised td.codeleft, .mobile-optimised td.codeleftBig, .classname-muted):not(:where(.modal) *) {
	color: var(--hp-text-light) !important;
}

body.brand-dark :is(.text-sand-darker, .caps-medium, .headermessage):not(:where(.modal) *) {
	color: var(--hp-gold) !important;
}

/* Reds brightened for contrast on dark */
body.brand-dark :is(.required_star, .ErrorMessageSpan, .DashTitle li, .LogistTitle.BoxInfo, .order-list-card .cancelled, .red_s, .red_s b, .red_s span, .hover_underline_red):not(:where(.modal) *) {
	color: var(--hp-red) !important;
}

body.brand-dark .order-list-card .cancelled:before {
	color: var(--hp-red) !important;
}

/* Inline red in templates (e.g. order total) -> softer brand red */
body.brand-dark :is([style*="color:red"], [style*="color: red"]):not(:where(.modal) *),
body.brand-dark :is([style*="color:red"], [style*="color: red"]):not(:where(.modal) *) * {
	color: var(--hp-red) !important;
}

/* Birthday separators "/" */
body.brand-dark .birthday_wrapper > span:not(:last-child):after {
	color: var(--hp-text-light) !important;
}

/* =====================================================================
   3. SURFACES (were white / light grey)
   ===================================================================== */

body.brand-dark :is(.jo-details, .jo-childtype-box, .jo-member-option, .jo-module-box, .jo-summary-item, .jo-location, .referred_box_parent, .summary_continue, .order-list-card, .GrBg, .card, .filters-container, .no_events > label, .accordion-body, .details_checkboxes, .different_address_section):not(:where(.modal) *) {
	background-color: var(--hp-dark-2) !important;
	border-color: var(--hp-line) !important;
	color: var(--hp-text-light);
}

body.brand-dark #payment_view .jo-summary-item {
	background-color: var(--hp-dark-2) !important;
}

/* Disabled state (was light grey with inherited text) */
body.brand-dark .prevented:not(.jo-nav li):not(:where(.modal) *) {
	background-color: var(--hp-dark-3) !important;
	color: var(--hp-muted) !important;
}

/* Loading overlays */
body.brand-dark :is(.loaderWrapper, .qrloaderWrapper, .qrButtonsloaderWrapper) {
	background-color: rgba(38, 38, 44, 0.75) !important;
}

/* =====================================================================
   4. FORM FIELDS (outside islands)
   ===================================================================== */

body.brand-dark :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]), select, textarea):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, #modal, .jo-out-item, #masthead) *) {
	background-color: var(--hp-dark-3) !important;
	color: var(--hp-white) !important;
	border-color: var(--hp-line) !important;
}

/* Invalid fields: the rule above (specificity 0,7,2) overrides header.php's
   `.invalid input { border-color: #d52925 !important }`. Same selector inside .invalid = higher specificity. */
body.brand-dark .invalid :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]), select, textarea):not(:where(.modal, .ui-datepicker, .iti__country-list, .select2-dropdown, #modal, .jo-out-item, #masthead) *) {
	border-color: var(--hp-red) !important;
	box-shadow: 0 0 0 1px var(--hp-red);
}

body.brand-dark :is(input, textarea):not(:where(.modal, #modal) *)::placeholder {
	color: var(--hp-muted) !important;
	opacity: 1;
}

body.brand-dark :is(input, select, textarea):not(:where(.modal, #modal) *):focus {
	border-color: var(--hp-gold) !important;
	outline: none;
	box-shadow: 0 0 0 2px rgba(202, 182, 131, 0.25);
}

body.brand-dark :is(input, textarea, select):not(:where(.modal, #modal) *):-webkit-autofill {
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 0 0 1000px var(--hp-dark-3) inset !important;
}

body.brand-dark select option {
	background-color: var(--hp-dark-2);
	color: #fff;
}

/* Read-only / locked fields */
body.brand-dark .custom_readonly :is(input, select) {
	background-color: var(--hp-dark-2) !important;
	color: var(--hp-muted) !important;
}

/* Floating labels on page (reset password, company login) */
body.brand-dark .flex-input label:not(:where(.modal, #modal) *) {
	color: var(--hp-muted);
}

body.brand-dark .flex-input:focus-within:not(.invalid):not(.warning) label {
	color: var(--hp-gold-dark) !important;
}

/* Phone prefix box */
body.brand-dark :is(#jol_form_mobile_code, #user_mobile_code):not(:where(.modal) *) {
	background-color: var(--hp-dark-2) !important;
	color: var(--hp-white) !important;
}

/* select2 closed box on page */
body.brand-dark .select2-container .select2-selection:not(:where(.modal) *) {
	background-color: var(--hp-dark-3) !important;
	border-color: var(--hp-line) !important;
}

body.brand-dark .select2-container .select2-selection__rendered:not(:where(.modal) *) {
	color: #fff !important;
}

/* =====================================================================
   5. BUTTONS
   ===================================================================== */

body.brand-dark :is(.button_bl, .button.primary):not(.cg_label):not(:where(.modal, #modal, #masthead) *) {
	background-color: transparent !important;
	border: 1px solid var(--hp-gold) !important;
	border-radius: var(--hp-radius);
	color: #fff !important;
	transition: background-color 200ms ease;
}

body.brand-dark :is(.button_bl, .button.primary):not(.cg_label):not(:where(.modal, #modal, #masthead) *) * {
	color: #fff !important;
}

body.brand-dark :is(.button_bl, .button.primary):not(.cg_label):not(:where(.modal, #modal, #masthead) *):hover {
	background-color: rgba(202, 182, 131, 0.18) !important;
}

body.brand-dark .button.secondary:not(:where(.modal, #masthead) *) {
	background-color: var(--hp-gold) !important;
	color: var(--hp-dark) !important;
	border-radius: var(--hp-radius);
}

body.brand-dark .button.secondary:not(:where(.modal, #masthead) *) * {
	color: var(--hp-dark) !important;
}

body.brand-dark .button.secondary:not(:where(.modal, #masthead) *):hover {
	background-color: var(--hp-gold-dark) !important;
	color: #fff !important;
}

body.brand-dark .button.secondary:not(:where(.modal, #masthead) *):hover * {
	color: #fff !important;
}

/* Paid payments keep their green "paid" button */
body.brand-dark .jo-options-box.payment-box.ispaid .button_bl.payment_button {
	background-color: #4BB543 !important;
	border-color: #4BB543 !important;
}

/* Destructive buttons stay red */
body.brand-dark :is(.deleteCardBtn, .delete-account-text) {
	color: #fff;
}

body.brand-dark .pill.primary {
	background: transparent !important;
	border: 1px solid var(--hp-gold);
	border-radius: 25px;
	color: var(--hp-text-light) !important;
}

body.brand-dark .pill.primary:hover,
body.brand-dark .pill.primary.w--current {
	background: var(--hp-gold) !important;
	color: var(--hp-dark) !important;
}

body.brand-dark .pill.primary * {
	color: inherit !important;
}

/* Custom checkboxes: keep a visible box on dark */
body.brand-dark .checkmark {
	background-color: var(--hp-dark-3);
	border: 1px solid var(--hp-muted);
}

/* header.php has `#jo-validation-form .checkmark { border: 1px solid #1d1b16 }` (an id beats the rule above):
   white border on the dark form boxes (eshop details, account, etc.) */
body.brand-dark #jo-validation-form .checkmark {
	border: 1px solid #ffffff;
}

body.brand-dark .container input:checked ~ .checkmark {
	background-color: var(--hp-gold) !important;
	border-color: var(--hp-gold) !important;
}

/* =====================================================================
   6. TABLES (active products, bookings, contracts, invoices)
   ===================================================================== */

body.brand-dark :is(.mytable, table.dataTable) thead tr,
body.brand-dark :is(.mytable, table.dataTable) thead th,
body.brand-dark :is(.mytable, table.dataTable) tfoot th {
	background-color: var(--hp-deep) !important;
	color: #fff !important;
	border-color: var(--hp-line) !important;
	font-weight: 400;
	letter-spacing: 0.3px;
}

body.brand-dark :is(.mytable, table.dataTable) tbody tr {
	background-color: var(--hp-dark-2) !important;
}

body.brand-dark :is(.mytable, table.dataTable) tbody tr.even {
	background-color: #34343C !important;
}

body.brand-dark :is(.mytable, table.dataTable) tbody td {
	background-color: transparent !important;
	color: var(--hp-text-light) !important;
	border-color: var(--hp-line) !important;
}

body.brand-dark :is(.mytable, table.dataTable) tbody tr:hover {
	border-left-color: var(--hp-gold) !important;
}

body.brand-dark .dataTables_scrollBody,
body.brand-dark table.mobile-optimised td {
	background-color: transparent !important;
}

body.brand-dark table.dataTable :is(.dataTables_empty) {
	color: var(--hp-muted) !important;
}

/* =====================================================================
   7. ACCOUNT CHROME
   ===================================================================== */

body.brand-dark .account-header {
	background-color: var(--hp-dark-2) !important;
	border-color: var(--hp-gold) !important;
}

body.brand-dark .account-menu .section-links li a:not(.delivery-delay-badge),
body.brand-dark .account-menu .section-links li:before {
	color: var(--hp-text-light) !important;
}

body.brand-dark .account-menu .section-links li a:not(.delivery-delay-badge):hover {
	color: #fff !important;
}

body.brand-dark .account-menu .section-links li.active a,
body.brand-dark .account-menu .section-links li.active:before {
	color: var(--hp-gold) !important;
}

body.brand-dark .nav-tabs {
	border-bottom-color: var(--hp-line);
}

body.brand-dark .nav-tabs .nav-link {
	color: var(--hp-text-light) !important;
	background: transparent !important;
	border-color: transparent !important;
}

body.brand-dark .nav-tabs .nav-link.active {
	color: var(--hp-gold) !important;
	border-bottom: 2px solid var(--hp-gold) !important;
}

body.brand-dark .DashCard li {
	border-color: var(--hp-line) !important;
}

body.brand-dark #member_id_p {
	color: var(--hp-muted) !important;
}

/* =====================================================================
   8. SCHEDULE / INSTRUCTOR CALENDAR
   Lesson cards (.schedule_item) stay white: their text colours are server-driven.
   ===================================================================== */

body.brand-dark .schedulerHeader,
body.brand-dark .mobile_column {
	background-color: var(--hp-dark-2) !important;
}

body.brand-dark .weekDays_header_grid,
body.brand-dark .mobileCalendarTopHeader,
body.brand-dark .weekDays_header_grid_mobile .headerDay {
	background: var(--hp-deep) !important;
}

body.brand-dark .headerDay .d-block:first-child {
	color: #fff !important;
}

body.brand-dark .headerDay .d-block:last-child {
	color: var(--hp-text-light) !important;
}

/* Mobile: the date number is a white circle, keep dark digits on it */
body.brand-dark .weekDays_header_grid_mobile .headerDay .d-block:last-child {
	color: var(--hp-ink) !important;
}

body.brand-dark .headerDay .d-block.active:first-child {
	color: var(--hp-gold) !important;
}

body.brand-dark :is(.days_grid, .weekDays_header_grid_mobile .daybodys, .scheduler_scrollable_container) {
	background: repeating-linear-gradient(-45deg, #2B2B32, #2B2B32 10px, #2F2F37 10px, #2F2F37 20px) !important;
}

body.brand-dark .days_grid::-webkit-scrollbar-track {
	background: var(--hp-dark-2);
}

body.brand-dark .date_buttons {
	background-color: var(--hp-dark-3) !important;
	color: #fff !important;
	border-color: var(--hp-line) !important;
}

body.brand-dark .calendar_date_change .headerbutton {
	border-color: var(--hp-gold) !important;
	color: #fff !important;
}

body.brand-dark .reservationsFilterButton {
	background-color: var(--hp-dark-3) !important;
	color: var(--hp-text-light) !important;
	border-color: var(--hp-line) !important;
}

body.brand-dark .reservationsFilterButton.activated {
	background-color: var(--hp-gold) !important;
	color: var(--hp-dark) !important;
	border-color: var(--hp-gold) !important;
}

body.brand-dark .schedule_item {
	background-color: #fff;
}

body.brand-dark .schedule_item.gray {
	background-color: #EDEDED;
}

/* =====================================================================
   9. HEADER BAR + FOOTER
   ===================================================================== */

body.brand-dark #masthead .nav-main {
	background: var(--hp-dark) !important;
}

body.brand-dark .c-langSwitch__language--active {
	background-color: var(--hp-dark-3) !important;
}

body.brand-dark .c-footer:before,
body.brand-dark .c-footer:after,
body.brand-dark .c-footer__info,
body.brand-dark .c-footer__stayInTouch {
	background-color: var(--hp-deep) !important;
}

body.brand-dark .c-footer__bottom,
body.brand-dark .c-footer__bottom a {
	color: var(--hp-text-light) !important;
}

/* =====================================================================
   10. MODALS (light islands): readable titles, consent text, buttons
   ===================================================================== */

body.brand-dark .modal-content {
	color: var(--hp-ink);
}

body.brand-dark .modalLogin .login-signup-main h1 {
	color: var(--hp-ink) !important;
	font-weight: 400;
	letter-spacing: 0.5px;
}

body.brand-dark .modalLogin .login-signup-main .notice,
body.brand-dark .modalLogin p.terms-agreement,
body.brand-dark .modalLogin .checkbox_container {
	color: var(--hp-ink-muted) !important;
}

body.brand-dark .modalLogin .button.secondary {
	background-color: var(--hp-gold) !important;
	color: var(--hp-dark) !important;
	border-radius: var(--hp-radius);
}

body.brand-dark .modalLogin .button.secondary:hover {
	background-color: var(--hp-gold-dark) !important;
	color: #fff !important;
}

body.brand-dark :is(.modal, #modal) .button_bl {
	background-color: var(--hp-dark) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--hp-radius);
}

body.brand-dark :is(.modal, #modal) .button_bl * {
	color: #fff !important;
}

body.brand-dark :is(.modal, #modal) .button_bl:hover {
	background-color: var(--hp-gold) !important;
	color: var(--hp-dark) !important;
}

body.brand-dark .modal .flex-input input:focus,
body.brand-dark .modal .flex-input select:focus {
	border-color: var(--hp-gold) !important;
}

body.brand-dark .modal .flex-input:focus-within:not(.invalid):not(.warning) label {
	color: var(--hp-gold-dark) !important;
}

/* =====================================================================
   11. ESHOP WIZARD (body.eshop-brand)
   ===================================================================== */

/* Step bar */
body.eshop-brand .jo-nav {
	background: var(--hp-dark) !important;
}

body.eshop-brand .jo-nav .slick-dots li {
	background-color: var(--hp-gold-tint) !important;
}

body.eshop-brand .jo-nav .slick-dots li.slick-active {
	background: var(--hp-gold) !important;
}

body.eshop-brand .jo-nav .slick-dots li:first-child:before {
	background: var(--hp-dark);
}

body.eshop-brand .jo-nav .slick-dots li.slick-active:first-child:before {
	background: var(--hp-gold);
}

body.eshop-brand .jo-nav .slick-dots li:first-child:after,
body.eshop-brand .jo-nav .slick-dots li:nth-child(n+2):after {
	border-top-color: var(--hp-dark);
	border-bottom-color: var(--hp-dark);
	border-right-color: var(--hp-dark);
}

body.eshop-brand .jo-nav .slick-dots li:nth-child(n+2):before {
	border-left-color: var(--hp-dark);
	border-right-color: var(--hp-gold-tint);
	border-top-color: var(--hp-gold-tint);
	border-bottom-color: var(--hp-gold-tint);
}

body.eshop-brand .jo-nav .slick-dots li.slick-active:nth-child(n+2):before {
	border-left-color: var(--hp-dark);
	border-right-color: var(--hp-gold);
	border-top-color: var(--hp-gold);
	border-bottom-color: var(--hp-gold);
}

body.eshop-brand a.jo-nav-item,
body.eshop-brand a.jo-nav-item span {
	color: var(--hp-ink) !important;
	letter-spacing: 0.3px;
}

body.eshop-brand .jo-nav .slick-dots li.slick-active .jo-nav-item,
body.eshop-brand .jo-nav .slick-dots li.slick-active .jo-nav-item span {
	color: var(--hp-dark) !important;
	font-weight: 600;
}

/* Headings */
body.eshop-brand .jo_slick h2,
body.eshop-brand .interstitial-holder h1 {
	font-weight: 400;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--hp-gold);
}

body.eshop-brand .jo_header h2 {
	border-bottom: 0;
	font-size: 18px;
	color: var(--hp-text-light) !important;
}

/* Next / final buttons */
body.eshop-brand :is(.jo-arrow-next, .jo-arrow-final, .jo-arrow-inside-next) {
	background: var(--hp-gold);
	color: var(--hp-dark) !important;
	border-radius: var(--hp-radius);
	letter-spacing: 0.5px;
}

body.eshop-brand :is(.jo-arrow-next, .jo-arrow-final, .jo-arrow-inside-next):hover {
	background: var(--hp-gold-dark);
	color: #fff !important;
}

body.eshop-brand .jo-arrow-next.prevented {
	background: var(--hp-dark-3) !important;
	color: var(--hp-muted) !important;
}

/* The card checkbox label is an empty trigger (its check icon shows when selected) */
body.eshop-brand .cg_label {
	background: transparent !important;
	border: 0 !important;
}

/* Option boxes (subscriptions, payments, add-ons). brand-dark, not eshop-brand: the payment
   boxes of template-parts/payments.php are also used on the Pending Payments page. */
body.brand-dark .jo-options-box {
	background: var(--hp-dark-2) !important;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	color: var(--hp-text-light);
}

body.brand-dark .jo-options-box:hover {
	border-color: var(--hp-gold);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.eshop-brand .options-box-header {
	background: var(--hp-deep);
	border-radius: var(--hp-radius) var(--hp-radius) 0 0;
}

body.eshop-brand .options-box-header,
body.eshop-brand .options-box-header * {
	color: #fff;
}

body.eshop-brand .options-box-header > h2 {
	font-weight: 400;
	letter-spacing: 0.5px;
	border-bottom: 0;
}

body.eshop-brand .options-box-header h2 {
	color: #fff !important;
}

body.brand-dark .jo-options-box .jo-box-subline {
	color: var(--hp-text-light);
}

/* Each card keeps its own height (grid default is stretch) */
body.eshop-brand .clubs_wrapper {
	align-items: start;
}

/* Selected subscription: gold ring + gold header with dark text */
body.eshop-brand .jo-options-box.subscription_box.jo-box-selected {
	background: var(--hp-dark-2) !important;
	border-color: var(--hp-gold);
	box-shadow: 0 0 0 2px var(--hp-gold);
}

body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-body,
body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-body * {
	color: var(--hp-text-light) !important;
}

body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-body .benefits_toggle,
body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-body .benefits_toggle * {
	color: var(--hp-gold) !important;
}

body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-header {
	background: var(--hp-gold);
}

body.eshop-brand .jo-options-box.subscription_box.jo-box-selected .options-box-header * {
	color: var(--hp-dark) !important;
}

/* Other selected boxes (payments, options): gold ring instead of solid fill */
body.brand-dark .jo-options-box.jo-box-selected:not(.subscription_box) {
	background: var(--hp-dark-2) !important;
	box-shadow: 0 0 0 2px var(--hp-gold);
}

/* Subscription price */
body.eshop-brand .options-box-header .sub_price_monthly {
	margin-top: 6px;
	line-height: 1;
}

body.eshop-brand .options-box-header .sub_price_monthly b {
	font-size: 36px;
	line-height: 42px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

body.eshop-brand .options-box-header .sub_price_period {
	font-size: 16px;
	font-weight: 400;
	opacity: 0.85;
}

body.eshop-brand .options-box-header .sub_price_total {
	font-size: 14px;
	opacity: 0.85;
	margin-top: 4px;
}

/* Benefits (collapsible) */
body.eshop-brand .benefits {
	text-align: left;
	margin-bottom: 12px;
}

body.eshop-brand .benefits_intro {
	font-size: 15px;
	line-height: 22px;
	color: var(--hp-text-light);
	margin: 0 0 12px;
}

body.eshop-brand .benefits_toggle {
	/* centered "Δείτε τις παροχές" (the list itself stays left-aligned) */
	display: flex;
	width: fit-content;
	margin: 0 auto;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--hp-gold);
}

body.eshop-brand .benefits_toggle:hover .benefits_toggle_text {
	text-decoration: underline;
}

body.eshop-brand .benefits_chevron {
	width: 26px;
	height: 26px;
	border: 1px solid var(--hp-gold);
	border-radius: 50%;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23CAB683' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: transform 250ms ease;
}

body.eshop-brand .benefits.is-open .benefits_chevron {
	transform: rotate(180deg);
}

body.eshop-brand .benefits_list {
	display: none;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

body.eshop-brand .benefits_list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 20px;
	color: var(--hp-text-light);
}

body.eshop-brand .benefits_list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23CAB683' stroke-width='1.4'/%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%23CAB683' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Club cards (step 1) */
body.eshop-brand .club_cards_section {
	margin: 10px 0 30px;
}

body.eshop-brand .club_cards_title {
	font-size: 22px;
	margin: 0 0 18px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

body.eshop-brand .club_cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

body.eshop-brand .club_card {
	display: flex;
	flex-direction: column;
	background: var(--hp-dark-2);
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

body.eshop-brand .club_card:hover {
	border-color: var(--hp-gold);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

body.eshop-brand .club_card.is-selected {
	border-color: var(--hp-gold);
	box-shadow: 0 0 0 2px var(--hp-gold);
}

body.eshop-brand .club_card_img {
	aspect-ratio: 16 / 10;
	background: var(--hp-deep);
	overflow: hidden;
}

body.eshop-brand .club_card_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

body.eshop-brand .club_card:hover .club_card_img img {
	transform: scale(1.04);
}

body.eshop-brand .club_card_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}

body.eshop-brand .club_card_name {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #fff;
	text-transform: uppercase;
}

body.eshop-brand .club_card_line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--hp-text-light);
}

body.eshop-brand .club_card_line:last-of-type {
	margin-bottom: 18px;
}

body.eshop-brand .club_card_line i,
body.eshop-brand .club_card_line svg {
	width: 14px;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--hp-gold);
}

body.eshop-brand .club_card_btn {
	margin-top: auto;
	display: block;
	padding: 12px;
	text-align: center;
	border: 1px solid var(--hp-gold);
	border-radius: var(--hp-radius);
	font-size: 15px;
	letter-spacing: 0.5px;
	color: #fff;
	transition: background-color 200ms ease;
}

body.eshop-brand .club_card:hover .club_card_btn {
	background-color: rgba(202, 182, 131, 0.18);
}

body.eshop-brand .club_card.is-selected .club_card_btn {
	background-color: var(--hp-gold);
	color: var(--hp-dark);
	font-weight: 600;
}

@media screen and (max-width: 991px) {
	body.eshop-brand .club_cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media screen and (max-width: 600px) {
	body.eshop-brand .club_cards {
		grid-template-columns: 1fr;
	}

	body.eshop-brand .club_card_img {
		aspect-ratio: 16 / 8;
	}
}

/* Order summary sidebar */
body.eshop-brand .side_bar .jo-summary-item {
	background: var(--hp-dark-2) !important;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
}

/* Cart lines: the price is a `float: right` span (custom_wizard.css). When the product name
   wraps, the float hangs out of its <p> and overlaps the <hr> below -> contain the float. */
body.brand-dark .jo-summary-item p {
	display: flow-root;
}

/* Payments step */
body.brand-dark .payment_header,
body.brand-dark .payment_header * {
	color: #fff;
}

body.brand-dark .installments_credit_warning {
	color: var(--hp-muted) !important;
}

/* =====================================================================
   12. HOMEPAGE + EVENTS specifics
   ===================================================================== */

body.brand-dark .hero-header-content-wrap {
	border-color: var(--hp-gold) !important;
	background: transparent !important;
}

body.brand-dark .club-card-wrapper {
	background: var(--hp-dark-2);
	border: 1px solid var(--hp-dark-3);
	border-radius: var(--hp-radius);
	color: var(--hp-text-light);
}

body.brand-dark .club-card-wrapper .p-small,
body.brand-dark .club-card-wrapper .p-small a {
	color: var(--hp-text-light) !important;
}

body.brand-dark .club-card-wrapper .fa,
body.brand-dark .club-card-wrapper svg {
	color: var(--hp-gold) !important;
}

body.brand-dark .events-row {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.brand-dark .event-panel__date,
body.brand-dark .event-panel__cta {
	color: var(--hp-gold) !important;
	border-color: var(--hp-gold) !important;
}

body.brand-dark .event-panel__name {
	color: #fff !important;
}

body.brand-dark .heading-large.noeventsHeader {
	color: #fff !important;
}

body.brand-dark .changeQuantityButton {
	border-color: var(--hp-gold) !important;
	color: var(--hp-gold) !important;
}

body.brand-dark input[type=number].cartQuantityInput {
	border-color: var(--hp-gold) !important;
	color: #fff !important;
	background-color: transparent !important;
}

body.brand-dark .loginRequiredNotice {
	color: var(--hp-text-light) !important;
	background-color: rgba(202, 182, 131, 0.12);
}

body.brand-dark .mainbannertext a {
	color: var(--hp-gold);
}