/* Fonts */
:root {
--default-font: "Roboto", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* --heading-font: "Poppins", sans-serif; */
--heading-font: "Roboto", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--nav-font: "Raleway", "Noto Sans Arabic", sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
--default-color: #444444; /* Default color used for the majority of the text content across the entire website */
--heading-color: #2c4964; /* Color for headings, subheadings and title throughout the website (Classic theme default) */
--accent-color: #1977cc; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out (Classic theme default) */
--primary-color: var(--heading-color); /* primary color used for the majority of the text content across the entire website */
--brand-name-color: var(--heading-color); /* Dedicated color for the site/brand name shown in the header. Defaults to the heading color (so there is no visual change) but is decoupled from it: the header brand name and the global h1–h6 heading color can now be tuned independently. */
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
--light-background: #f1f7fc; /* Subtle tinted background for highlighted sections, hovers, and pill chips (Classic theme default) */
--dark-background: #060606; /* Dark surface for footer / dark sections */
--brand-gradient: linear-gradient(115deg, var(--heading-color), color-mix(in srgb, var(--heading-color), var(--accent-color) 38%)); /* Brand gradient for banners, table headers and dialog headers. Auto-derived from the brand colors; the custom theme can override it from the Theme Studio. */
}
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
--nav-color: var(--heading-color); /* The default color of the main navmenu links */
--nav-hover-color: var(--accent-color); /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: var(--heading-color); /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: var(--accent-color); /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
--background-color: var(--light-background);
--surface-color: #ffffff;
}
.dark-background {
--background-color: var(--dark-background);
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #252525;
--contrast-color: #ffffff;
}
/* ============================================================
THEME VARIANTS
Applied via attribute.
No attribute / data-theme="classic" = original palette above.
============================================================ */
/* ----- Therapeutic Calm (recommended) ----- */
[data-theme="therapeutic"] {
--background-color: #ffffff;
--default-color: #3F4A55;
--primary-color: #1E3A5F;
--heading-color: #1E3A5F;
--accent-color: #2B8FD4;
--surface-color: #ffffff;
--contrast-color: #ffffff;
--light-background: #EEF5FB;
--dark-background: #0F1E2E;
--nav-color: #1E3A5F;
--nav-hover-color: #2B8FD4;
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #1E3A5F;
--nav-dropdown-hover-color: #2B8FD4;
}
[data-theme="therapeutic"] .light-background {
--background-color: #EEF5FB;
--surface-color: #ffffff;
}
[data-theme="therapeutic"] .dark-background {
--background-color: #0F1E2E;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #1A2D44;
--contrast-color: #ffffff;
}
/* ----- Deep Sapphire ----- */
[data-theme="sapphire"] {
--background-color: #ffffff;
--default-color: #1F2937;
--primary-color: #1E3A8A;
--heading-color: #1E3A8A;
--accent-color: #2563EB;
--surface-color: #ffffff;
--contrast-color: #ffffff;
--light-background: #EFF6FF;
--dark-background: #0A1929;
--nav-color: #1E3A8A;
--nav-hover-color: #2563EB;
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #1E3A8A;
--nav-dropdown-hover-color: #2563EB;
}
[data-theme="sapphire"] .light-background {
--background-color: #EFF6FF;
--surface-color: #ffffff;
}
[data-theme="sapphire"] .dark-background {
--background-color: #0A1929;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #14283F;
--contrast-color: #ffffff;
}
/* ----- Healing Cyan ----- */
[data-theme="cyan"] {
--background-color: #ffffff;
--default-color: #334155;
--primary-color: #1C4D6E;
--heading-color: #1C4D6E;
--accent-color: #0891B2;
--surface-color: #ffffff;
--contrast-color: #ffffff;
--light-background: #ECF6FA;
--dark-background: #0E2A3A;
--nav-color: #1C4D6E;
--nav-hover-color: #0891B2;
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #1C4D6E;
--nav-dropdown-hover-color: #0891B2;
}
[data-theme="cyan"] .light-background {
--background-color: #ECF6FA;
--surface-color: #ffffff;
}
[data-theme="cyan"] .dark-background {
--background-color: #0E2A3A;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #1C3E51;
--contrast-color: #ffffff;
}
/* ----- Soft Slate Sky ----- */
[data-theme="slate"] {
--background-color: #ffffff;
--default-color: #475569;
--primary-color: #334E68;
--heading-color: #334E68;
--accent-color: #0EA5E9;
--surface-color: #ffffff;
--contrast-color: #ffffff;
--light-background: #F0F9FF;
--dark-background: #1E293B;
--nav-color: #334E68;
--nav-hover-color: #0EA5E9;
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #334E68;
--nav-dropdown-hover-color: #0EA5E9;
}
[data-theme="slate"] .light-background {
--background-color: #F0F9FF;
--surface-color: #ffffff;
}
[data-theme="slate"] .dark-background {
--background-color: #1E293B;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #334155;
--contrast-color: #ffffff;
}
/* ----- Custom (user-defined) -----
--heading-color, --accent-color, --light-background are set via inline
style on by the JS interop. Everything else is derived here so the
user only has to pick three colors. */
[data-theme="custom"] {
--background-color: #ffffff;
--default-color: #3F4A55;
--surface-color: #ffffff;
--contrast-color: #ffffff;
--dark-background: #0F1E2E;
--primary-color: var(--heading-color);
--nav-color: var(--heading-color);
--nav-hover-color: var(--accent-color);
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: var(--heading-color);
--nav-dropdown-hover-color: var(--accent-color);
}
/* ============================================================
THEME STUDIO (admin UI)
Preset gallery with live page mockups + custom theme editor
(visual colour pickers, gradient builder, contrast hints).
============================================================ */
/* ----- Save status pill ----- */
.ts-save {
display: inline-flex;
align-items: center;
min-height: 24px;
font-size: 13px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.ts-save--saved { color: #15803d; }
/* ----- Preset gallery ----- */
.ts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.tpc {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
background: var(--surface-color);
border: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
border-radius: 14px;
text-align: start;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tpc:hover {
border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.tpc:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
outline-offset: 2px;
}
.tpc--active {
border-color: var(--accent-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
}
/* ----- Logo picker ----- */
.ts-logo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 14px;
}
.ts-logo-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
padding: 14px;
background:
linear-gradient(45deg, color-mix(in srgb, var(--default-color), transparent 94%) 25%, transparent 25%) 0 0/16px 16px,
linear-gradient(-45deg, color-mix(in srgb, var(--default-color), transparent 94%) 25%, transparent 25%) 0 0/16px 16px,
var(--surface-color);
border: 2px solid color-mix(in srgb, var(--default-color), transparent 88%);
border-radius: 14px;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ts-logo-tile:hover {
border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.ts-logo-tile:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
outline-offset: 2px;
}
.ts-logo-tile--active {
border-color: var(--accent-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 85%);
}
.ts-logo-tile img {
max-width: 100%;
max-height: 64px;
object-fit: contain;
}
.ts-logo-check {
position: absolute;
top: 6px;
inset-inline-end: 6px;
color: var(--accent-color);
font-size: 18px;
line-height: 1;
background: var(--surface-color);
border-radius: 50%;
}
/* mini page mockup */
.tpc__preview {
display: block;
background: var(--p-bg, #ffffff);
padding: 10px 10px 0;
pointer-events: none;
}
.tpc__topbar {
display: flex;
align-items: center;
gap: 6px;
background: var(--p-surface, #ffffff);
border-radius: 6px 6px 0 0;
padding: 5px 8px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.tpc__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--p-accent);
}
.tpc__navlines { display: flex; gap: 4px; }
.tpc__navlines i {
width: 13px;
height: 3px;
border-radius: 2px;
background: color-mix(in srgb, var(--p-heading), transparent 35%);
}
.tpc__hero {
display: block;
background: var(--p-light);
padding: 10px 8px 9px;
}
.tpc__line {
display: block;
height: 4px;
border-radius: 3px;
margin-bottom: 5px;
background: color-mix(in srgb, var(--p-text, #444444), transparent 45%);
}
.tpc__line--heading {
width: 70%;
height: 7px;
background: var(--p-heading);
}
.tpc__line--text { width: 92%; }
.tpc__line--short { width: 58%; }
.tpc__btn {
display: inline-block;
width: 36%;
height: 11px;
border-radius: 6px;
background: var(--p-accent);
margin-top: 3px;
}
.tpc__band {
display: block;
height: 8px;
background: var(--p-grad);
}
.tpc__meta {
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 12px 12px;
}
.tpc__name {
font-weight: 600;
font-size: 14.5px;
color: var(--heading-color);
}
.tpc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tpc__chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.tpc__chip i {
width: 10px;
height: 10px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,.12);
}
.tpc__check {
position: absolute;
top: 8px;
inset-inline-end: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: var(--accent-color);
color: #ffffff;
font-size: 11.5px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* ----- Custom editor card ----- */
.ts-editor {
border: 1px dashed color-mix(in srgb, var(--accent-color), transparent 60%);
background: color-mix(in srgb, var(--accent-color), transparent 97%);
}
.ts-editor__preset-seed { max-width: 210px; }
/* live sample strip */
.ts-sample {
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
border-radius: 12px;
overflow: hidden;
}
.ts-sample__band { height: 14px; }
.ts-sample__body { padding: 14px 16px; }
.ts-sample__heading { font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.ts-sample__text { font-size: 13.5px; margin-bottom: 12px; }
.ts-sample__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-sample__btn {
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 6px 16px;
border-radius: 999px;
}
.ts-sample__pill { font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 999px; }
/* token groups */
.ts-group { margin-bottom: 20px; }
.ts-group:last-child { margin-bottom: 0; }
.ts-group__title {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: color-mix(in srgb, var(--heading-color), transparent 25%);
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
padding-bottom: 5px;
margin-bottom: 4px;
}
/* token rows */
.tk-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
}
.tk-row__swatch {
flex: 0 0 44px;
width: 44px;
height: 34px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 9px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
font-size: 14px;
transition: box-shadow .15s ease, color .15s ease;
}
.tk-row__swatch:hover,
.tk-row__swatch:focus-visible,
.tk-row--open .tk-row__swatch {
color: #ffffff;
text-shadow: 0 0 3px rgba(0,0,0,.6);
}
.tk-row__swatch:focus-visible,
.tk-row--open .tk-row__swatch {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 60%);
}
.tk-row__meta { flex: 1 1 auto; min-width: 0; }
.tk-row__name { font-weight: 600; font-size: 14px; color: var(--heading-color); }
.tk-row__desc { font-size: 12px; color: color-mix(in srgb, var(--default-color), transparent 30%); }
.tk-row__contrast {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
white-space: nowrap;
cursor: help;
}
.tk-row__contrast--ok { background: #dcfce7; color: #166534; }
.tk-row__contrast--warn { background: #fef3c7; color: #92400e; }
.tk-row__hex {
width: 110px;
padding: 7px 9px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 8px;
background: var(--surface-color);
}
.tk-row__hex:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}
.tk-row__reset {
background: transparent;
border: none;
color: color-mix(in srgb, var(--default-color), transparent 30%);
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
font-size: 14px;
}
.tk-row__reset:hover,
.tk-row__reset:focus-visible {
background: color-mix(in srgb, var(--default-color), transparent 92%);
color: var(--heading-color);
}
.tk-row__error {
color: #c92a2a;
font-size: 12px;
margin: -4px 0 6px;
margin-inline-start: 56px;
}
.tk-row__picker {
max-width: 420px;
margin: 2px 0 12px;
margin-inline-start: 56px;
padding: 14px;
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
/* ----- Visual colour picker ----- */
.cp { display: flex; flex-direction: column; gap: 10px; }
.cp__sv {
position: relative;
height: 150px;
border-radius: 10px;
cursor: crosshair;
touch-action: none;
background-image:
linear-gradient(to top, #000, rgba(0,0,0,0)),
linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.cp__sv:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
outline-offset: 2px;
}
.cp__sv-thumb {
position: absolute;
width: 16px;
height: 16px;
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.3);
transform: translate(-50%, -50%);
pointer-events: none;
}
.cp__hue-row { display: flex; align-items: center; gap: 10px; }
.cp__chip {
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,.14);
}
.cp__hue {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 12px;
border-radius: 999px;
background: linear-gradient(to right,
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp__hue::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
border: 2px solid rgba(0,0,0,.25);
box-shadow: 0 1px 4px rgba(0,0,0,.3);
cursor: pointer;
}
.cp__hue::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
border: 2px solid rgba(0,0,0,.25);
box-shadow: 0 1px 4px rgba(0,0,0,.3);
cursor: pointer;
}
.cp__hue:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
outline-offset: 2px;
}
.cp__io { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp__modes {
display: inline-flex;
background: color-mix(in srgb, var(--default-color), transparent 92%);
border-radius: 8px;
padding: 2px;
}
.cp__mode {
border: none;
background: transparent;
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
color: color-mix(in srgb, var(--default-color), transparent 25%);
cursor: pointer;
}
.cp__mode--active {
background: var(--surface-color);
color: var(--heading-color);
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.cp__field--hex {
width: 110px;
padding: 6px 9px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 8px;
}
.cp__field--hex:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}
.cp__field--invalid,
.cp__field--invalid:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}
.cp__triplet { display: flex; gap: 8px; }
.cp__triplet label {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: color-mix(in srgb, var(--default-color), transparent 25%);
}
.cp__triplet input {
width: 58px;
padding: 5px 6px;
font-size: 13px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 6px;
}
.cp__error { color: #c92a2a; font-size: 12px; }
/* ----- Gradient editor ----- */
.ge { display: flex; flex-direction: column; gap: 12px; }
.ge__modes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ge__mode {
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
background: var(--surface-color);
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
color: var(--default-color);
cursor: pointer;
}
.ge__mode--active {
border-color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color), transparent 92%);
color: var(--accent-color);
font-weight: 600;
}
.ge__mode:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 50%);
outline-offset: 2px;
}
.ge__preview {
height: 44px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.1);
}
.ge__label { font-weight: 600; font-size: 13px; color: var(--heading-color); }
.ge__angle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ge__angle input[type="range"] { flex: 1 1 150px; accent-color: var(--accent-color); }
.ge__angle-num {
width: 70px;
padding: 5px 8px;
font-size: 13px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 6px;
}
.ge__deg { color: color-mix(in srgb, var(--default-color), transparent 30%); }
.ge__angle-presets { display: flex; gap: 6px; }
.ge__angle-chip {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
background: var(--surface-color);
color: color-mix(in srgb, var(--default-color), transparent 25%);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ge__angle-chip i { display: inline-block; }
.ge__angle-chip--active { border-color: var(--accent-color); color: var(--accent-color); }
.ge__stop { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ge__swatch {
min-width: 96px;
height: 34px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ge__swatch--open,
.ge__swatch:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 60%);
}
.ge__swatch-hex {
background: rgba(255,255,255,.88);
color: #333333;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
padding: 2px 7px;
border-radius: 6px;
}
.ge__pos {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: color-mix(in srgb, var(--default-color), transparent 25%);
}
.ge__pos input {
width: 64px;
padding: 5px 6px;
font-size: 13px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 6px;
}
.ge__remove {
background: transparent;
border: none;
color: color-mix(in srgb, var(--default-color), transparent 30%);
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
}
.ge__remove:hover:not(:disabled) { background: rgba(220, 38, 38, .08); color: #dc2626; }
.ge__remove:disabled { opacity: .35; cursor: default; }
.ge__add {
align-self: flex-start;
margin-top: 4px;
background: transparent;
border: 1px dashed color-mix(in srgb, var(--accent-color), transparent 50%);
color: var(--accent-color);
padding: 6px 14px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
}
.ge__add:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-color), transparent 93%); }
.ge__add:disabled { opacity: .4; cursor: default; }
.ge__picker {
max-width: 420px;
margin: 2px 0 10px;
padding: 14px;
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
@media (max-width: 575px) {
.tk-row { flex-wrap: wrap; }
.tk-row__meta { flex: 1 1 calc(100% - 120px); }
.tk-row__hex { flex: 1 1 120px; }
.tk-row__error,
.tk-row__picker { margin-inline-start: 0; }
.ge__stop { flex-wrap: wrap; }
.ts-editor__preset-seed { max-width: none; }
}
/* Smooth scroll */
:root {
scroll-behavior: smooth;
}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html {
/* font-size: 150% !important; */
overflow-x: clip;
}
body {
color: var(--default-color);
background-color: var(--background-color);
font-family: var(--default-font);
overflow-x: clip;
/* transform: scale(1.25) !important; */
/* transform-origin: top left !important; Set the origin of the scaling to the top left corner */
}
.page {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
/* article .content{
} */
/*--------------------------------------------------------------
# Mobile responsiveness safety nets
# Foundational guards so content never forces horizontal scroll on
# small screens. Component rules with higher specificity still win
# wherever they set explicit sizing (avatars, logos, object-fit imgs).
--------------------------------------------------------------*/
/* Media scales down to its container instead of overflowing the page. */
img,
svg,
video,
canvas,
iframe {
max-width: 100%;
}
img {
height: auto;
}
/* Flex/grid children (Bootstrap columns, flex rows) may shrink below their
intrinsic content width — the most common source of mobile overflow. */
.row > [class*="col-"],
.utility-bar-inner,
.utility-account {
min-width: 0;
}
/* Long unbroken strings (emails, URLs, order numbers) wrap rather than
pushing their card/cell wider than the viewport. */
.section-card,
.admin-table td,
.cart-product-cell,
.page-title nav ol {
overflow-wrap: break-word;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading-color);
font-family: var(--heading-font);
}
/* Experience and Education Lists */
.experience-list,
.education-list {
list-style: none;
padding: 0;
margin: 0;
}
.experience-list li,
.education-list li {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.experience-list li:last-child,
.education-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.experience-item,
.education-item {
display: flex;
align-items: flex-start;
}
.experience-item i,
.education-item i {
font-size: 18px;
color: var(--accent-color);
margin-right: 12px;
min-width: 20px;
padding-top: 3px;
}
/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
width: 94px;
height: 94px;
background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
border-radius: 50%;
display: block;
position: relative;
overflow: hidden;
}
.pulsating-play-btn:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
animation-delay: 0s;
animation: pulsate-play-btn 2s;
animation-direction: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}
.pulsating-play-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 100;
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.pulsating-play-btn:hover:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border: none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 200;
animation: none;
border-radius: 0;
}
.pulsating-play-btn:hover:after {
border-left: 15px solid var(--accent-color);
transform: scale(20);
}
@keyframes pulsate-play-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
display: none;
background: #df1529;
color: #ffffff;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .sent-message {
display: none;
color: #ffffff;
background: #059652;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .loading {
display: none;
background: var(--surface-color);
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--accent-color);
border-top-color: var(--surface-color);
animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
color: var(--default-color);
transition: all 0.5s;
z-index: 997;
background-color: var(--background-color);
}
.header .topbar {
background-color: var(--accent-color);
height: 40px;
padding: 0;
font-size: 14px;
transition: all 0.5s;
}
.header .topbar .contact-info i {
font-style: normal;
color: var(--contrast-color);
}
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
padding-left: 5px;
color: var(--contrast-color);
}
@media (max-width: 575px) {
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
font-size: 13px;
}
}
.header .topbar .contact-info i a {
line-height: 0;
transition: 0.3s;
}
.header .topbar .contact-info i a:hover {
color: var(--contrast-color);
text-decoration: none;
}
.header .topbar .social-links a {
color: color-mix(in srgb, var(--contrast-color), transparent 40%);
line-height: 0;
transition: 0.3s;
margin-left: 20px;
}
.header .topbar .social-links a:hover {
color: var(--contrast-color);
}
.header .branding {
min-height: 60px;
padding: 10px 0;
}
.header .logo {
line-height: 1;
}
.header .logo img {
max-height: 48px;
/* margin-right: 8px; */
}
.header .logo h1 {
font-size: 30px;
margin: 0;
font-weight: 700;
color: black;
}
.header .cta-btn,
.header .cta-btn:focus {
color: var(--contrast-color);
background: var(--accent-color);
font-size: 14px;
padding: 8px 25px;
margin: 0 0 0 30px;
border-radius: 50px;
transition: 0.3s;
}
.header .cta-btn:hover,
.header .cta-btn:focus:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
@media (max-width: 1200px) {
.header .logo {
order: 1;
}
.header .cta-btn {
order: 2;
margin: 0 15px 0 0;
padding: 6px 15px;
}
.header .navmenu {
order: 3;
}
}
.scrolled .header {
box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
.scrolled .header .topbar {
height: 0;
visibility: hidden;
overflow: hidden;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
.navmenu {
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navmenu li {
position: relative;
}
.navmenu>ul>li {
white-space: nowrap;
padding: 15px 14px;
}
.navmenu>ul>li:last-child {
padding-right: 0;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-color);
font-size: 15px;
padding: 0 2px;
font-family: var(--nav-font);
font-weight: 400;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
position: relative;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: 0.3s;
}
.navmenu>ul>li>a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -6px;
left: 0;
background-color: var(--nav-hover-color);
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navmenu a:hover:before,
.navmenu li:hover>a:before,
.navmenu .active:before {
visibility: visible;
width: 100%;
}
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-hover-color);
}
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
left: 14px;
top: 130%;
opacity: 0;
transition: 0.3s;
border-radius: 4px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu .dropdown ul li {
min-width: 200px;
}
.navmenu .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
color: var(--nav-dropdown-color);
}
.navmenu .dropdown ul a i {
font-size: 12px;
}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {
color: var(--nav-dropdown-hover-color);
}
.navmenu .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navmenu .dropdown .dropdown ul {
top: 0;
left: -90%;
visibility: hidden;
}
.navmenu .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: -100%;
visibility: visible;
}
}
/* Mobile Navigation */
@media (max-width: 1199px) {
.mobile-nav-toggle {
color: var(--nav-color);
font-size: 28px;
line-height: 0;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s;
}
.navmenu {
padding: 0;
z-index: 9997;
}
.navmenu ul {
display: none;
list-style: none;
position: absolute;
inset: 60px 20px 20px 20px;
padding: 10px 0;
margin: 0;
border-radius: 6px;
background-color: var(--nav-mobile-background-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
box-shadow: none;
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-dropdown-color);
padding: 10px 20px;
font-family: var(--nav-font);
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.navmenu a i:hover,
.navmenu a:focus i:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-dropdown-hover-color);
}
.navmenu .active i,
.navmenu .active:focus i {
background-color: var(--accent-color);
color: var(--contrast-color);
transform: rotate(180deg);
}
.navmenu .dropdown ul {
position: static;
display: none;
z-index: 99;
padding: 10px 0;
margin: 10px 20px;
background-color: var(--nav-dropdown-background-color);
transition: all 0.5s ease-in-out;
}
.navmenu .dropdown ul ul {
background-color: rgba(33, 37, 41, 0.1);
}
.navmenu .dropdown>.dropdown-active {
display: block;
background-color: rgba(33, 37, 41, 0.03);
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav-toggle {
color: #fff;
position: absolute;
font-size: 32px;
top: 15px;
right: 15px;
margin-right: 0;
z-index: 9999;
}
.mobile-nav-active .navmenu {
position: fixed;
overflow: hidden;
inset: 0;
background: rgba(33, 37, 41, 0.8);
transition: 0.3s;
}
.mobile-nav-active .navmenu>ul {
display: block;
}
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
color: var(--default-color);
background-color: var(--background-color);
border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
font-size: 14px;
position: relative;
}
.footer .footer-top {
padding-top: 50px;
}
.footer .footer-about .logo {
line-height: 1;
margin-bottom: 25px;
}
.footer .footer-about .logo img {
max-height: 40px;
margin-right: 6px;
}
.footer .footer-about .logo span {
color: var(--heading-color);
font-family: var(--heading-font);
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
}
.footer .footer-about p {
font-size: 14px;
font-family: var(--heading-font);
}
.footer .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 16px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin-right: 10px;
transition: 0.3s;
}
.footer .social-links a:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
.footer h4 {
font-size: 16px;
font-weight: bold;
position: relative;
padding-bottom: 12px;
}
.footer .footer-links {
margin-bottom: 30px;
}
.footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-links ul i {
padding-right: 2px;
font-size: 12px;
line-height: 0;
}
.footer .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
.footer .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-links ul a {
color: color-mix(in srgb, var(--default-color), transparent 30%);
display: inline-block;
line-height: 1;
}
.footer .footer-links ul a:hover {
color: var(--accent-color);
}
.footer .footer-contact p {
margin-bottom: 5px;
}
.footer .footer-bottom {
padding-top: 25px;
padding-bottom: 25px;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer .copyright p {
margin-bottom: 0;
}
.footer .credits {
margin-top: 8px;
font-size: 13px;
}
.footer .developed-by a {
color: var(--default-color);
}
.footer .developed-by img {
height: 18px;
}
/* Phones: lay the three link sections out in a 2-column grid (instead of a
single tall stack) so the footer is ~half the height. Brand/contact info
stays full-width on top; link lists pair up two-per-row. */
@media (max-width: 767px) {
.footer .footer-top .footer-links {
flex: 0 0 50%;
max-width: 50%;
}
.footer .footer-top .footer-links h4 {
font-size: 16px;
margin-bottom: 10px;
}
.footer .footer-top .footer-links ul li {
padding: 6px 0;
}
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader,
.preloader-overlay {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.6s ease-out;
}
#preloader:before,
.preloader-overlay:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}
.preloader-label {
position: fixed;
top: calc(50% + 50px);
left: 0;
right: 0;
text-align: center;
font-family: var(--default-font);
color: var(--heading-color);
font-size: 14px;
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background-color: var(--accent-color);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}
.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
color: var(--default-color);
background-color: var(--background-color);
position: relative;
}
.page-title .heading {
padding: 80px 0;
border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}
.page-title .heading h1 {
font-size: 38px;
font-weight: 700;
}
/* The page-title heading receives programmatic focus on SPA navigation
(tabindex="-1") so screen readers announce the new page. That focus drew a
full-width outline that overflowed the viewport edge on mobile. Suppress it
for this non-interactive heading; keyboard focus rings elsewhere are kept. */
.page-title .heading h1:focus,
.page-title .heading h1:focus-visible {
outline: none;
}
/* Scale the page-title down on phones so long titles don't crowd the edge. */
@media (max-width: 575px) {
.page-title .heading {
padding: 48px 0;
}
.page-title .heading h1 {
font-size: 26px;
}
.page-title nav {
padding: 14px 0;
}
.page-title nav ol {
font-size: 14px;
}
}
.page-title nav {
background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
padding: 20px 0;
}
.page-title nav ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
font-size: 16px;
font-weight: 600;
}
.page-title nav ol li+li {
padding-left: 10px;
}
.page-title nav ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 60px 0;
scroll-margin-top: 72px;
overflow: clip;
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 60px;
}
}
/*--------------------------------------------------------------
# Global Content Inset
# Standardizes the horizontal page-edge → content gutter for every
# page body container. Header and footer sit outside `.main > .content`
# and keep their own widths.
--------------------------------------------------------------*/
.main > .content .container {
width: min(98vw, 1720px);
max-width: min(98vw, 1720px);
margin-inline: auto;
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
text-align: center;
padding-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 32px;
font-weight: 500;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}
.section-title h2:before {
content: "";
position: absolute;
display: block;
width: 160px;
height: 1px;
background: color-mix(in srgb, var(--default-color), transparent 60%);
left: 0;
right: 0;
bottom: 1px;
margin: auto;
}
.section-title h2::after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 3px;
background: var(--accent-color);
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.section-title p {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
min-height: calc(100vh - 112px);
padding: 80px 0 60px;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
overflow: hidden;
background: url("/assets/img/heroBackdrop.jpg") center top / cover no-repeat;
}
/* Recede the backdrop image: soft veil + slight blur so it sits deep behind the foreground */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--light-background), transparent 38%),
color-mix(in srgb, var(--surface-color), transparent 30%));
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 2;
}
.hero img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero .container {
margin: 100px 0px;
z-index: 3;
}
.hero .welcome h2 {
margin: 0;
font-size: 48px;
font-weight: 700;
}
.hero .welcome p {
font-size: 24px;
margin: 0;
}
.hero .content {
margin-top: 40px;
}
.hero .content .why-box {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 14%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 80%);
padding: 30px;
border-radius: 4px;
}
.hero .content .why-box h3 {
color: var(--contrast-color);
font-weight: 700;
font-size: 34px;
margin-bottom: 30px;
}
.hero .content .why-box p {
margin-bottom: 30px;
}
.hero .content .why-box .more-btn {
color: var(--contrast-color);
background: color-mix(in srgb, var(--contrast-color), transparent 80%);
display: inline-block;
padding: 6px 30px 8px 30px;
border-radius: 50px;
transition: all ease-in-out 0.4s;
}
.hero .content .why-box .more-btn i {
font-size: 14px;
}
.hero .content .why-box .more-btn:hover {
background: var(--surface-color);
color: var(--accent-color);
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}
.hero .content .icon-box {
text-align: center;
border-radius: 10px;
background: color-mix(in srgb, var(--surface-color), transparent 38%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid color-mix(in srgb, var(--surface-color), transparent 40%);
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.12);
padding: 40px 30px;
width: 100%;
}
.hero .content .icon-box i {
font-size: 40px;
color: var(--accent-color);
}
.hero .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 10px 0 20px 0;
}
.hero .content .icon-box p {
font-size: 15px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.about .content h3 {
font-size: 2rem;
font-weight: 700;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
display: flex;
align-items: flex-start;
margin-top: 40px;
}
.about .content ul i {
flex-shrink: 0;
font-size: 48px;
color: var(--accent-color);
margin-right: 20px;
}
.about .content ul h5 {
font-size: 18px;
font-weight: 700;
}
.about .content ul p {
font-size: 15px;
}
.about .content p:last-child {
margin-bottom: 0;
}
.about .pulsating-play-btn {
position: absolute;
left: calc(50% - 47px);
top: calc(50% - 47px);
}
/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
color: var(--contrast-color);
background-color: var(--accent-color);
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
width: 54px;
height: 54px;
font-size: 24px;
border-radius: 50px;
border: 2px solid var(--background-color);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.stats .stats-item {
background-color: var(--surface-color);
margin-top: -27px;
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 0;
}
.stats .stats-item span {
font-size: 32px;
display: block;
margin: 10px 0;
font-weight: 700;
color: var(--heading-color);
}
.stats .stats-item p {
padding: 0;
margin: 0;
font-family: var(--heading-font);
font-size: 16px;
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
background-color: var(--surface-color);
text-align: center;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
padding: 80px 20px;
transition: all ease-in-out 0.3s;
height: 100%;
}
.services .service-item .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: var(--accent-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: 0.3s;
transform-style: preserve-3d;
}
.services .service-item .icon i {
color: var(--contrast-color);
font-size: 28px;
transition: ease-in-out 0.3s;
}
.services .service-item .icon::before {
position: absolute;
content: "";
left: -8px;
top: -8px;
height: 100%;
width: 100%;
background: color-mix(in srgb, var(--accent-color), transparent 80%);
border-radius: 5px;
transition: all 0.3s ease-out 0s;
transform: translateZ(-1px);
}
.services .service-item h3 {
font-weight: 700;
margin: 10px 0 15px 0;
font-size: 22px;
}
.services .service-item p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .service-item:hover {
background: var(--accent-color);
border-color: var(--accent-color);
}
.services .service-item:hover .icon {
background: var(--surface-color);
}
.services .service-item:hover .icon i {
color: var(--accent-color);
}
.services .service-item:hover .icon::before {
background: color-mix(in srgb, var(--background-color), transparent 70%);
}
.services .service-item:hover h3,
.services .service-item:hover p {
color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Appointment Section
--------------------------------------------------------------*/
.appointment .php-email-form {
width: 100%;
}
.appointment .php-email-form .form-group {
padding-bottom: 8px;
}
.appointment .php-email-form input,
.appointment .php-email-form textarea,
.appointment .php-email-form select {
color: var(--default-color);
background-color: transparent;
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
border-radius: 0;
box-shadow: none;
font-size: 14px;
padding: 10px !important;
}
.appointment .php-email-form input:focus,
.appointment .php-email-form textarea:focus,
.appointment .php-email-form select:focus {
border-color: var(--accent-color);
}
.appointment .php-email-form input::placeholder,
.appointment .php-email-form textarea::placeholder,
.appointment .php-email-form select::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.appointment .php-email-form input,
.appointment .php-email-form select {
height: 44px;
}
.appointment .php-email-form textarea {
padding: 10px 12px;
}
.appointment .php-email-form button[type=submit] {
background: var(--accent-color);
border: 0;
padding: 10px 35px;
color: #fff;
transition: 0.4s;
border-radius: 50px;
}
.appointment .php-email-form button[type=submit]:hover {
background: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/*--------------------------------------------------------------
# Departments Section
--------------------------------------------------------------*/
.departments {
overflow: hidden;
}
.departments .nav-tabs {
border: 0;
}
.departments .nav-link {
border: 0;
padding: 12px 15px 12px 0;
transition: 0.3s;
color: var(--default-color);
border-radius: 0;
border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
font-weight: 600;
font-size: 15px;
}
.departments .nav-link:hover {
color: var(--accent-color);
}
.departments .nav-link.active {
color: var(--accent-color);
border-color: var(--accent-color);
background-color: var(--background-color);
}
.departments .tab-pane.active {
animation: fadeIn 0.5s ease-out;
}
.departments .details h3 {
font-size: 26px;
font-weight: 600;
margin-bottom: 20px;
}
.departments .details p {
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.departments .details p:last-child {
margin-bottom: 0;
}
@media (max-width: 992px) {
.departments .nav-link {
border: 0;
padding: 15px;
}
.departments .nav-link.active {
color: var(--accent-color);
background: var(--accent-color);
}
}
/*--------------------------------------------------------------
# therapists Section
--------------------------------------------------------------*/
.therapists .team-member {
background-color: var(--surface-color);
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 5px;
transition: 0.5s;
padding: 30px;
height: 100%;
}
@media (max-width: 468px) {
.therapists .team-member {
flex-direction: column;
justify-content: center !important;
align-items: center !important;
}
}
.therapists .team-member .pic {
overflow: hidden;
width: 150px;
border-radius: 8px; /* Changed from 50% to 8px for rectangular shape with slightly rounded corners */
flex-shrink: 0;
}
.therapists .team-member .pic img {
transition: ease-in-out 0.3s;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.therapists .team-member:hover {
transform: translateY(-10px);
}
.therapists .team-member .member-info {
padding-left: 30px;
padding-right: 30px;
}
@media (max-width: 468px) {
.therapists .team-member .member-info {
padding: 30px 0 0 0;
text-align: center;
}
}
.therapists .team-member h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
}
.therapists .team-member span {
display: block;
font-size: 15px;
padding-bottom: 10px;
position: relative;
font-weight: 500;
}
.therapists .team-member span::after {
content: "";
position: absolute;
display: block;
width: 400px;
height: 1px;
background: color-mix(in srgb, var(--default-color), transparent 85%);
bottom: 0;
left: calc(50% - 200px);
}
@media (max-width: 468px) {
.therapists .team-member span::after {
width: 100px;
left: calc(50% - 50px);
}
}
.therapists .team-member p {
margin: 10px 0 0 0;
font-size: 14px;
}
.therapists .team-member .social {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: start;
width: 100%;
}
@media (max-width: 468px) {
.therapists .team-member .social {
justify-content: center;
}
}
.therapists .team-member .social a {
background: color-mix(in srgb, var(--default-color), transparent 94%);
transition: ease-in-out 0.3s;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
width: 36px;
height: 36px;
}
.therapists .team-member .social a i {
color: color-mix(in srgb, var(--default-color), transparent 20%);
font-size: 16px;
margin: 0 2px;
}
.therapists .team-member .social a:hover {
background: var(--accent-color);
}
.therapists .team-member .social a:hover i {
color: var(--contrast-color);
}
.therapists .team-member .social a+a {
margin-left: 8px;
}
/* Phones: 2-column compact therapist grid (photo + name + specialty).
The long intro and social row are hidden to keep cards tidy, and the
horizontal card stacks vertically. Scoped to the cards row (.gy-4) so the
pagination row below is unaffected. */
@media (max-width: 767px) {
.therapists .row.gy-4 > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
}
.therapists .team-member {
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px 12px;
}
.therapists .team-member .pic {
width: 96px;
}
.therapists .team-member .member-info {
padding: 12px 0 0 0;
width: 100%;
text-align: center;
min-width: 0;
}
.therapists .team-member h4 {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
.therapists .team-member span {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.therapists .team-member span::after {
width: 60px;
left: calc(50% - 30px);
}
/* keep the 2-up cards compact */
.therapists .team-member p,
.therapists .team-member .social {
display: none;
}
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
background-color: var(--surface-color);
position: relative;
padding: 20px;
margin-bottom: 15px;
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
border-radius: 5px;
overflow: hidden;
}
.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}
.faq .faq-container .faq-item h3 {
font-weight: 500;
font-size: 18px;
line-height: 24px;
margin: 0 30px 0 0;
transition: 0.3s;
cursor: pointer;
display: flex;
align-items: center;
}
.faq .faq-container .faq-item h3 .num {
color: var(--accent-color);
padding-right: 5px;
}
.faq .faq-container .faq-item h3:hover {
color: var(--accent-color);
}
.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.faq .faq-container .faq-item .faq-content p {
margin-bottom: 0;
overflow: hidden;
}
.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
line-height: 0;
transition: 0.3s;
cursor: pointer;
}
.faq .faq-container .faq-item .faq-toggle:hover {
color: var(--accent-color);
}
.faq .faq-container .faq-active {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover {
color: var(--contrast-color);
}
.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 10px;
}
.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .info h3 {
font-weight: 700;
font-size: 32px;
}
.testimonials .swiper {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
background-color: var(--surface-color);
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
box-sizing: content-box;
min-height: 200px;
position: relative;
margin: 30px;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
height: 90px;
border-radius: 50px;
border: 6px solid var(--background-color);
margin-right: 10px;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
}
.testimonials .testimonial-item h4 {
color: color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 14px;
margin: 0;
}
.testimonials .testimonial-item .stars {
margin: 10px 0;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: color-mix(in srgb, var(--accent-color), transparent 60%);
font-size: 26px;
line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px auto 15px auto;
}
.testimonials .swiper-wrapper {
height: auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
margin-bottom: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
opacity: 1;
border: none;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
@media (max-width: 767px) {
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
margin: 15px;
}
}
/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .gallery-item {
overflow: hidden;
border-right: 3px solid var(--background-color);
border-bottom: 3px solid var(--background-color);
}
.gallery .gallery-item img {
transition: all ease-in-out 0.4s;
}
.gallery .gallery-item:hover img {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
margin-top: 40px;
}
.contact .info-item i {
color: var(--contrast-color);
background: var(--accent-color);
font-size: 20px;
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
margin-inline-end: 15px;
}
.contact .info-item h3 {
padding: 0;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}
.contact .info-item p {
padding: 0;
margin-bottom: 0;
font-size: 14px;
}
.contact .php-email-form {
height: 100%;
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
font-size: 14px;
padding: 10px 15px;
box-shadow: none;
border-radius: 0;
color: var(--default-color);
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
border-color: var(--accent-color);
}
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.contact .php-email-form button[type=submit] {
color: var(--contrast-color);
background: var(--accent-color);
border: 0;
padding: 10px 36px;
transition: 0.4s;
border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
background: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/*--------------------------------------------------------------
# Services Page
--------------------------------------------------------------*/
.services-sidebar {
background: var(--surface-color);
border-radius: 16px;
padding: 28px 22px;
box-shadow: 0 10px 30px color-mix(in srgb, var(--heading-color), transparent 92%);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
position: sticky;
top: 100px;
}
.services-sidebar .sidebar-title {
color: var(--heading-color);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.2px;
padding-bottom: 14px;
margin-bottom: 18px;
position: relative;
}
.services-sidebar .sidebar-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background: var(--accent-color);
border-radius: 3px;
}
[dir="rtl"] .services-sidebar .sidebar-title::after {
left: auto;
right: 0;
}
.services-sidebar .list-group {
gap: 6px;
display: flex;
flex-direction: column;
}
.services-sidebar .list-group-item {
background: transparent;
border: 1px solid transparent;
border-radius: 10px !important;
padding: 12px 14px;
color: var(--default-color);
font-weight: 500;
text-align: start;
transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
}
.services-sidebar .list-group-item i {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: color-mix(in srgb, var(--accent-color), transparent 88%);
color: var(--accent-color);
font-size: 14px;
transition: background-color 0.25s ease, color 0.25s ease;
flex-shrink: 0;
}
.services-sidebar .list-group-item:hover:not(.active) {
background: color-mix(in srgb, var(--accent-color), transparent 94%);
color: var(--heading-color);
transform: translateX(4px);
}
[dir="rtl"] .services-sidebar .list-group-item:hover:not(.active) {
transform: translateX(-4px);
}
.services-sidebar .list-group-item.active {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.services-sidebar .list-group-item.active i {
background: color-mix(in srgb, var(--contrast-color), transparent 80%);
color: var(--contrast-color);
}
.service-detail {
background: var(--surface-color);
border-radius: 16px;
padding: 36px;
box-shadow: 0 10px 30px color-mix(in srgb, var(--heading-color), transparent 92%);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.service-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.service-detail .service-icon {
background: color-mix(in srgb, var(--accent-color), transparent 88%);
color: var(--accent-color);
width: 64px;
height: 64px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin: 0;
flex-shrink: 0;
position: relative;
}
.service-detail .service-icon::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 18px;
background: color-mix(in srgb, var(--accent-color), transparent 94%);
z-index: -1;
}
.service-detail .service-title {
color: var(--heading-color);
margin: 0;
font-weight: 700;
font-size: 28px;
line-height: 1.25;
}
.service-content > div {
margin-bottom: 24px;
}
.service-content h4 {
color: var(--heading-color);
font-weight: 700;
font-size: 18px;
margin-bottom: 10px;
position: relative;
padding-inline-start: 14px;
}
.service-content h4::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 6px;
width: 4px;
height: 16px;
border-radius: 2px;
background: var(--accent-color);
}
.service-content p {
color: var(--default-color);
line-height: 1.75;
margin: 0;
}
.specialized-therapists {
margin-top: 12px;
padding-top: 28px;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.specialized-therapists h3 {
color: var(--heading-color);
margin-bottom: 24px;
font-weight: 700;
font-size: 22px;
position: relative;
padding-bottom: 12px;
}
.specialized-therapists h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 3px;
background: var(--accent-color);
border-radius: 3px;
}
[dir="rtl"] .specialized-therapists h3::after {
left: auto;
right: 0;
}
.specialized-therapists a {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.specialized-therapists .member {
position: relative;
background: var(--surface-color);
box-shadow: 0 6px 20px color-mix(in srgb, var(--heading-color), transparent 92%);
padding: 28px 22px;
border-radius: 14px;
text-align: center;
height: 100%;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.specialized-therapists .member:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px color-mix(in srgb, var(--accent-color), transparent 80%);
border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}
.specialized-therapists .member .member-img {
overflow: hidden;
border-radius: 50%;
margin: 0 auto 18px auto;
width: 120px;
height: 120px;
border: 3px solid color-mix(in srgb, var(--accent-color), transparent 80%);
transition: border-color 0.3s ease;
}
.specialized-therapists .member:hover .member-img {
border-color: var(--accent-color);
}
.specialized-therapists .member .member-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.specialized-therapists .member:hover .member-img img {
transform: scale(1.06);
}
.specialized-therapists .member h4 {
font-weight: 700;
margin-bottom: 4px;
font-size: 18px;
color: var(--heading-color);
}
.specialized-therapists .member span {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--accent-color);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.specialized-therapists .member p {
font-size: 14px;
margin: 0;
color: var(--default-color);
line-height: 1.6;
}
.service-placeholder {
background: color-mix(in srgb, var(--accent-color), transparent 96%);
border-radius: 16px;
padding: 70px 24px;
border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 70%);
}
.service-placeholder i {
color: var(--accent-color);
opacity: 0.7;
}
.service-placeholder h3 {
color: var(--heading-color);
font-weight: 600;
margin: 0;
}
@media (max-width: 991px) {
.services-sidebar {
position: static;
margin-bottom: 24px;
}
.service-detail {
padding: 24px;
}
.service-detail .service-title {
font-size: 22px;
}
}
/* Services page on phones: stack the two panels and turn the vertical service
list into a horizontally scrollable pill selector to save vertical space.
Content area stays full-width with no horizontal page overflow. */
@media (max-width: 767px) {
.services-sidebar {
padding: 16px;
margin-bottom: 18px;
}
.services-sidebar .sidebar-title {
margin-bottom: 12px;
}
.services-sidebar .list-group {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
padding-bottom: 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.services-sidebar .list-group::-webkit-scrollbar {
display: none;
}
.services-sidebar .list-group-item {
flex: 0 0 auto;
white-space: nowrap;
padding: 9px 14px;
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
border-radius: 999px !important;
}
/* No sideways nudge on tap for the horizontal pill layout */
.services-sidebar .list-group-item:hover:not(.active),
[dir="rtl"] .services-sidebar .list-group-item:hover:not(.active) {
transform: none;
}
.service-detail {
padding: 18px;
}
.service-detail .service-icon {
width: 52px;
height: 52px;
font-size: 22px;
}
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
/* Add your styles here */
}
/* Mission and Vision Section Styles */
.ettizan-mission-vision h4 {
font-family: var(--heading-font);
margin-bottom: 1rem;
color: var(--primary-color, #1977cc);
font-size: 1.4rem;
}
.ettizan-mission-vision p {
margin-bottom: 1.2rem;
line-height: 1.6;
}
.ettizan-mission-vision i {
color: var(--primary-color, #1977cc);
}
.value-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.8rem 0.5rem;
transition: all 0.3s ease;
}
.value-item i {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.value-item:hover {
transform: translateY(-5px);
}
.goals-list {
list-style: none;
padding-left: 1rem;
}
.goals-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
.goals-list li::before {
content: "•";
color: var(--primary-color, #1977cc);
font-size: 1.2rem;
position: absolute;
left: 0;
}
/* About Features List Styles */
.about-features {
list-style: none;
padding: 0;
}
.about-features li {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.about-features .about-icon {
font-size: 1.8rem; /* Matches value-item i font-size */
color: var(--primary-color, #1977cc);
margin-right: 1rem;
min-width: 1.8rem; /* Adjusted to match icon size */
display: flex;
align-items: center;
justify-content: center;
}
/* Section Title with Icon */
.card-title.mb-0 {
margin-bottom: 0 !important;
}
.card-body .d-flex.align-items-center i {
font-size: 22px;
color: var(--accent-color);
margin-right: 10px;
display: flex;
align-items: center;
}
/* Appointment Calendar Styles */
.calendar-container {
background: var(--surface-color);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.calendar-weekdays {
margin-bottom: 10px;
}
.calendar-day-header {
flex: 1;
text-align: center;
font-weight: 600;
color: var(--heading-color);
padding: 8px;
}
.calendar-week {
margin-bottom: 8px;
}
.calendar-day {
flex: 1;
text-align: center;
padding: 10px;
cursor: pointer;
position: relative;
border-radius: 50%;
margin: 2px;
transition: all 0.2s ease;
}
.calendar-day:hover {
background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.calendar-day.available {
font-weight: 600;
color: var(--accent-color);
}
.calendar-day.selected {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.availability-dot {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--accent-color);
display: block;
}
.calendar-day.selected .availability-dot {
background-color: var(--contrast-color);
}
.time-slot-btn {
min-width: 85px;
margin-bottom: 8px;
}
.appointment-stepper {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0;
margin: 0 0 28px;
flex-wrap: wrap;
}
.appointment-stepper li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background-color: #f1f3f6;
color: #6c757d;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s ease;
}
.appointment-stepper li + li::before {
content: "";
display: block;
width: 24px;
height: 2px;
background-color: #dee2e6;
margin-right: 12px;
margin-left: -10px;
}
.appointment-stepper .step-bullet {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #ced4da;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
}
.appointment-stepper li.active {
background-color: rgba(25, 119, 204, 0.12);
color: var(--accent-color);
}
.appointment-stepper li.active .step-bullet {
background-color: var(--accent-color);
}
.appointment-stepper li.completed {
color: #198754;
}
.appointment-stepper li.completed .step-bullet {
background-color: #198754;
}
.appointment-stepper li.clickable {
cursor: pointer;
}
.appointment-stepper li.clickable:hover {
filter: brightness(0.95);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.appointment-stepper li[aria-disabled="true"] {
cursor: default;
}
.selected-therapist-card {
border-left: 4px solid var(--accent-color);
}
[dir="rtl"] .selected-therapist-card {
border-left: none;
border-right: 4px solid var(--accent-color);
}
.calendar-day.disabled,
.calendar-day:not(.available):not(.text-muted) {
cursor: default;
}
.calendar-day:not(.available):hover {
background-color: transparent;
}
.calendar-day.available:focus-visible,
.time-slot-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
/* Appointment Form Modifications */
.appointment .card {
border: none;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border-radius: 10px;
overflow: hidden;
}
.appointment .card-title {
color: var(--heading-color);
font-weight: 600;
}
.appointment .form-label {
font-weight: 500;
color: var(--heading-color);
margin-bottom: 0.5rem;
}
.appointment .btn-outline-primary {
border-color: var(--accent-color);
color: var(--accent-color);
}
.appointment .btn-outline-primary:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.appointment .btn-primary {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
.appointment .btn-primary:hover {
background-color: color-mix(in srgb, var(--accent-color), #000 18%);
border-color: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.appointment .form-control:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
/* Success Page Styling */
.appointment .text-success {
color: #28a745 !important;
}
.appointment .card-header.bg-primary {
background-color: var(--accent-color) !important;
}
.appointment .alert-info {
background-color: rgba(var(--bs-info-rgb), 0.1);
border-color: rgba(var(--bs-info-rgb), 0.2);
}
/* Auth Pages Styling (Login & Registration) */
.auth-section {
padding: 60px 0;
min-height: 80vh;
display: flex;
align-items: center;
}
.auth-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 500px;
margin: 0 auto;
}
.auth-container h2 {
color: var(--heading-color);
margin-bottom: 20px;
text-align: center;
font-weight: 600;
}
.auth-container .form-group {
margin-bottom: 20px;
}
.auth-container label {
font-weight: 500;
color: var(--heading-color);
margin-bottom: 8px;
display: block;
}
.auth-container .form-control {
height: 48px;
border-radius: 0;
border: 1px solid #e7e7e7;
font-size: 15px;
padding: 10px 15px;
transition: all 0.3s ease;
}
.auth-container .form-control:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 75%);
}
.auth-container .btn-primary {
background-color: var(--heading-color);
border-color: var(--heading-color);
padding: 10px 30px;
font-size: 16px;
border-radius: 4px;
height: 48px;
transition: all 0.3s ease;
display: block;
width: 100%;
font-weight: 500;
}
.auth-container .btn-primary:hover {
background-color: color-mix(in srgb, var(--accent-color), #000 18%);
border-color: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.auth-container .auth-links {
text-align: center;
margin-top: 20px;
}
.auth-container .auth-links a {
color: var(--accent-color);
font-weight: 500;
}
.auth-container .auth-links a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none;
}
.auth-container .form-check {
margin-bottom: 20px;
}
.auth-container .form-check-input:checked {
background-color: var(--accent-color);
border-color: var(--accent-color);
}
.validation-message {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
.auth-container .auth-separator {
text-align: center;
margin: 20px 0;
overflow: hidden;
}
.auth-container .auth-separator span {
display: inline-block;
position: relative;
color: #6c757d;
padding: 0 10px;
}
.auth-container .auth-separator span:before,
.auth-container .auth-separator span:after {
content: "";
position: absolute;
top: 50%;
width: 100px;
height: 1px;
background-color: #e7e7e7;
}
.auth-container .auth-separator span:before {
right: 100%;
}
.auth-container .auth-separator span:after {
left: 100%;
}
/* FAQ Styling */
.faq {
padding: 60px 0;
}
.faq .faq-container {
max-width: 100%;
margin: 0 auto;
}
.faq .faq-item {
border-bottom: 1px solid #eee;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
cursor: pointer;
}
.faq .faq-item h3 {
font-size: 18px;
font-weight: 600;
padding-right: 30px;
margin-bottom: 0;
color: var(--heading-color);
transition: all 0.3s ease;
}
.faq .faq-item:hover h3 {
color: var(--accent-color);
}
.faq .faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-top: 0;
}
.faq .faq-active .faq-content {
max-height: 1000px;
transition: max-height 0.5s ease-in;
margin-top: 15px;
}
.faq .faq-toggle {
position: absolute;
right: 0;
top: 0;
color: var(--accent-color);
transition: transform 0.3s ease;
}
.faq .faq-active .faq-toggle {
transform: rotate(90deg);
}
.faq .faq-active h3 {
color: var(--accent-color);
}
/* Therapist Detail Page Styling */
.therapist-profile-image {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.therapist-detail h3 {
color: var(--accent-color);
margin-bottom: 1rem;
}
.therapist-detail .expertise-item {
background-color: var(--surface-color);
padding: 8px 16px;
border-radius: 50px;
display: inline-block;
margin-bottom: 10px;
margin-right: 10px;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.therapist-detail .expertise-item i {
color: var(--accent-color);
margin-right: 5px;
}
.therapist-detail .contact-info-card {
background-color: var(--surface-color);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}
.therapist-detail .contact-item {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.therapist-detail .contact-item i {
font-size: 18px;
color: var(--accent-color);
margin-right: 12px;
width: 20px;
text-align: center;
}
.therapist-detail .bio-section {
margin-bottom: 30px;
line-height: 1.8;
}
.therapist-detail .bio-section p {
margin-bottom: 15px;
}
.therapist-detail .social-icons {
margin-top: 20px;
}
.therapist-detail .social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--surface-color);
color: var(--default-color);
margin-right: 10px;
transition: all 0.3s ease;
}
.therapist-detail .social-icons a:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.therapist-detail .appointment-btn {
margin-top: 20px;
display: block;
width: 100%;
padding: 12px 0;
background-color: var(--accent-color);
color: var(--contrast-color);
text-align: center;
border-radius: 5px;
transition: all 0.3s ease;
font-weight: 600;
}
.therapist-detail .appointment-btn:hover {
background-color: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/* Experience and Education Lists */
.experience-list,
.education-list {
list-style: none;
padding: 0;
margin: 0;
}
.experience-list li,
.education-list li {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.experience-list li:last-child,
.education-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.experience-item,
.education-item {
display: flex;
align-items: flex-start;
}
.experience-item i,
.education-item i {
font-size: 18px;
color: var(--accent-color);
margin-right: 12px;
min-width: 20px;
padding-top: 3px;
}
/* Section Title with Icon */
.card-title.mb-0 {
margin-bottom: 0 !important;
}
.card-body .d-flex.align-items-center i {
font-size: 22px;
color: var(--accent-color);
margin-right: 10px;
display: flex;
align-items: center;
}
/* Therapist Dashboard Styles */
.therapist-dashboard {
background-color: var(--background-color);
min-height: 100vh;
padding: 2rem 0;
}
/* Client dashboard responsive sizing/alignment overrides */
.client-dashboard {
padding-block: clamp(1rem, 2.5vh, 2rem);
}
.client-dashboard > .container {
width: min(100vw, 2160px);
margin-inline: auto;
}
.client-dashboard .profile-header {
padding: clamp(1rem, 2.2vw, 2rem);
gap: clamp(0.75rem, 2vw, 2rem);
}
.client-dashboard .profile-header img {
width: clamp(84px, 10vw, 120px);
height: clamp(84px, 10vw, 120px);
}
.client-dashboard .profile-header h2 {
font-size: clamp(1.35rem, 2.2vw, 2rem);
}
.client-dashboard .profile-header h4 {
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.client-dashboard .dashboard-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: clamp(1rem, 2vw, 2rem);
}
.client-dashboard .section-card {
padding: clamp(1rem, 2vw, 2rem);
}
.client-dashboard .selected-date-appointments {
margin-top: clamp(1rem, 2vh, 2rem);
padding: clamp(1rem, 2vw, 1.5rem);
}
.client-dashboard .appointment-item {
padding: clamp(0.9rem, 1.5vw, 1.5rem);
gap: clamp(0.75rem, 1.5vw, 1rem);
flex-wrap: wrap;
}
.client-dashboard .appointment-time {
min-width: clamp(6.5rem, 15vw, 8.75rem);
}
.client-dashboard .days button {
min-height: clamp(2.8rem, 7vw, 4.2rem);
padding: clamp(0.4rem, 1.2vw, 1rem);
}
.client-dashboard .modal-container {
width: min(92vw, 38rem);
max-height: min(86vh, 48rem);
}
.client-dashboard .modal-body {
padding: clamp(1rem, 2.5vw, 2rem);
}
/* Profile Header */
.profile-header {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #4a90e2 50%));
color: var(--contrast-color);
padding: 2rem;
border-radius: 16px;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(25, 119, 204, 0.15);
display: flex;
align-items: center;
gap: 2rem;
}
.profile-header img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.2);
object-fit: cover;
}
.profile-header h2 {
color: var(--contrast-color);
margin-bottom: 0.5rem;
font-size: 2rem;
font-weight: 600;
}
.profile-header h4 {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1rem;
font-weight: 400;
}
.contact-link {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
margin-inline-end: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.contact-link:hover {
color: var(--contrast-color);
transform: translateY(-1px);
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
/* Section Cards */
.section-card {
background: var(--surface-color);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: fit-content;
}
.section-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.section-card h3 {
color: var(--heading-color);
margin-bottom: 1.5rem;
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Calendar Container */
.calendar-container {
grid-column: 1 / -1;
max-width: none;
}
/* Calendar Styles */
.calendar-view {
background: var(--surface-color);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.month {
background: var(--heading-color);
color: var(--contrast-color);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.month button {
background: none;
border: none;
color: var(--contrast-color);
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.month button:hover {
background: rgba(255, 255, 255, 0.1);
}
.month h4 {
color: var(--contrast-color);
margin: 0;
font-size: 1.3rem;
font-weight: 500;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--accent-color);
}
.weekdays div {
padding: 1rem;
text-align: center;
color: var(--contrast-color);
font-weight: 500;
font-size: 0.9rem;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: rgba(0, 0, 0, 0.05);
}
.days button {
background: var(--surface-color);
border: none;
padding: 1rem;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
color: var(--default-color);
font-weight: 500;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.days button:hover {
background: color-mix(in srgb, var(--accent-color), transparent 90%);
color: var(--accent-color);
}
.days button.today {
background: var(--accent-color);
color: var(--contrast-color);
font-weight: 600;
}
.days button.selected {
background: var(--heading-color);
color: var(--contrast-color);
}
.days button.has-appointments .appointment-dot {
position: absolute;
bottom: 8px;
right: 8px;
width: 8px;
height: 8px;
background: #ff6b6b;
border-radius: 50%;
}
.days button.empty {
background: rgba(0, 0, 0, 0.02);
cursor: default;
}
/* Selected Date Appointments */
.selected-date-appointments {
margin-top: 2rem;
padding: 1.5rem;
background: color-mix(in srgb, var(--accent-color), transparent 95%);
border-radius: 12px;
border-left: 4px solid var(--accent-color);
}
.selected-date-appointments h4 {
color: var(--heading-color);
margin-bottom: 1rem;
font-size: 1.2rem;
}
/* Appointment Items */
.appointment-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.appointment-item {
background: var(--surface-color);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.appointment-time {
font-weight: 600;
color: var(--accent-color);
font-size: 1.1rem;
min-width: 140px;
}
.appointment-details {
flex-grow: 1;
}
.client-name {
font-weight: 500;
color: var(--heading-color);
margin-bottom: 0.25rem;
}
.appointment-status {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.appointment-status.booked {
background: color-mix(in srgb, #28a745, transparent 85%);
color: #28a745;
}
.appointment-status.completed {
background: color-mix(in srgb, var(--accent-color), transparent 85%);
color: var(--accent-color);
}
.appointment-status.canceled {
background: color-mix(in srgb, #dc3545, transparent 85%);
color: #dc3545;
}
.appointment-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
margin-inline-start: auto;
}
.appointment-actions > .primary-btn,
.appointment-actions > .secondary-btn,
.appointment-actions > .cancel-btn,
.appointment-actions > .details-btn,
.appointment-actions > .edit-note-btn {
flex: 0 1 auto;
min-width: 7.5rem;
min-height: 2.5rem;
padding: 0.55rem 1.1rem;
white-space: nowrap;
}
@media (max-width: 720px) {
.appointment-actions {
width: 100%;
margin-inline-start: 0;
justify-content: flex-start;
}
.appointment-actions > .primary-btn,
.appointment-actions > .secondary-btn,
.appointment-actions > .cancel-btn,
.appointment-actions > .details-btn,
.appointment-actions > .edit-note-btn {
flex: 1 1 8rem;
}
}
/* Buttons */
.primary-btn, .secondary-btn, .cancel-btn, .details-btn, .edit-note-btn {
padding: 0.6rem 1.2rem;
border-radius: 8px;
border: none;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
line-height: 1.2;
white-space: nowrap;
box-sizing: border-box;
}
.primary-btn {
background: var(--accent-color);
color: var(--contrast-color);
}
.primary-btn:hover {
background: color-mix(in srgb, var(--accent-color), #000 18%);
/* Keep the label on the contrast colour; without this the global a:hover
rule (more specific than the base .primary-btn color) repaints anchor
buttons in a translucent accent blue — illegible on the accent fill. */
color: var(--contrast-color);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.secondary-btn {
background: var(--heading-color);
color: var(--contrast-color);
}
.secondary-btn:hover {
background: color-mix(in srgb, var(--heading-color), #000 18%);
box-shadow: 0 2px 8px rgba(7, 25, 44, 0.20);
}
.cancel-btn {
background: #dc3545;
color: white;
}
.cancel-btn:hover {
background: #c82333;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.22);
}
.details-btn {
background: transparent;
color: var(--accent-color);
border: 1px solid var(--accent-color);
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.details-btn:hover {
background: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.edit-note-btn {
background: transparent;
color: var(--heading-color);
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.edit-note-btn:hover {
background: var(--heading-color);
color: var(--contrast-color);
box-shadow: 0 2px 8px rgba(7, 25, 44, 0.20);
}
/* Client Notes */
.client-notes ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.client-note-item {
background: color-mix(in srgb, var(--accent-color), transparent 97%);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
border-left: 4px solid var(--accent-color);
}
.note-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.client-name {
font-weight: 600;
color: var(--heading-color);
font-size: 1.1rem;
}
.note-date {
color: var(--default-color);
font-size: 0.9rem;
opacity: 0.8;
}
.note-content {
color: var(--default-color);
line-height: 1.6;
margin-bottom: 1rem;
}
.note-actions {
display: flex;
justify-content: flex-end;
}
/* Reviews */
.feedback-summary {
background: color-mix(in srgb, #ffc107, transparent 90%);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
text-align: center;
}
.overall-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.overall-rating .rating {
font-size: 2.5rem;
font-weight: 700;
color: var(--heading-color);
}
.stars {
color: #ffc107;
font-size: 1.5rem;
}
.rating-count {
color: var(--default-color);
font-size: 0.9rem;
opacity: 0.8;
}
.review-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-item {
background: color-mix(in srgb, var(--surface-color), transparent 50%);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.review-header .rating {
color: #ffc107;
}
.review-date {
color: var(--default-color);
font-size: 0.9rem;
opacity: 0.8;
}
.review-content {
color: var(--default-color);
line-height: 1.6;
font-style: italic;
}
/* Financial Summary */
.financial-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.financial-card {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #4a90e2 50%));
color: var(--contrast-color);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 16px rgba(25, 119, 204, 0.2);
}
.financial-card h3 {
color: var(--contrast-color);
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.financial-card p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin: 0;
font-weight: 500;
}
.chart-placeholder {
background: color-mix(in srgb, var(--accent-color), transparent 95%);
border-radius: 12px;
padding: 3rem;
text-align: center;
border: 2px dashed var(--accent-color);
}
.chart-placeholder p {
color: var(--accent-color);
font-weight: 500;
margin: 0;
}
/* Modal Styles */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--surface-color);
border-radius: 16px;
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
z-index: 1001;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
/* Bootstrap-modal shell polish — applies to every plain .modal-content dialog
(PermissionDeniedDialog, Users/Clients/Trainings/Publications/Achievements/
RecycleBin/DeleteRequests admins, …). Rounding + clipping the corners is what
stops a coloured header from leaving white slivers in the rounded edges. */
.modal-content {
border: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(7, 25, 44, 0.30);
}
.modal-header {
background: var(--brand-gradient);
color: var(--contrast-color);
padding: 1.1rem 1.4rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0;
}
.modal-header h4 {
color: var(--contrast-color);
margin: 0;
font-size: 1.3rem;
}
/* The dialog titles are rendered as , which the global
h1–h6 rule paints in the dark --heading-color — illegible on the dark gradient
header. Pin them to the contrast colour, matching .admin-modal-header and
.ts-modal which already do this for their own titles. */
.modal-header .modal-title {
color: var(--contrast-color);
}
/* The gradient header is dark, so the default (dark) Bootstrap close button
needs inverting to stay visible. */
.modal-header .btn-close {
filter: invert(1) brightness(2);
opacity: 0.9;
}
.close-btn {
background: none;
border: none;
color: var(--contrast-color);
font-size: 1.2rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.modal-body {
padding: 2rem;
}
/* Toast Notification */
.toast {
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: none;
}
.toast-header.bg-success {
background: #28a745 !important;
}
.toast-header.bg-danger {
background: #dc3545 !important;
}
/* Loading Spinner */
.loading-spinner {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.spinner-border.text-accent {
color: var(--accent-color) !important;
width: 3rem;
height: 3rem;
}
/* Admin edit/view modal polish — applied to every .admin-modal-card dialog */
.admin-modal-overlay {
display: block;
background: rgba(12, 28, 44, 0.52);
backdrop-filter: blur(4px);
}
/* The wide layout stays scoped to the two image-heavy editors */
#services-admin .admin-modal-dialog,
#therapists-admin .admin-modal-dialog {
width: min(95vw, 1120px);
max-width: 1120px;
}
.admin-modal-card {
border: 0;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(7, 25, 44, 0.30);
}
.admin-modal-header {
background: var(--brand-gradient);
color: var(--contrast-color);
border-bottom: 0;
padding: 1.1rem 1.4rem;
}
.admin-modal-header .modal-title {
color: var(--contrast-color);
font-weight: 600;
letter-spacing: 0.01em;
}
.admin-modal-header .btn-close {
filter: invert(1) brightness(2);
opacity: 0.95;
}
.admin-modal-body {
max-height: min(82vh, 900px);
overflow-y: auto;
padding: clamp(1.1rem, 2vw, 1.75rem);
background:
radial-gradient(circle at top right, rgba(25, 119, 204, 0.07), transparent 38%),
var(--surface-color);
}
#therapists-admin .admin-therapist-avatar {
width: clamp(108px, 14vw, 150px);
height: clamp(108px, 14vw, 150px);
object-fit: cover;
border: 4px solid rgba(25, 119, 204, 0.16);
box-shadow: 0 8px 24px rgba(44, 73, 100, 0.2);
}
@media (max-width: 768px) {
#services-admin .admin-modal-dialog,
#therapists-admin .admin-modal-dialog {
width: min(98vw, 98vw);
margin: 0.5rem auto;
}
.admin-modal-header {
padding: 0.85rem 1rem;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.profile-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.profile-header img {
width: 100px;
height: 100px;
}
.appointment-item {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.appointment-actions {
width: 100%;
justify-content: flex-end;
}
.financial-summary {
grid-template-columns: repeat(2, 1fr);
}
.overall-rating {
flex-direction: column;
gap: 0.5rem;
}
.client-dashboard .appointment-actions {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.therapist-dashboard {
padding: 1rem 0;
}
.section-card {
padding: 1.5rem;
}
.profile-header {
padding: 1.5rem;
}
.financial-summary {
grid-template-columns: 1fr;
}
.days button {
min-height: 50px;
font-size: 0.9rem;
}
}
/* ===== Client Dashboard — revamped layout ===== */
.client-dashboard .profile-header {
flex-wrap: wrap;
row-gap: 1rem;
}
.client-dashboard .profile-header .book-cta-btn {
align-self: center;
white-space: nowrap;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.45);
color: #fff;
padding: 0.75rem 1.4rem;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.client-dashboard .profile-header .book-cta-btn:hover,
.client-dashboard .profile-header .book-cta-btn:focus-visible {
background: rgba(255, 255, 255, 0.3);
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}
.client-dashboard .client-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.client-dashboard .info-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
border-radius: 12px;
padding: 1.1rem 1.25rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.client-dashboard .info-card h5 {
font-size: 0.85rem;
color: var(--default-color);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.4rem;
}
.client-dashboard .info-card .info-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-color);
}
.client-dashboard .section-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.client-dashboard .section-card-header h3 {
margin: 0;
}
.client-dashboard .profile-readout {
display: grid;
grid-template-columns: minmax(120px, max-content) 1fr;
gap: 0.5rem 1.25rem;
margin: 0;
}
.client-dashboard .profile-readout dt {
color: var(--default-color);
font-weight: 500;
}
.client-dashboard .profile-readout dd {
margin: 0;
color: var(--heading-color);
font-weight: 600;
word-break: break-word;
}
.client-dashboard .profile-edit-form .form-label {
font-weight: 500;
color: var(--heading-color);
}
.client-dashboard .profile-edit-form .form-control:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 75%);
}
.client-dashboard .pending-consent-card {
border-left: 4px solid #ffb703;
background: linear-gradient(180deg, #fff8e1, var(--surface-color) 60%);
}
[dir="rtl"] .client-dashboard .pending-consent-card {
border-left: none;
border-right: 4px solid #ffb703;
}
.client-dashboard .pending-consent-card h3 {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.client-dashboard .empty-state {
color: var(--default-color);
font-style: italic;
padding: 1rem 0;
margin: 0;
}
.client-dashboard .filter-btn:focus-visible,
.client-dashboard .days button:focus-visible,
.client-dashboard .primary-btn:focus-visible,
.client-dashboard .secondary-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.client-dashboard .btn-sm {
padding: 0.35rem 0.85rem;
font-size: 0.85rem;
}
.client-dashboard .dashboard-grid > [class*="col-"] {
display: flex;
}
.client-dashboard .dashboard-grid > [class*="col-"] > .section-card {
flex: 1 1 auto;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
.client-dashboard .dashboard-grid .calendar-container {
height: auto;
}
.client-dashboard .recent-sessions {
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
}
.client-dashboard .session-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 1.1rem;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
border-radius: 12px;
background: color-mix(in srgb, var(--accent-color), transparent 96%);
}
.client-dashboard .session-item .session-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.client-dashboard .session-item .session-date {
color: var(--heading-color);
font-weight: 600;
}
.client-dashboard .session-item .session-therapist {
color: var(--default-color);
}
.client-dashboard .session-item .session-time {
color: var(--default-color);
font-size: 0.9rem;
}
.client-dashboard .session-item .rating-display {
color: #f5b301;
white-space: nowrap;
}
.client-dashboard .profile-edit-preview {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
flex-shrink: 0;
}
@media (min-width: 992px) {
.client-dashboard .profile-readout {
grid-template-columns: minmax(160px, max-content) 1fr;
}
.client-dashboard .dashboard-grid .col-lg-6 .section-card {
min-height: 420px;
}
}
@media (max-width: 767px) {
.client-dashboard .profile-header {
flex-direction: column;
text-align: center;
align-items: center;
}
.client-dashboard .profile-header .book-cta-btn {
width: 100%;
}
.client-dashboard .section-card-header {
flex-direction: column;
align-items: flex-start;
}
.client-dashboard .profile-readout {
grid-template-columns: 1fr;
gap: 0.15rem 0;
}
.client-dashboard .profile-readout dt {
margin-top: 0.6rem;
}
.client-dashboard .session-item {
flex-direction: column;
align-items: flex-start;
}
}
/* Therapist dashboard additions */
.therapist-dashboard.client-dashboard .profile-tag-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.therapist-dashboard.client-dashboard .profile-tag-list li {
background: color-mix(in srgb, var(--accent-color), transparent 90%);
color: var(--heading-color);
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.85rem;
}
.therapist-dashboard.client-dashboard .info-rating-stars {
color: #f5b301;
font-size: 0.95rem;
}
.therapist-dashboard.client-dashboard .rating-large {
font-size: 2rem;
font-weight: 700;
color: var(--heading-color);
line-height: 1;
}
.therapist-dashboard.client-dashboard .review-item {
align-items: flex-start;
}
.therapist-dashboard.client-dashboard .review-comment {
color: var(--default-color);
font-style: italic;
font-size: 0.92rem;
}
.therapist-dashboard.client-dashboard .session-item .rating-display {
color: #f5b301;
}
/* Therapist dashboard: respect Bootstrap col-lg-* widths on laptop/desktop.
The base .dashboard-grid uses CSS Grid auto-fit which ignores the
col-lg-6 / col-lg-7 / col-lg-5 / col-12 classes in the markup, so on
wide screens all cards rendered as equal columns and full-width sections
(Calendar, Booking) didn't span. Switch to Bootstrap row/flex on >=992px. */
@media (min-width: 992px) {
.therapist-dashboard.client-dashboard .dashboard-grid {
display: flex;
flex-wrap: wrap;
grid-template-columns: none;
gap: 0;
}
.therapist-dashboard.client-dashboard .dashboard-grid > [class*="col-"] {
margin-bottom: 0;
}
.therapist-dashboard.client-dashboard .dashboard-grid .col-lg-7 .section-card,
.therapist-dashboard.client-dashboard .dashboard-grid .col-lg-5 .section-card {
min-height: 420px;
}
}
.admin-card {
border: none;
border-radius: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background: var(--surface-color);
box-shadow: 0 2px 10px rgba(7, 25, 44, 0.06);
}
.admin-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(7, 25, 44, 0.14) !important;
}
.admin-card .card-title {
color: var(--heading-color);
font-weight: 600;
}
.admin-card .card-footer {
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
padding: 0.75rem 1rem;
}
/* =================================================================
About Page
================================================================= */
.about-video-wrapper {
width: 100%;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(7, 25, 44, 0.1);
}
.about-video-wrapper iframe {
border: 0;
}
.about-vision-mission .about-card,
.about-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
border-radius: 16px;
padding: 2rem;
height: 100%;
box-shadow: 0 4px 16px rgba(7, 25, 44, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-align: center;
}
.about-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(7, 25, 44, 0.12);
}
.about-card .about-card-icon {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent-color), transparent 80%),
color-mix(in srgb, var(--accent-color), transparent 92%));
color: var(--accent-color);
border-radius: 50%;
font-size: 1.85rem;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.about-card:hover .about-card-icon {
background: var(--accent-color);
color: var(--contrast-color);
transform: scale(1.05);
}
.about-card h3 {
color: var(--heading-color);
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.85rem;
}
.about-card p {
color: var(--default-color);
line-height: 1.7;
margin-bottom: 0;
}
/* Values cards (shared with team role cards) */
.about-values .about-value-card,
.about-team .about-value-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
border-radius: 14px;
padding: 1.75rem 1rem;
text-align: center;
height: 100%;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-values .about-value-card:hover,
.about-team .about-value-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
box-shadow: 0 14px 28px rgba(25, 119, 204, 0.14);
}
.about-values .about-value-card .icon,
.about-team .about-value-card .icon {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-color), transparent 88%);
color: var(--accent-color);
border-radius: 50%;
font-size: 1.6rem;
transition: background 0.3s ease, color 0.3s ease;
}
.about-values .about-value-card:hover .icon,
.about-team .about-value-card:hover .icon {
background: var(--accent-color);
color: var(--contrast-color);
}
.about-values .about-value-card h4,
.about-team .about-value-card h4 {
color: var(--heading-color);
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0;
}
/* Team impact stats */
.about-team .about-impact-strip {
margin-top: 1rem;
}
.about-team .impact-stat {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
border-radius: 16px;
padding: 2rem 1.5rem;
height: 100%;
text-align: center;
box-shadow: 0 4px 16px rgba(7, 25, 44, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-team .impact-stat:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(7, 25, 44, 0.12);
}
.about-team .impact-stat .icon {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent-color), transparent 80%),
color-mix(in srgb, var(--accent-color), transparent 92%));
color: var(--accent-color);
border-radius: 50%;
font-size: 1.85rem;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.about-team .impact-stat:hover .icon {
background: var(--accent-color);
color: var(--contrast-color);
transform: scale(1.05);
}
.about-team .impact-stat h2 {
color: var(--accent-color);
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.about-team .impact-stat p {
color: var(--default-color);
font-size: 1rem;
margin: 0;
line-height: 1.6;
}
/* Goals list */
.about-goals .about-goal-item {
background: var(--surface-color);
border-radius: 12px;
padding: 1.25rem 1.5rem;
height: 100%;
display: flex;
align-items: flex-start;
gap: 1rem;
border-left: 4px solid var(--accent-color);
box-shadow: 0 2px 10px rgba(7, 25, 44, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[dir="rtl"] .about-goals .about-goal-item {
border-left: none;
border-right: 4px solid var(--accent-color);
}
.about-goals .about-goal-item:hover {
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(7, 25, 44, 0.1);
}
[dir="rtl"] .about-goals .about-goal-item:hover {
transform: translateX(-4px);
}
.about-goals .about-goal-item i {
color: var(--accent-color);
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.15rem;
}
.about-goals .about-goal-item p {
margin: 0;
color: var(--default-color);
line-height: 1.65;
}
/* About introduction list */
.about .content > ul {
list-style: none;
padding: 0;
margin-top: 1.5rem;
}
.about .content > ul > li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
.about .content > ul > li:last-child {
border-bottom: 0;
}
.about .content > ul > li > i {
color: var(--accent-color);
font-size: 1.6rem;
flex-shrink: 0;
margin-top: 0.25rem;
}
.about .content > ul > li h5 {
color: var(--heading-color);
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.about .content > ul > li p {
color: var(--default-color);
margin: 0;
line-height: 1.65;
}
@media (max-width: 575px) {
.about-vision-mission .about-card,
.about-card {
padding: 1.5rem;
}
.about-goals .about-goal-item {
padding: 1rem 1.15rem;
}
}
/* =================================================================
Admin Pages — shared polish
================================================================= */
#services-admin h2,
#therapists-admin h2,
section[dir] h2.m-0 {
color: var(--heading-color);
font-weight: 700;
font-size: 1.5rem;
}
/* Toolbar (header row above the list) */
#services-admin .row.mb-4 .input-group,
#therapists-admin .row.mb-4 .input-group,
section .row.mb-3 .input-group {
box-shadow: 0 2px 8px rgba(7, 25, 44, 0.05);
border-radius: 8px;
overflow: hidden;
}
.input-group .input-group-text {
background: var(--surface-color);
border-right: 0;
color: var(--default-color);
}
[dir="rtl"] .input-group .input-group-text {
border-right: 1px solid #ced4da;
border-left: 0;
}
.input-group .form-control:focus {
border-color: var(--accent-color);
box-shadow: none;
}
/* Tables */
.table.table-bordered,
.table.table-hover {
background: var(--surface-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(7, 25, 44, 0.05);
margin-bottom: 0;
}
.table-responsive {
border-radius: 12px;
/* Was `overflow: hidden`, which clipped wide tables on small screens and
killed Bootstrap's horizontal scroll. `overflow-x: auto` lets the table
scroll inside its rounded container instead of overflowing the page. */
overflow-x: auto;
box-shadow: 0 2px 10px rgba(7, 25, 44, 0.05);
background: var(--surface-color);
-webkit-overflow-scrolling: touch;
}
.table thead.table-primary {
--bs-table-bg: var(--heading-color);
--bs-table-color: var(--contrast-color);
background: var(--brand-gradient) !important;
color: var(--contrast-color) !important;
}
.table thead.table-primary th {
color: var(--contrast-color);
font-weight: 600;
border-bottom: 0;
padding: 0.85rem 1rem;
letter-spacing: 0.02em;
background: transparent !important;
}
.table tbody td {
padding: 0.85rem 1rem;
vertical-align: middle;
color: var(--default-color);
}
.table tbody tr {
transition: background-color 0.15s ease;
}
.table-hover tbody tr:hover {
background: color-mix(in srgb, var(--accent-color), transparent 95%);
}
/* Action buttons in tables — stay square-ish for icon-only buttons, but are
allowed to grow for buttons that carry a text label, so the label no longer
overflows the old fixed 34x34 box. */
.table .btn-sm,
.admin-card .btn-sm {
min-width: 34px;
min-height: 34px;
padding: 0.4rem 0.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border-radius: 8px;
line-height: 1.2;
white-space: nowrap;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.table .btn-sm:hover,
.admin-card .btn-sm:hover {
box-shadow: 0 2px 8px rgba(7, 25, 44, 0.14);
}
/* Pagination */
.pagination .page-link {
color: var(--accent-color);
border-color: color-mix(in srgb, var(--default-color), transparent 85%);
cursor: pointer;
padding: 0.45rem 0.85rem;
}
.pagination .page-link:hover {
background: color-mix(in srgb, var(--accent-color), transparent 90%);
color: var(--accent-color);
}
.pagination .page-item.active .page-link {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.pagination .page-item.disabled .page-link {
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
/* Empty state alerts */
section .alert-info {
background: color-mix(in srgb, var(--accent-color), transparent 92%);
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
color: var(--heading-color);
border-radius: 10px;
padding: 1rem 1.25rem;
}
/* Badges */
.badge.bg-secondary {
background: color-mix(in srgb, var(--heading-color), transparent 30%) !important;
font-weight: 500;
padding: 0.4em 0.7em;
}
.badge.bg-primary {
background: var(--accent-color) !important;
font-weight: 500;
padding: 0.4em 0.7em;
}
/* Modal form polish */
.admin-modal-body h6.text-muted {
color: var(--heading-color) !important;
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 75%) !important;
padding-bottom: 0.5rem !important;
margin-top: 0.5rem;
}
.admin-modal-body .form-label {
color: var(--heading-color);
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.35rem;
}
.admin-modal-body .form-control,
.admin-modal-body .form-select {
border-radius: 8px;
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-modal-body .form-control:focus,
.admin-modal-body .form-select:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}
.admin-modal-body .form-text {
color: color-mix(in srgb, var(--default-color), transparent 30%);
font-size: 0.8rem;
}
.admin-modal-body .validation-summary,
.admin-modal-body .validation-message {
color: #d62828;
font-size: 0.85rem;
}
.modal-footer {
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
padding: 0.85rem 1.25rem;
}
/* btn-group view toggle */
.btn-group .btn-outline-primary {
color: var(--accent-color);
border-color: var(--accent-color);
}
.btn-group .btn-outline-primary:hover,
.btn-group .btn-primary {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.btn-group .btn-outline-primary:hover {
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.btn-primary,
.btn-outline-primary,
.appointment .btn-primary,
.appointment .btn-outline-primary,
.btn-group .btn-outline-primary {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-primary {
background: var(--accent-color);
border-color: var(--accent-color);
}
.btn-primary:hover,
.btn-primary:focus {
background: color-mix(in srgb, var(--accent-color), #000 18%);
border-color: color-mix(in srgb, var(--accent-color), #000 18%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/* Tactile press cue — buttons gently sink on click instead of lifting on hover */
.primary-btn:active,
.secondary-btn:active,
.cancel-btn:active,
.details-btn:active,
.edit-note-btn:active,
.btn-primary:active,
.btn-outline-primary:active,
.btn-group .btn-outline-primary:active,
.table .btn-sm:active,
.admin-card .btn-sm:active,
.site-header .nav-cta-btn:active,
.ghost-btn:active {
transform: translateY(1px);
box-shadow: 0 1px 3px rgba(7, 25, 44, 0.18);
}
/* =================================================================
TimeSlotAdmin — Scheduler / Calendar Grid
================================================================= */
.scheduler-container {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
border-radius: 14px;
padding: 1.25rem;
box-shadow: 0 4px 18px rgba(7, 25, 44, 0.06);
}
.scheduler-container .calendar-view {
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.calendar-grid-wrapper {
overflow-x: auto;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
background: var(--surface-color);
}
.calendar-grid {
display: grid;
grid-template-columns: 70px repeat(7, minmax(110px, 1fr));
min-width: 820px;
position: relative;
}
.time-column {
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
background: color-mix(in srgb, var(--heading-color), transparent 96%);
}
[dir="rtl"] .time-column {
border-right: 0;
border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.time-header {
height: 64px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
background: var(--heading-color);
}
.time-cell-label {
height: 60px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 0.25rem;
font-size: 0.75rem;
color: color-mix(in srgb, var(--default-color), transparent 20%);
border-bottom: 1px dashed color-mix(in srgb, var(--default-color), transparent 92%);
font-weight: 500;
}
.day-column {
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
position: relative;
}
.day-column:last-child {
border-right: 0;
}
[dir="rtl"] .day-column {
border-right: 0;
border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
[dir="rtl"] .day-column:last-child {
border-left: 0;
}
.day-header {
height: 64px;
background: var(--brand-gradient);
color: var(--contrast-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.4rem;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
position: relative;
}
.day-header.today {
background: linear-gradient(115deg, var(--accent-color),
color-mix(in srgb, var(--accent-color), #000 12%));
box-shadow: inset 0 -3px 0 #ffd166;
}
.day-header .day-name {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
}
.day-header .day-number {
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
}
.day-header .day-count {
position: absolute;
top: 6px;
right: 8px;
background: rgba(255, 255, 255, 0.22);
color: var(--contrast-color);
font-size: 0.7rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.35);
}
[dir="rtl"] .day-header .day-count {
right: auto;
left: 8px;
}
.day-grid {
position: relative;
height: calc(60px * var(--scheduler-hour-count, 14));
}
.hour-cell {
height: 60px;
border-bottom: 1px dashed color-mix(in srgb, var(--default-color), transparent 92%);
cursor: pointer;
transition: background-color 0.15s ease;
}
.hour-cell:hover {
background: color-mix(in srgb, var(--accent-color), transparent 94%);
}
.time-slot {
position: absolute;
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
border-left: 4px solid var(--accent-color);
border-radius: 8px;
padding: 0.4rem 0.55rem;
box-shadow: 0 2px 6px rgba(7, 25, 44, 0.08);
cursor: pointer;
overflow: hidden;
z-index: 2;
transition: transform 0.15s ease, box-shadow 0.15s ease;
display: flex;
align-items: stretch;
gap: 0.45rem;
}
[dir="rtl"] .time-slot {
border-left: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
border-right: 4px solid var(--accent-color);
}
.time-slot:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(7, 25, 44, 0.18);
z-index: 3;
}
.time-slot.compact {
padding: 0.25rem 0.4rem;
font-size: 0.75rem;
}
.time-slot .slot-accent {
width: 3px;
border-radius: 3px;
flex-shrink: 0;
background: var(--accent-color);
}
.time-slot .slot-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.time-slot .slot-time {
font-size: 0.78rem;
font-weight: 600;
color: var(--heading-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time-slot .slot-time .ampm {
font-size: 0.65rem;
text-transform: lowercase;
margin-left: 1px;
opacity: 0.7;
}
.time-slot .slot-time .dash {
margin: 0 0.25rem;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.time-slot .slot-therapist {
font-size: 0.75rem;
color: var(--default-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time-slot .slot-badges {
position: absolute;
top: 4px;
right: 6px;
display: flex;
gap: 0.25rem;
}
[dir="rtl"] .time-slot .slot-badges {
right: auto;
left: 6px;
}
.time-slot .slot-badge {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
}
.time-slot .booked-badge {
background: #2a9d8f;
color: #fff;
}
.time-slot .inactive-badge {
background: #adb5bd;
color: #fff;
}
.time-slot.status-inactive,
.time-slot.inactive {
opacity: 0.55;
background: color-mix(in srgb, var(--default-color), transparent 92%);
}
/* Calendar legend */
.calendar-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding: 0.85rem 1rem;
background: color-mix(in srgb, var(--accent-color), transparent 95%);
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
font-size: 0.85rem;
}
.calendar-legend .legend-label {
font-weight: 600;
color: var(--heading-color);
}
.calendar-legend .legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--default-color);
}
.calendar-legend .legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 3px rgba(0, 0, 0, 0.08);
}
/* Bulk-mode day-of-week chips */
.dow-picker {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.dow-chip {
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--accent-color), transparent 65%);
background: var(--surface-color);
color: var(--heading-color);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.dow-chip:hover {
background: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.dow-chip.active {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 3px 8px rgba(25, 119, 204, 0.3);
}
/* TimeSlot modal tabs */
.ts-mode-tabs .nav-link {
color: var(--default-color);
border-radius: 8px;
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
margin-right: 0.4rem;
}
[dir="rtl"] .ts-mode-tabs .nav-link {
margin-right: 0;
margin-left: 0.4rem;
}
.ts-mode-tabs .nav-link.active {
background: var(--accent-color);
color: var(--contrast-color);
border-color: var(--accent-color);
}
.ts-modal .modal-header {
background: var(--brand-gradient);
color: var(--contrast-color);
border-bottom: 0;
}
.ts-modal .modal-header .modal-title {
color: var(--contrast-color);
font-weight: 600;
}
.ts-modal .modal-header .btn-close {
filter: invert(1) brightness(2);
opacity: 0.95;
}
.ts-modal .modal-content {
border: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 22px 60px rgba(7, 25, 44, 0.28);
}
.ts-modal {
background: rgba(12, 28, 44, 0.52);
backdrop-filter: blur(4px);
}
.ts-time-input {
font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
.scheduler-container {
padding: 0.75rem;
}
.calendar-grid {
grid-template-columns: 60px repeat(7, minmax(95px, 1fr));
}
.day-header .day-number {
font-size: 1.1rem;
}
}
/* ─────────────────────────────────────────────────────────────────
Commerce modules: shop / cart / checkout / admin
───────────────────────────────────────────────────────────────── */
/* Shop toolbar + filter chips */
.shop-toolbar {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(44, 73, 100, 0.04);
}
.filter-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-chip {
border: 1px solid #d6dfe8;
background: #fff;
color: var(--heading-color);
padding: 6px 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all .2s ease;
}
.filter-chip:hover { border-color: var(--accent-color); color: var(--accent-color); }
.filter-chip.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.shop-search {
max-width: 280px;
border-radius: 999px;
border: 1px solid #d6dfe8;
padding: 8px 16px;
}
/* Product cards */
.product-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eef2f6;
box-shadow: 0 2px 8px rgba(44, 73, 100, 0.05);
height: 100%;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(44, 73, 100, 0.10); }
.product-image {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f4f7fa;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.04); }
.product-placeholder {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #c0ccda;
font-size: 56px;
}
.product-placeholder.lg { font-size: 96px; min-height: 360px; }
.product-badge {
position: absolute;
top: 12px;
inset-inline-start: 12px;
background: var(--accent-color);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.product-badge.digital { background: linear-gradient(135deg, var(--accent-color), #11b3a3); }
.product-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.product-body h4 { font-size: 17px; margin-bottom: 8px; }
.product-body h4 a { color: var(--heading-color); text-decoration: none; }
.product-body h4 a:hover { color: var(--accent-color); }
.product-desc {
color: #64748b;
font-size: 14px;
flex: 1;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.price { color: var(--accent-color); font-weight: 700; font-size: 18px; }
.price small { color: #94a3b8; font-weight: 500; font-size: 12px; margin-inline-start: 2px; }
/* Product detail */
.product-detail-image {
position: relative;
background: #f4f7fa;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.product-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-body h2 { color: var(--heading-color); }
.product-detail-body .muted { color: #64748b; }
.product-price-block {
display: flex;
align-items: center;
gap: 16px;
margin: 18px 0;
padding: 14px 18px;
background: #f8fafc;
border-radius: 8px;
}
.price-large { font-size: 28px; font-weight: 700; color: var(--accent-color); }
.price-large small { font-size: 14px; color: #94a3b8; font-weight: 500; }
.stock-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.stock-pill.in-stock { background: #d1f4e0; color: #0a7c3a; }
.stock-pill.out-of-stock { background: #fde2e2; color: #c0392b; }
/* Quantity stepper */
.qty-row { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.qty-stepper {
display: inline-flex;
align-items: center;
border: 1px solid #d6dfe8;
border-radius: 6px;
overflow: hidden;
}
.qty-stepper button {
background: #f4f7fa;
border: none;
width: 36px;
height: 36px;
font-size: 18px;
color: var(--heading-color);
cursor: pointer;
}
.qty-stepper button:hover { background: #e3edf6; }
.qty-stepper input {
width: 56px;
text-align: center;
border: none;
border-inline: 1px solid #d6dfe8;
height: 36px;
font-weight: 600;
}
.qty-stepper.sm button { width: 28px; height: 28px; font-size: 14px; }
.qty-stepper.sm span { padding: 0 14px; font-weight: 600; min-width: 40px; text-align: center; }
/* Cart table */
.cart-table {
width: 100%;
border-collapse: collapse;
}
.cart-table th, .cart-table td {
padding: 14px 12px;
border-bottom: 1px solid #eef2f6;
text-align: start;
}
.cart-table thead th {
background: #f8fafc;
color: var(--heading-color);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cart-product-cell {
display: flex;
align-items: center;
gap: 12px;
}
.cart-product-cell img {
width: 56px;
height: 56px;
border-radius: 6px;
object-fit: cover;
background: #f4f7fa;
}
.btn-icon-danger {
background: transparent;
border: 1px solid #f3c0c0;
color: #c0392b;
width: 34px;
height: 34px;
border-radius: 6px;
cursor: pointer;
transition: all .2s ease;
}
.btn-icon-danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
/* Cart summary */
.cart-summary { position: sticky; top: 90px; }
.cart-summary h4 { color: var(--heading-color); margin-bottom: 14px; }
.summary-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: #475569;
}
.summary-row.muted { color: #94a3b8; }
.summary-row.total {
font-size: 18px;
font-weight: 700;
color: var(--accent-color);
padding-top: 12px;
}
.summary-line {
display: flex;
justify-content: space-between;
padding: 6px 0;
color: #475569;
font-size: 14px;
}
/* Payment options */
.payment-options { display: grid; gap: 10px; margin-top: 8px; }
.payment-option {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 2px solid #e6ebf2;
border-radius: 8px;
cursor: pointer;
transition: all .2s ease;
}
.payment-option:hover { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 95%); }
.payment-option.active { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 92%); }
.payment-option.disabled { opacity: 0.55; cursor: not-allowed; }
.payment-option input[type="radio"] { width: 18px; height: 18px; }
.payment-option i { font-size: 22px; color: var(--accent-color); }
.payment-option div { display: flex; flex-direction: column; }
.payment-option strong { color: var(--heading-color); }
.payment-option small { color: #64748b; }
/* Order confirmation */
.confirmation-hero {
text-align: center;
padding: 40px 24px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%), var(--surface-color));
border-radius: 12px;
border: 1px solid #e6ebf2;
margin-bottom: 28px;
}
.confirmation-icon {
width: 88px;
height: 88px;
border-radius: 50%;
margin: 0 auto 20px;
background: #d1f4e0;
color: #0a7c3a;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
box-shadow: 0 6px 16px rgba(10, 124, 58, 0.15);
}
.confirmation-hero h2 { color: var(--heading-color); margin-bottom: 8px; }
.confirmation-hero .lead { color: #475569; font-size: 17px; }
/* Status pills */
.status-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-pill.status-pending { background: #fef3c7; color: #92400e; }
.status-pill.status-paid { background: #dbeafe; color: #1e40af; }
.status-pill.status-processing { background: #e0e7ff; color: #3730a3; }
.status-pill.status-shipped { background: #ccfbf1; color: #0f766e; }
.status-pill.status-completed { background: #d1f4e0; color: #0a7c3a; }
.status-pill.status-cancelled { background: #fde2e2; color: #c0392b; }
/* Admin tables / toolbar / modals */
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.admin-toolbar h4 { color: var(--heading-color); margin: 0; }
.admin-table {
width: 100%;
border-collapse: collapse;
background: #fff;
}
.admin-table th, .admin-table td {
padding: 12px 14px;
border-bottom: 1px solid #eef2f6;
text-align: start;
vertical-align: middle;
}
.admin-table thead th {
background: var(--heading-color);
color: #fff;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table .expanded-row { background: #f8fafc; }
/* Bare data tables (those NOT already wrapped in a .table-responsive scroller)
become their own horizontal scroll container on phones, so wide columns
scroll inside the card instead of overflowing — and being clipped by — the
page. `display:block` on a
keeps the internal table layout while
letting the element scroll (the technique GitHub uses for markdown tables).
The `:not(.table-responsive) >` guard skips tables that already have a
scroll wrapper, so they aren't double-wrapped. */
@media (max-width: 767px) {
:not(.table-responsive) > .admin-table,
:not(.table-responsive) > table.table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.admin-modal-backdrop {
position: fixed; inset: 0;
background: rgba(12, 28, 44, 0.55);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1080;
padding: 16px;
}
.admin-modal {
background: var(--surface-color);
border-radius: 16px;
padding: 22px;
max-width: 720px;
width: 100%;
max-height: 90vh;
overflow-y: auto; /* scroll container also clips the bled header to the rounded edges */
box-shadow: 0 24px 70px rgba(7, 25, 44, 0.30);
}
.admin-modal.admin-modal-wide {
max-width: 960px;
}
.admin-modal .modal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin: -22px -22px 18px; /* bleed the header bar out to the rounded edges */
padding: 1.05rem 1.4rem;
background: var(--brand-gradient);
border-bottom: 0;
}
.admin-modal .modal-head h4 { margin: 0; color: var(--contrast-color); }
.admin-modal .modal-head .btn-close-icon { color: rgba(255, 255, 255, 0.92); }
.admin-modal .modal-head .btn-close-icon:hover { color: #fff; }
.admin-modal .modal-foot {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eef2f6;
}
.btn-close-icon {
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: #64748b;
cursor: pointer;
}
.btn-close-icon:hover { color: #c0392b; }
/* Cart icon in nav */
.nav-cart-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cart-badge {
position: absolute;
top: -2px;
inset-inline-end: -8px;
background: #c0392b;
color: #fff;
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Clients admin — upcoming appointments action buttons */
.admin-appointment-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.admin-appointment-actions .btn {
flex: 0 0 auto;
min-width: 7.5rem;
min-height: 2.25rem;
padding: 0.4rem 0.9rem;
font-size: 0.875rem;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
white-space: nowrap;
}
@media (max-width: 575px) {
.admin-appointment-actions {
display: flex;
width: 100%;
}
.admin-appointment-actions .btn {
flex: 1 1 auto;
}
}
/* Shop revamp: filter sidebar + carousel */
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
.shop-filters {
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 12px;
padding: 18px;
box-shadow: 0 2px 8px rgba(44, 73, 100, 0.04);
position: sticky;
top: 90px;
}
.shop-filters-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #eef2f6;
}
.shop-filters-header h5 { margin: 0; color: var(--heading-color); font-size: 16px; }
.shop-filters-header h5 i { color: var(--accent-color); margin-inline-end: 6px; }
.btn-link-clear {
background: none;
border: none;
color: var(--accent-color);
font-size: 13px;
cursor: pointer;
padding: 0;
}
.btn-link-clear:hover { text-decoration: underline; }
.filter-block { margin-bottom: 18px; }
.filter-block:last-child { margin-bottom: 0; }
.filter-label {
display: block;
font-size: 12px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.filter-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.price-range-inputs {
display: flex;
align-items: center;
gap: 8px;
}
.price-range-inputs .form-control { font-size: 14px; }
.price-range-sep { color: #94a3b8; }
.filter-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: var(--heading-color);
margin: 0;
}
.filter-toggle input { width: 16px; height: 16px; accent-color: var(--accent-color); }
.shop-results-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 8px;
margin-bottom: 18px;
}
.shop-results-toolbar .results-count { color: #475569; font-size: 14px; }
.sort-select { display: flex; align-items: center; gap: 8px; }
.sort-select label { margin: 0; font-size: 13px; color: #475569; font-weight: 500; }
.sort-select .form-select { min-width: 200px; }
.product-image-link { display: block; width: 100%; height: 100%; }
/* Carousel arrows + dots on product card and detail */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: var(--heading-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(44,73,100,0.18);
opacity: 0;
transition: opacity .2s ease, background .2s ease;
z-index: 2;
}
.carousel-arrow.prev { inset-inline-start: 10px; }
.carousel-arrow.next { inset-inline-end: 10px; }
.product-card:hover .carousel-arrow,
.product-carousel:hover .carousel-arrow,
.carousel-arrow:focus { opacity: 1; }
.carousel-arrow:hover { background: var(--accent-color); color: #fff; }
[dir="rtl"] .carousel-arrow .fa-chevron-left,
[dir="rtl"] .carousel-arrow .fa-chevron-right { transform: scaleX(-1); }
.carousel-dots {
position: absolute;
bottom: 8px;
inset-inline: 0;
display: flex;
justify-content: center;
gap: 5px;
z-index: 2;
}
.carousel-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.7);
box-shadow: 0 0 0 1px rgba(44,73,100,0.2);
transition: transform .2s ease, background .2s ease;
}
.carousel-dot.active { background: var(--accent-color); transform: scale(1.4); }
.carousel-counter {
position: absolute;
bottom: 12px;
inset-inline-end: 12px;
padding: 4px 10px;
background: rgba(44,73,100,0.75);
color: #fff;
border-radius: 999px;
font-size: 12px;
z-index: 2;
}
.carousel-caption-text { margin-top: 10px; font-size: 14px; }
.carousel-thumbs {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.carousel-thumb {
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
padding: 0;
background: #f4f7fa;
cursor: pointer;
transition: border-color .2s ease, transform .2s ease;
}
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.carousel-thumb:hover { transform: translateY(-2px); }
.carousel-thumb.active { border-color: var(--accent-color); }
/* The mobile filter-drawer trigger + dismiss button are hidden on desktop. */
.shop-filter-toggle,
.shop-filter-apply { display: none; }
/* Responsive */
@media (max-width: 991px) {
.shop-layout { grid-template-columns: 1fr; }
.shop-filters { position: static; }
}
@media (max-width: 767px) {
/* --- Collapsible filter drawer (hidden by default, toggled on demand) --- */
.shop-filter-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 16px;
color: var(--heading-color);
font-weight: 600;
font-size: 15px;
cursor: pointer;
}
.shop-filter-toggle i:first-child { color: var(--accent-color); }
.shop-filter-count {
background: var(--accent-color);
color: #fff;
border-radius: 999px;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
padding: 0 6px;
}
.shop-filter-caret {
margin-inline-start: auto;
font-size: 12px;
transition: transform 0.25s ease;
}
.shop-filter-caret.open { transform: rotate(180deg); }
.shop-filters {
display: none;
position: static;
margin-bottom: 16px;
}
.shop-filters.open { display: block; }
.shop-filter-apply {
display: block;
width: 100%;
margin-top: 16px;
text-align: center;
}
/* --- 2-column product grid + compact cards --- */
.shop-results .row > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
}
.shop-results .product-body { padding: 10px; }
.shop-results .product-body h4 { font-size: 14px; margin-bottom: 4px; }
.shop-results .product-desc { font-size: 12px; margin-bottom: 8px; }
.shop-results .price { font-size: 15px; }
.shop-results .product-footer {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.shop-results .product-footer .btn { width: 100%; }
.shop-toolbar { flex-direction: column; align-items: stretch; }
.shop-search { max-width: 100%; }
.cart-table thead { display: none; }
.cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
.cart-table tr { margin-bottom: 12px; border: 1px solid #eef2f6; border-radius: 8px; padding: 8px; }
.cart-table td { border: none; padding: 6px 8px; }
.cart-summary { position: static; }
.admin-table { font-size: 13px; }
}
/* Admin summary cards (services / home admin) */
.admin-stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: #ffffff;
border: 1px solid #e8eef5;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04);
height: 100%;
}
.admin-stat-card .admin-stat-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-background, #f1f7fc);
color: var(--accent-color, #1977cc);
font-size: 1.4rem;
flex-shrink: 0;
}
.admin-stat-card .admin-stat-label {
color: #6c7a8a;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-stat-card .admin-stat-value {
font-size: 1.6rem;
font-weight: 600;
color: var(--heading-color, #2c4964);
line-height: 1.1;
}
.admin-stat-card--accent { border-color: color-mix(in srgb, var(--accent-color), transparent 75%); background: linear-gradient(135deg, var(--surface-color) 0%, var(--light-background) 100%); }
.admin-stat-card--muted .admin-stat-icon { background: #f3f5f8; color: #6c7a8a; }
/* Services admin card emphasis when shown on home */
.service-admin-card { transition: box-shadow .2s ease, transform .2s ease; }
.service-admin-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08); }
.service-admin-card--on-home { border-top: 3px solid var(--accent-color, #1977cc); }
/* Home page admin: section cards */
.home-section-card { transition: box-shadow .2s ease, transform .2s ease; }
.home-section-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08); }
.home-section-card--visible { border-top: 3px solid var(--accent-color, #1977cc); }
.home-section-card--hidden { opacity: 0.82; }
.home-section-card .home-section-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--light-background, #f1f7fc);
color: var(--accent-color, #1977cc);
font-size: 1.6rem;
}
/* =====================================================
Dashboard Shell (sidebar + persistent header + body)
Used by client & therapist dashboards.
===================================================== */
.dashboard-shell {
padding-block: clamp(1rem, 2.5vw, 2rem);
}
.dashboard-shell .dashboard-shell-header {
position: sticky;
top: 0;
z-index: 5;
background: var(--background-color, #fff);
padding-block-end: 0.5rem;
}
.dashboard-shell .dashboard-shell-body {
display: grid;
grid-template-columns: minmax(220px, 260px) 1fr;
gap: clamp(1rem, 2vw, 1.75rem);
align-items: start;
margin-top: 1rem;
}
.dashboard-shell .dashboard-sidebar {
position: sticky;
top: 220px;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.75rem;
background: var(--surface-color, #fff);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.dashboard-shell .dashboard-nav-item {
appearance: none;
background: transparent;
border: none;
color: var(--default-color, #444);
text-align: start;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.9rem;
border-radius: 10px;
font-weight: 500;
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
position: relative;
}
.dashboard-shell .dashboard-nav-item:hover,
.dashboard-shell .dashboard-nav-item:focus-visible {
background: color-mix(in srgb, var(--accent-color, #1977cc), transparent 90%);
color: var(--accent-color, #1977cc);
outline: none;
}
.dashboard-shell .dashboard-nav-item.active {
background: var(--accent-color, #1977cc);
color: var(--contrast-color, #fff);
box-shadow: 0 4px 16px rgba(25, 119, 204, 0.25);
}
.dashboard-shell .dashboard-nav-item i {
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
}
.dashboard-shell .dashboard-nav-item .dashboard-nav-badge {
margin-inline-start: auto;
background: #ffc107;
color: var(--heading-color);
font-size: 0.75rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.dashboard-shell .dashboard-content {
min-width: 0;
}
/* Mobile / narrow: collapse sidebar to a horizontal scroll strip */
@media (max-width: 991px) {
.dashboard-shell .dashboard-shell-header {
position: static;
}
.dashboard-shell .dashboard-shell-body {
grid-template-columns: 1fr;
}
.dashboard-shell .dashboard-sidebar {
position: static;
flex-direction: row;
overflow-x: auto;
gap: 0.5rem;
padding: 0.5rem;
scrollbar-width: thin;
}
.dashboard-shell .dashboard-nav-item {
flex: 0 0 auto;
padding: 0.55rem 0.9rem;
white-space: nowrap;
}
.dashboard-shell .dashboard-nav-item span {
font-size: 0.9rem;
}
}
/* RTL — the start/end logical properties already handle direction,
but ensure the sidebar visually sits on the right in RTL context */
[dir="rtl"] .dashboard-shell .dashboard-nav-item .dashboard-nav-badge {
margin-inline-start: auto;
}
/* Reduce vertical gap on the shell header inside the client/therapist dashboards */
.dashboard-shell .dashboard-shell-header .profile-header {
margin-bottom: 0.75rem;
}
.dashboard-shell .dashboard-shell-header .client-info-grid {
margin-bottom: 0.75rem;
}
/* =====================================================
Revamped Site Header (announcement / utility / nav)
===================================================== */
.site-header {
background-color: var(--background-color, #fff);
color: var(--default-color, #444);
z-index: 997;
box-shadow: 0 1px 0 rgba(7, 25, 44, 0.06);
}
.site-header .container {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 1.5rem;
}
.site-header .announcement-bar .container {
max-width: 1320px;
margin-inline: auto;
}
/* --- Announcement bar -------------------------------------------------- */
.announcement-bar {
background-color: var(--accent-color, #1977cc);
color: var(--contrast-color, #fff);
font-size: 0.85rem;
line-height: 1.2;
}
.announcement-bar .container {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding-block: 0.4rem;
}
.announcement-text {
margin: 0;
text-align: center;
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.announcement-text i {
font-size: 0.95rem;
opacity: 0.85;
}
/* --- Utility bar (logo + cart/account/lang) ---------------------------- */
.utility-bar {
background-color: var(--background-color, #fff);
border-bottom: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 90%);
}
.utility-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 76px;
padding-block: 0.5rem;
}
.site-header .brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--heading-color, #2c4964);
text-decoration: none;
line-height: 1;
}
.site-header .brand img {
max-height: 48px;
width: auto;
}
.site-header .brand-name {
font-family: var(--heading-font, "Roboto"), sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: var(--brand-name-color, #2c4964);
}
.utility-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: nowrap;
}
.utility-action {
appearance: none;
background: transparent;
border: none;
color: var(--default-color, #444);
font-size: 0.85rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.7rem;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
position: relative;
white-space: nowrap;
}
.utility-action i {
font-size: 1.05rem;
line-height: 1;
}
.utility-action:hover,
.utility-action:focus-visible {
background-color: color-mix(in srgb, var(--accent-color, #1977cc), transparent 92%);
color: var(--accent-color, #1977cc);
outline: none;
}
.utility-action-label {
font-size: 0.85rem;
}
.utility-cart {
padding-inline-end: 0.85rem;
}
.utility-cart-icon {
position: relative;
display: inline-flex;
align-items: center;
line-height: 1;
}
.utility-cart-badge {
position: absolute;
top: -8px;
inset-inline-end: -10px;
background: #c0392b;
color: #fff;
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Authenticated account dropdown */
.utility-account {
position: relative;
}
.utility-account-toggle .utility-caret {
font-size: 0.7rem;
margin-inline-start: 0.1rem;
transition: transform 0.2s ease;
}
.utility-account-menu {
list-style: none;
margin: 0;
padding: 0.4rem 0;
position: absolute;
top: calc(100% + 0.35rem);
inset-inline-end: 0;
min-width: 220px;
background: #fff;
border: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 88%);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(7, 25, 44, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
z-index: 1001;
}
.utility-account:hover > .utility-account-menu,
.utility-account:focus-within > .utility-account-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.utility-account:hover > .utility-account-toggle .utility-caret,
.utility-account:focus-within > .utility-account-toggle .utility-caret {
transform: rotate(180deg);
}
.utility-account-menu li {
list-style: none;
}
.utility-account-menu a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem;
font-size: 0.9rem;
color: var(--default-color, #444);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.utility-account-menu a:hover,
.utility-account-menu a:focus-visible {
background: color-mix(in srgb, var(--accent-color, #1977cc), transparent 94%);
color: var(--accent-color, #1977cc);
outline: none;
}
.utility-account-menu a i {
font-size: 1rem;
width: 1.2rem;
text-align: center;
color: var(--accent-color, #1977cc);
}
.utility-account-divider {
height: 1px;
background: color-mix(in srgb, var(--default-color, #444), transparent 90%);
margin: 0.35rem 0;
}
.utility-nav-toggle {
font-size: 1.4rem;
padding: 0.4rem 0.6rem;
}
/* --- Main category navigation ----------------------------------------- */
.site-header .main-nav {
background-color: var(--background-color, #fff);
border-top: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 92%);
border-bottom: 2px solid color-mix(in srgb, var(--accent-color, #1977cc), transparent 80%);
}
.site-header .main-nav > .container {
padding-block: 0;
}
.site-header .main-nav > .container > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.site-header .main-nav > .container > ul > li {
position: relative;
}
.site-header .main-nav > .container > ul > li > a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.95rem 1rem;
color: var(--heading-color, #2c4964);
font-family: var(--nav-font, "Raleway"), sans-serif;
font-weight: 600;
font-size: 1.2rem;
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.2s ease, background-color 0.2s ease;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
.site-header .main-nav > .container > ul > li > a:hover,
.site-header .main-nav > .container > ul > li:hover > a,
.site-header .main-nav > .container > ul > li > a.active {
color: var(--accent-color, #1977cc);
border-bottom-color: var(--accent-color, #1977cc);
}
.site-header .main-nav .dropdown > a .toggle-dropdown {
font-size: 0.72rem;
transition: transform 0.2s ease;
}
.site-header .main-nav .dropdown:hover > a .toggle-dropdown {
transform: rotate(180deg);
}
@media (min-width: 1200px) {
.site-header .main-nav .dropdown > ul {
list-style: none;
margin: 0;
padding: 0.5rem 0;
position: absolute;
top: calc(100% + 2px);
inset-inline-start: 0;
min-width: 240px;
background: #fff;
border: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 88%);
border-radius: 10px;
box-shadow: 0 14px 36px rgba(7, 25, 44, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
z-index: 1000;
}
.site-header .main-nav .dropdown:hover > ul,
.site-header .main-nav .dropdown:focus-within > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header .main-nav .dropdown > ul a {
display: flex;
align-items: center;
padding: 0.55rem 1rem;
color: var(--default-color, #444);
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.site-header .main-nav .dropdown > ul a:hover,
.site-header .main-nav .dropdown > ul a.active {
background: color-mix(in srgb, var(--accent-color, #1977cc), transparent 94%);
color: var(--accent-color, #1977cc);
}
}
.site-header .nav-cta-item {
margin-inline-start: auto;
}
.site-header .nav-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: var(--accent-color, #1977cc);
color: var(--contrast-color, #fff) !important;
padding: 0.55rem 1.1rem !important;
border-radius: 999px;
font-weight: 600 !important;
font-size: 0.9rem !important;
border-bottom: none !important;
margin: 0.4rem 0 !important;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.site-header .nav-cta-btn:hover {
background: color-mix(in srgb, var(--accent-color, #1977cc), #000 18%);
color: var(--contrast-color, #fff) !important;
border-bottom-color: transparent !important;
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/* Scroll behaviour: collapse the announcement bar */
.scrolled .site-header .announcement-bar {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 0.25s ease, visibility 0.25s ease;
}
/* --- Responsive: tablet & mobile -------------------------------------- */
@media (max-width: 1199px) {
.utility-bar-inner {
min-height: 64px;
}
.site-header .brand-name {
font-size: 1.25rem;
}
.utility-action-label {
display: none;
}
.utility-action {
padding: 0.5rem;
}
.utility-cart {
padding-inline-end: 0.5rem;
}
.site-header .main-nav {
display: none;
border-top: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 90%);
border-bottom: none;
}
.site-header .main-nav.is-open {
display: block;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.site-header .main-nav > .container > ul {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding-block: 0.5rem;
position: static;
inset: auto;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.site-header .main-nav > .container > ul > li > a {
padding: 0.85rem 0.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--default-color, #444), transparent 94%);
margin-bottom: 0;
justify-content: space-between;
width: 100%;
}
.site-header .main-nav a i {
width: auto;
height: auto;
background-color: transparent;
border-radius: 0;
line-height: 1;
}
/* Collapsible accordion: sub-menus are closed by default on mobile and
expand only when their parent has the .open class (toggled by tap). */
.site-header .main-nav .dropdown > ul {
list-style: none;
margin: 0;
padding: 0;
background: color-mix(in srgb, var(--accent-color, #1977cc), transparent 96%);
display: block;
position: static;
inset: auto;
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.28s ease;
}
.site-header .main-nav .dropdown.open > ul {
max-height: 600px;
opacity: 1;
visibility: visible;
padding: 0 0 0.5rem 0;
}
/* Chevron reflects open/closed state (mobile is tap-driven, not hover). */
.site-header .main-nav .dropdown.open > a .toggle-dropdown {
transform: rotate(180deg);
}
.site-header .main-nav .dropdown > ul a {
display: block;
padding: 0.6rem 1.25rem;
color: var(--default-color, #444);
font-size: 0.9rem;
text-decoration: none;
}
.site-header .main-nav .dropdown > ul a.active {
color: var(--accent-color, #1977cc);
font-weight: 600;
}
.site-header .nav-cta-item {
margin-inline-start: 0;
padding: 0.5rem;
}
.site-header .nav-cta-btn {
justify-content: center;
width: 100%;
}
}
@media (max-width: 575px) {
.site-header .brand-name {
display: none;
}
.announcement-text {
font-size: 0.78rem;
}
}
/* RTL: ensure account dropdown anchors on the visual right */
[dir="rtl"] .utility-account-menu {
inset-inline-end: auto;
inset-inline-start: 0;
}
/*--------------------------------------------------------------
# Therapist Detail (modernized)
--------------------------------------------------------------*/
.therapist-hero {
position: relative;
padding: 0;
overflow: hidden;
isolation: isolate;
background: var(--light-background, #f1f7fc);
}
.therapist-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent-color), transparent 70%) 0%, transparent 45%),
radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--heading-color), transparent 75%) 0%, transparent 50%),
linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%) 0%, color-mix(in srgb, var(--heading-color), transparent 92%) 100%);
z-index: -1;
}
.therapist-hero-inner {
padding: 56px 12px 72px;
}
.therapist-breadcrumb ol {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.therapist-breadcrumb li + li::before {
content: "›";
margin: 0 8px;
color: color-mix(in srgb, var(--default-color), transparent 60%);
}
[dir="rtl"] .therapist-breadcrumb li + li::before {
content: "‹";
}
.therapist-breadcrumb a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.2s;
}
.therapist-breadcrumb a:hover {
color: var(--heading-color);
}
.therapist-hero-content {
display: flex;
gap: 40px;
align-items: center;
flex-wrap: wrap;
}
.therapist-hero-avatar {
flex-shrink: 0;
width: 200px;
height: 200px;
border-radius: 28px;
overflow: hidden;
background: var(--surface-color);
box-shadow: 0 24px 48px -16px rgba(25, 119, 204, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.7);
transform: rotate(-2deg);
transition: transform 0.4s ease;
}
.therapist-hero-avatar:hover {
transform: rotate(0) scale(1.02);
}
.therapist-hero-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.therapist-hero-text {
flex: 1 1 320px;
}
.therapist-hero-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-color), transparent 85%);
color: var(--accent-color);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.therapist-hero-text h1 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--heading-color);
margin: 0 0 12px;
line-height: 1.15;
}
.therapist-hero-specialty {
font-size: 18px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin: 0 0 28px;
}
.therapist-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.therapist-hero-actions .primary-btn,
.therapist-hero-actions .ghost-btn {
padding: 12px 22px;
font-size: 0.95rem;
}
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
border: 1.5px solid color-mix(in srgb, var(--accent-color), transparent 70%);
background: var(--surface-color);
color: var(--heading-color);
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
line-height: 1.2;
}
.ghost-btn:hover {
border-color: var(--priamry-color);
color: var(--accent-color);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.primary-btn-block {
display: flex;
width: 100%;
padding: 12px 18px;
font-size: 0.95rem;
}
/* Therapist Detail Grid */
.therapist-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
.therapist-sidebar {
position: sticky;
top: 96px;
}
@media (max-width: 991px) {
.therapist-sidebar {
position: static;
}
}
.therapist-profile-card {
background: var(--surface-color);
border-radius: 20px;
padding: 28px 24px;
box-shadow: 0 10px 40px -12px rgba(44, 73, 100, 0.18);
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}
.therapist-profile-header {
text-align: center;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
.therapist-profile-avatar {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 16px;
box-shadow: 0 0 0 4px var(--surface-color), 0 0 0 6px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.therapist-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.therapist-profile-card h3 {
font-size: 1.2rem;
color: var(--heading-color);
margin: 0 0 4px;
font-weight: 700;
}
.therapist-profile-specialty {
font-size: 0.9rem;
color: color-mix(in srgb, var(--default-color), transparent 25%);
margin: 0;
}
.therapist-profile-section {
margin-bottom: 22px;
}
.therapist-profile-section:last-of-type {
margin-bottom: 24px;
}
.therapist-profile-section h5 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: color-mix(in srgb, var(--default-color), transparent 45%);
font-weight: 600;
margin: 0 0 12px;
}
.therapist-contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.therapist-contact-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.therapist-contact-list li + li {
border-top: 1px dashed color-mix(in srgb, var(--default-color), transparent 88%);
}
.contact-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-color), transparent 88%);
color: var(--accent-color);
font-size: 0.95rem;
}
.contact-link {
color: var(--heading-color);
text-decoration: none;
font-size: 0.9rem;
word-break: break-word;
transition: color 0.2s;
}
.contact-link:hover {
color: var(--accent-color);
}
.therapist-social {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.therapist-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--default-color), transparent 94%);
color: color-mix(in srgb, var(--default-color), transparent 20%);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
}
.therapist-social a:hover {
background: var(--accent-color);
color: var(--contrast-color);
transform: translateY(-2px);
}
/* Therapist Info Cards */
.therapist-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.therapist-info-card {
background: var(--surface-color);
border-radius: 18px;
padding: 28px 30px;
box-shadow: 0 6px 30px -10px rgba(44, 73, 100, 0.15);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.therapist-info-card:hover {
box-shadow: 0 12px 36px -10px rgba(44, 73, 100, 0.22);
transform: translateY(-2px);
}
.therapist-info-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}
.therapist-info-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 40%));
color: var(--contrast-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent-color), transparent 40%);
}
.therapist-info-header h3 {
margin: 0;
font-size: 1.15rem;
color: var(--heading-color);
font-weight: 700;
}
.therapist-info-body p {
line-height: 1.7;
color: color-mix(in srgb, var(--default-color), transparent 10%);
}
.therapist-info-body p.lead {
font-size: 1.05rem;
color: var(--heading-color);
font-weight: 500;
}
/* Expertise chips */
.expertise-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.expertise-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
background: color-mix(in srgb, var(--accent-color), transparent 92%);
color: var(--heading-color);
font-size: 0.9rem;
font-weight: 500;
transition: all 0.25s;
}
.expertise-chip:hover {
background: color-mix(in srgb, var(--accent-color), transparent 80%);
transform: translateY(-1px);
}
.expertise-chip i {
color: var(--accent-color);
font-size: 1rem;
}
/* Timeline list for experience/education */
.therapist-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.therapist-timeline::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
inset-inline-start: 7px;
width: 2px;
background: color-mix(in srgb, var(--accent-color), transparent 80%);
}
.therapist-timeline li {
position: relative;
padding-inline-start: 28px;
padding-block: 10px;
color: color-mix(in srgb, var(--default-color), transparent 10%);
}
.timeline-dot {
position: absolute;
inset-inline-start: 0;
top: 16px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface-color);
border: 3px solid var(--accent-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 88%);
}
.therapist-back {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
/*--------------------------------------------------------------
# Trainings page — sidebar layout
--------------------------------------------------------------*/
.trainings-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 991px) {
.trainings-layout {
grid-template-columns: 1fr;
gap: 20px;
}
}
.trainings-sidebar {
position: sticky;
top: 96px;
}
@media (max-width: 991px) {
.trainings-sidebar {
position: static;
}
}
.trainings-side-nav {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--surface-color);
padding: 14px;
border-radius: 16px;
box-shadow: 0 6px 24px -10px rgba(44, 73, 100, 0.15);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}
@media (max-width: 991px) {
.trainings-side-nav {
flex-direction: column;
overflow-x: visible;
padding: 10px;
width: 100%;
}
}
.trainings-side-link {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--heading-color);
font-weight: 500;
text-align: start;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
}
@media (max-width: 991px) {
.trainings-side-link {
flex: 0 0 auto;
width: 100%;
white-space: normal;
}
}
.trainings-side-link:hover {
background: color-mix(in srgb, var(--accent-color), transparent 92%);
color: var(--accent-color);
}
.trainings-side-link.active {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 35%));
color: var(--contrast-color);
box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent-color), transparent 40%);
}
.trainings-side-icon {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-color), transparent 88%);
color: var(--accent-color);
font-size: 1rem;
transition: all 0.25s ease;
}
.trainings-side-link.active .trainings-side-icon {
background: rgba(255, 255, 255, 0.2);
color: var(--contrast-color);
}
.trainings-side-text {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
gap: 10px;
}
.trainings-side-label {
font-size: 0.92rem;
line-height: 1.25;
}
.trainings-side-count {
flex-shrink: 0;
min-width: 26px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--default-color), transparent 90%);
color: color-mix(in srgb, var(--default-color), transparent 25%);
font-size: 0.75rem;
font-weight: 600;
text-align: center;
}
.trainings-side-link.active .trainings-side-count {
background: rgba(255, 255, 255, 0.25);
color: var(--contrast-color);
}
.trainings-content {
min-width: 0;
max-width: 100%;
}
.trainings-page .training-card img {
max-width: 100%;
}
@media (max-width: 575.98px) {
.trainings-page .training-card img {
height: 140px !important;
}
}
/*--------------------------------------------------------------
# Modern Appointment Calendar — Make Appointment Journey
--------------------------------------------------------------*/
.appointment-calendar {
background: var(--surface-color);
border-radius: 18px;
box-shadow: 0 12px 40px rgba(44, 73, 100, 0.08);
border: 1px solid rgba(25, 119, 204, 0.08);
overflow: hidden;
}
.appointment-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--heading-color) 100%);
color: #fff;
}
.appointment-calendar-header .cal-month-label {
text-align: center;
line-height: 1.15;
}
.appointment-calendar-header .cal-month-name {
display: block;
font-family: var(--heading-font);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: 0.3px;
}
.appointment-calendar-header .cal-month-year {
display: block;
font-size: 0.8rem;
opacity: 0.85;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.cal-nav-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.18);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: background-color 0.2s ease, transform 0.2s ease;
cursor: pointer;
}
.cal-nav-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
}
.cal-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.appointment-calendar-grid {
padding: 18px 18px 8px;
}
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.cal-weekday {
text-align: center;
font-family: var(--nav-font);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1px;
color: #8a99ad;
text-transform: uppercase;
padding: 6px 0;
}
.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.cal-day {
aspect-ratio: 1 / 1;
border: 1px solid transparent;
background: transparent;
border-radius: 12px;
color: #c5cdd9;
font-weight: 500;
font-size: 0.95rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
cursor: default;
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cal-day .cal-day-num {
line-height: 1;
}
.cal-day .cal-day-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent-color);
margin-top: 5px;
}
.cal-day.is-outside {
color: #e3e7ee;
}
.cal-day.is-available {
color: var(--heading-color);
background: rgba(25, 119, 204, 0.06);
border-color: rgba(25, 119, 204, 0.12);
cursor: pointer;
}
.cal-day.is-available:hover {
background: rgba(25, 119, 204, 0.14);
border-color: rgba(25, 119, 204, 0.32);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(25, 119, 204, 0.18);
}
.cal-day.is-today {
border-color: var(--accent-color);
font-weight: 700;
}
.cal-day.is-today:not(.is-available) {
color: var(--accent-color);
background: rgba(25, 119, 204, 0.04);
}
.cal-day.is-selected,
.cal-day.is-selected.is-available {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 22px rgba(25, 119, 204, 0.35);
transform: translateY(-1px);
}
.cal-day.is-selected .cal-day-dot {
background: #fff;
}
.cal-day:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.appointment-calendar-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 12px 22px 18px;
border-top: 1px solid rgba(25, 119, 204, 0.08);
background: #fafcfe;
font-size: 0.78rem;
color: #6b7a8f;
}
.cal-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.legend-swatch {
width: 14px;
height: 14px;
border-radius: 4px;
display: inline-block;
border: 1px solid transparent;
}
.legend-swatch.swatch-available {
background: rgba(25, 119, 204, 0.14);
border-color: rgba(25, 119, 204, 0.32);
}
.legend-swatch.swatch-selected {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
}
.legend-swatch.swatch-today {
background: #fff;
border-color: var(--accent-color);
}
/* Slots panel paired with the calendar */
.appointment-slots-panel {
background: var(--surface-color);
border-radius: 18px;
border: 1px solid rgba(25, 119, 204, 0.08);
box-shadow: 0 12px 40px rgba(44, 73, 100, 0.06);
padding: 22px;
height: 100%;
min-height: 360px;
display: flex;
flex-direction: column;
}
.slots-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(25, 119, 204, 0.1);
}
.slots-header i {
font-size: 1.6rem;
color: var(--accent-color);
}
.slots-header strong {
color: var(--heading-color);
}
.slots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
align-content: flex-start;
}
.slot-pill {
border: 1px solid rgba(25, 119, 204, 0.25);
background: #fff;
color: var(--accent-color);
font-weight: 600;
font-size: 0.92rem;
padding: 10px 6px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.slot-pill:hover {
background: rgba(25, 119, 204, 0.08);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(25, 119, 204, 0.15);
}
.slot-pill.is-selected {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 20px rgba(25, 119, 204, 0.35);
}
.slots-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
color: #8a99ad;
}
.slots-empty i {
font-size: 2.5rem;
color: rgba(25, 119, 204, 0.35);
margin-bottom: 12px;
}
.slots-empty h6 {
color: var(--heading-color);
margin-bottom: 6px;
}
.slots-empty-warning i {
color: #e6a23c;
}
@media (max-width: 991.98px) {
.appointment-slots-panel {
min-height: 0;
}
}
/* RTL adjustments */
[dir="rtl"] .appointment-calendar-header .cal-nav-btn i.bi-chevron-left::before {
content: "\f285"; /* chevron-right */
}
[dir="rtl"] .appointment-calendar-header .cal-nav-btn i.bi-chevron-right::before {
content: "\f284"; /* chevron-left */
}
/*--------------------------------------------------------------
# Auth pages (Login / Register / Unauthorized) — themed wrapper
--------------------------------------------------------------*/
.auth-section,
.unauthorized-section {
padding: 70px 0 90px;
background: linear-gradient(180deg, #f6fafe 0%, #ffffff 60%);
}
.auth-card,
.unauthorized-card {
background: var(--surface-color);
border-radius: 18px;
box-shadow: 0 18px 50px rgba(44, 73, 100, 0.09);
border: 1px solid rgba(25, 119, 204, 0.06);
padding: 36px 32px;
max-width: 460px;
margin: 0 auto;
}
.auth-card .auth-brand,
.unauthorized-card .auth-brand {
text-align: center;
margin-bottom: 18px;
}
.auth-card .auth-brand i,
.unauthorized-card .auth-brand i {
font-size: 2.4rem;
color: var(--accent-color);
}
.auth-card h2,
.unauthorized-card h2 {
text-align: center;
color: var(--heading-color);
font-weight: 700;
margin-bottom: 8px;
}
.auth-card .auth-sub,
.unauthorized-card .auth-sub {
text-align: center;
color: #6b7a8f;
margin-bottom: 28px;
}
.auth-card .form-control,
.unauthorized-card .form-control {
border-radius: 10px;
padding: 11px 14px;
border-color: rgba(25, 119, 204, 0.18);
}
.auth-card .form-control:focus,
.unauthorized-card .form-control:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 0.2rem rgba(25, 119, 204, 0.15);
}
.auth-card .btn-primary,
.unauthorized-card .btn-primary {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
border: none;
border-radius: 999px;
padding: 11px 24px;
font-weight: 600;
width: 100%;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.auth-card .btn-primary:hover,
.unauthorized-card .btn-primary:hover {
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/*--------------------------------------------------------------
# Themed cards — Publications, Announcements, OrderConfirmation
--------------------------------------------------------------*/
.themed-card {
border: 1px solid rgba(25, 119, 204, 0.08) !important;
border-radius: 16px !important;
box-shadow: 0 8px 24px rgba(44, 73, 100, 0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.themed-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(44, 73, 100, 0.12) !important;
}
.themed-card .card-title {
color: var(--heading-color);
font-weight: 600;
}
.themed-card .card-img-top {
height: 200px;
object-fit: cover;
}
/* Confirmation hero block */
.confirmation-hero {
background: linear-gradient(180deg, rgba(25, 119, 204, 0.06) 0%, #ffffff 100%);
border-radius: 18px;
padding: 48px 32px;
text-align: center;
border: 1px solid rgba(25, 119, 204, 0.08);
}
.confirmation-hero .check-circle {
width: 86px;
height: 86px;
border-radius: 50%;
background: linear-gradient(135deg, #43c87a, #2eb15f);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.6rem;
margin-bottom: 18px;
box-shadow: 0 12px 28px rgba(46, 177, 95, 0.35);
}
.confirmation-hero h2 {
color: var(--heading-color);
font-weight: 700;
}
/*--------------------------------------------------------------
# Make-Appointment Booking Journey — modernized
--------------------------------------------------------------*/
.booking-journey {
background: linear-gradient(180deg, #f6fafe 0%, #ffffff 280px);
}
.booking-journey .section-title {
margin-bottom: 28px;
}
/* Stepper — modernized rail */
.booking-journey .appointment-stepper {
background: var(--surface-color);
border-radius: 999px;
padding: 10px 12px;
box-shadow: 0 10px 30px rgba(44, 73, 100, 0.06);
border: 1px solid rgba(25, 119, 204, 0.08);
gap: 6px;
}
.booking-journey .appointment-stepper li {
background: transparent;
padding: 8px 14px;
font-size: 0.88rem;
}
.booking-journey .appointment-stepper li + li::before {
background-color: #e1e8f0;
width: 18px;
margin-right: 4px;
margin-left: -4px;
}
.booking-journey .appointment-stepper li.active {
background: linear-gradient(135deg, rgba(25, 119, 204, 0.12), rgba(25, 119, 204, 0.04));
box-shadow: inset 0 0 0 1px rgba(25, 119, 204, 0.18);
}
.booking-journey .appointment-stepper li.active .step-bullet {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
box-shadow: 0 4px 10px rgba(25, 119, 204, 0.35);
}
.booking-journey .appointment-stepper li.completed .step-bullet {
background: linear-gradient(135deg, #43c87a, #2eb15f);
box-shadow: 0 4px 10px rgba(46, 177, 95, 0.3);
}
/* Step card shell */
.booking-step-card {
background: var(--surface-color);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(44, 73, 100, 0.08);
border: 1px solid rgba(25, 119, 204, 0.06);
overflow: hidden;
position: relative;
}
.booking-step-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 50%, var(--heading-color) 100%);
}
.booking-step-card-body {
padding: 32px 30px;
}
@media (max-width: 575.98px) {
.booking-step-card-body {
padding: 22px 18px;
}
}
.booking-step-title {
color: var(--heading-color);
font-weight: 700;
margin-bottom: 22px;
font-size: 1.35rem;
display: flex;
align-items: center;
gap: 10px;
}
.booking-step-title::before {
content: "";
width: 4px;
height: 22px;
background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
border-radius: 2px;
}
/* Pinned context bar */
.booking-journey .selected-context-card {
border-radius: 14px !important;
border: 1px solid rgba(25, 119, 204, 0.1) !important;
box-shadow: 0 8px 24px rgba(44, 73, 100, 0.06) !important;
background: linear-gradient(135deg, #ffffff 0%, #f6fafe 100%) !important;
}
/* Path tiles (Choose path) */
.path-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 28px 22px;
border-radius: 18px;
background: #ffffff;
border: 2px solid rgba(25, 119, 204, 0.08);
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.25s ease;
position: relative;
overflow: hidden;
height: 100%;
min-height: 200px;
}
[dir="rtl"] .path-tile {
text-align: right;
align-items: flex-end;
}
.path-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(25, 119, 204, 0.06), rgba(44, 73, 100, 0.04));
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.path-tile:hover {
transform: translateY(-6px);
border-color: rgba(25, 119, 204, 0.4);
box-shadow: 0 22px 50px rgba(25, 119, 204, 0.18);
}
.path-tile:hover::after {
opacity: 1;
}
.path-tile-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(25, 119, 204, 0.14), rgba(25, 119, 204, 0.06));
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
margin-bottom: 6px;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
position: relative;
z-index: 1;
}
.path-tile:hover .path-tile-icon {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
color: #fff;
transform: scale(1.05);
}
.path-tile-title {
color: var(--heading-color);
font-weight: 700;
font-size: 1.05rem;
position: relative;
z-index: 1;
}
.path-tile-desc {
color: #6b7a8f;
font-size: 0.85rem;
line-height: 1.5;
position: relative;
z-index: 1;
}
.path-tile-arrow {
position: absolute;
bottom: 18px;
right: 22px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(25, 119, 204, 0.1);
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
z-index: 1;
}
[dir="rtl"] .path-tile-arrow {
right: auto;
left: 22px;
}
[dir="rtl"] .path-tile-arrow i.bi-arrow-right::before {
content: "\f12f"; /* arrow-left */
}
.path-tile:hover .path-tile-arrow {
background: var(--accent-color);
color: #fff;
transform: translateX(4px);
}
[dir="rtl"] .path-tile:hover .path-tile-arrow {
transform: translateX(-4px);
}
/* Choice tile (service select) */
.choice-tile {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: 14px;
background: #ffffff;
border: 2px solid rgba(25, 119, 204, 0.08);
text-align: left;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
width: 100%;
height: 100%;
min-height: 100px;
position: relative;
}
[dir="rtl"] .choice-tile {
text-align: right;
}
.choice-tile:hover {
transform: translateY(-3px);
border-color: rgba(25, 119, 204, 0.32);
box-shadow: 0 14px 30px rgba(25, 119, 204, 0.12);
}
.choice-tile.is-selected {
border-color: var(--accent-color);
background: linear-gradient(135deg, rgba(25, 119, 204, 0.08), rgba(25, 119, 204, 0.02));
box-shadow: 0 14px 30px rgba(25, 119, 204, 0.18);
}
.choice-tile-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(25, 119, 204, 0.14), rgba(25, 119, 204, 0.06));
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: background 0.2s ease, color 0.2s ease;
}
.choice-tile.is-selected .choice-tile-icon {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
color: #fff;
}
.choice-tile-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.choice-tile-title {
color: var(--heading-color);
font-weight: 700;
font-size: 1rem;
}
.choice-tile-desc {
color: #6b7a8f;
font-size: 0.83rem;
line-height: 1.4;
}
.choice-tile-check {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #d6deea;
background: #fff;
color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choice-tile.is-selected .choice-tile-check {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
border-color: transparent;
color: #fff;
}
/* Therapist tile */
.therapist-tile {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: 14px;
background: #ffffff;
border: 2px solid rgba(25, 119, 204, 0.08);
text-align: left;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
width: 100%;
height: 100%;
min-height: 100px;
}
[dir="rtl"] .therapist-tile {
text-align: right;
}
.therapist-tile:hover {
transform: translateY(-3px);
border-color: rgba(25, 119, 204, 0.32);
box-shadow: 0 14px 30px rgba(25, 119, 204, 0.12);
}
.therapist-tile.is-selected {
border-color: var(--accent-color);
background: linear-gradient(135deg, rgba(25, 119, 204, 0.08), rgba(25, 119, 204, 0.02));
box-shadow: 0 14px 30px rgba(25, 119, 204, 0.18);
}
.therapist-tile-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 6px 16px rgba(44, 73, 100, 0.12);
flex-shrink: 0;
}
.therapist-tile.is-selected .therapist-tile-avatar {
border-color: var(--accent-color);
}
.therapist-tile-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.therapist-tile-name {
color: var(--heading-color);
font-weight: 700;
font-size: 1rem;
}
.therapist-tile-specialty {
color: #6b7a8f;
font-size: 0.83rem;
line-height: 1.4;
}
/* Payment step */
.session-fee-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-radius: 14px;
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
color: #fff;
margin-bottom: 22px;
box-shadow: 0 12px 28px rgba(25, 119, 204, 0.22);
}
.session-fee-banner small {
opacity: 0.85;
letter-spacing: 1.5px;
font-size: 0.72rem;
font-weight: 600;
}
.session-fee-banner strong {
font-size: 1.4rem;
font-weight: 700;
}
.session-fee-banner .fee-currency {
font-size: 0.8rem;
opacity: 0.85;
font-weight: 600;
margin-left: 4px;
}
.session-fee-banner .fee-icon {
font-size: 2.2rem;
opacity: 0.25;
}
.payment-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.payment-tile {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
border: 2px solid rgba(25, 119, 204, 0.08);
background: #ffffff;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
position: relative;
margin: 0;
}
.payment-tile input[type="radio"] {
display: none;
}
.payment-tile:hover:not(.is-disabled) {
transform: translateY(-2px);
border-color: rgba(25, 119, 204, 0.32);
box-shadow: 0 12px 26px rgba(25, 119, 204, 0.12);
}
.payment-tile.is-selected {
border-color: var(--accent-color);
background: linear-gradient(135deg, rgba(25, 119, 204, 0.08), rgba(25, 119, 204, 0.02));
box-shadow: 0 12px 26px rgba(25, 119, 204, 0.18);
}
.payment-tile.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.payment-tile-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(25, 119, 204, 0.14), rgba(25, 119, 204, 0.06));
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.payment-tile.is-selected .payment-tile-icon {
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
color: #fff;
}
.payment-tile-body {
flex: 1;
display: flex;
flex-direction: column;
}
.payment-tile-body strong {
color: var(--heading-color);
}
.payment-tile-radio {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #d6deea;
background: #fff;
flex-shrink: 0;
position: relative;
transition: border-color 0.2s ease;
}
.payment-tile.is-selected .payment-tile-radio {
border-color: var(--accent-color);
}
.payment-tile.is-selected .payment-tile-radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 18%));
}
.payment-tile-badge {
position: absolute;
top: 10px;
right: 12px;
background: rgba(25, 119, 204, 0.12);
color: var(--accent-color);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 999px;
}
[dir="rtl"] .payment-tile-badge {
right: auto;
left: 12px;
}
/* Summary list (confirm + success) */
.summary-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.summary-list-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #fafcfe;
border: 1px solid rgba(25, 119, 204, 0.08);
border-radius: 12px;
transition: background 0.2s ease;
}
.summary-list-item:hover {
background: var(--light-background);
}
.summary-list-item > i,
.summary-list-item > .summary-icon,
.summary-list-item > img {
flex-shrink: 0;
}
.summary-list-item > i,
.summary-list-item > .summary-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(25, 119, 204, 0.14), rgba(25, 119, 204, 0.06));
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
margin: 0;
}
.summary-list-item .rounded-circle {
box-shadow: 0 4px 12px rgba(44, 73, 100, 0.12);
border: 2px solid #fff;
}
.summary-list-item strong {
color: var(--heading-color);
}
.summary-list-item .btn-outline-primary {
border-radius: 999px;
padding: 4px 12px;
font-size: 0.8rem;
}
/* Success state */
.booking-success {
background: #ffffff;
border-radius: 22px;
box-shadow: 0 24px 60px rgba(44, 73, 100, 0.1);
overflow: hidden;
border: 1px solid rgba(25, 119, 204, 0.06);
}
.booking-success-header {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 60%, var(--heading-color) 100%);
color: #fff;
text-align: center;
padding: 48px 30px 36px;
position: relative;
overflow: hidden;
}
.booking-success-header::before,
.booking-success-header::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.booking-success-header::before {
width: 220px;
height: 220px;
top: -100px;
left: -60px;
}
.booking-success-header::after {
width: 160px;
height: 160px;
bottom: -70px;
right: -40px;
}
.booking-success-header .success-check {
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff;
color: #2eb15f;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 3rem;
margin-bottom: 18px;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
animation: success-pop 0.55s ease-out;
}
@keyframes success-pop {
0% { transform: scale(0.3); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); }
}
.booking-success-header h2 {
color: #fff;
font-weight: 700;
margin-bottom: 8px;
position: relative;
}
.booking-success-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
margin-bottom: 0;
position: relative;
}
.booking-success-body {
padding: 30px 32px 36px;
}
.booking-success-section-title {
display: flex;
align-items: center;
gap: 10px;
color: var(--heading-color);
font-weight: 700;
margin-bottom: 18px;
}
.booking-success-section-title i {
color: var(--accent-color);
font-size: 1.3rem;
}
.booking-success-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 22px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(67, 200, 122, 0.12), rgba(46, 177, 95, 0.05));
border-left: 4px solid #2eb15f;
border-radius: 10px;
color: #1d6f3e;
font-size: 0.92rem;
}
[dir="rtl"] .booking-success-note {
border-left: none;
border-right: 4px solid #2eb15f;
}
.booking-success-note i {
font-size: 1.25rem;
flex-shrink: 0;
margin-top: 2px;
}
.booking-success-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
justify-content: center;
}
.booking-success-actions .btn {
border-radius: 999px;
padding: 10px 26px;
font-weight: 600;
}
.booking-success-actions .btn-primary {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
border: none;
box-shadow: 0 10px 22px rgba(25, 119, 204, 0.3);
}
/* Guest capture / inquiry card uplift inside booking-journey */
.booking-journey .card.shadow-sm {
border: 1px solid rgba(25, 119, 204, 0.08) !important;
border-radius: 18px !important;
box-shadow: 0 16px 40px rgba(44, 73, 100, 0.08) !important;
overflow: hidden;
}
.booking-journey .card.shadow-sm .card-body {
padding: 28px;
}
/* Modern back button inside steps */
.booking-step-card-body .btn-outline-primary {
border-radius: 999px;
padding: 8px 20px;
font-weight: 600;
border-width: 2px;
}
.booking-step-card-body .btn-primary {
border-radius: 999px;
padding: 9px 24px;
font-weight: 600;
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
border: none;
box-shadow: 0 8px 18px rgba(25, 119, 204, 0.28);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.booking-step-card-body .btn-primary:hover:not(:disabled) {
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
/*--------------------------------------------------------------
# Contact Page (Modern Revamp)
--------------------------------------------------------------*/
/* Hero subtitle inside .page-title */
.page-title .heading .page-title-subtitle {
margin-top: 14px;
margin-bottom: 0;
font-size: 17px;
line-height: 1.7;
color: color-mix(in srgb, var(--default-color), transparent 25%);
max-width: 640px;
}
/* Quick contact cards */
.contact-page .contact-quick-row {
margin-top: 4px;
}
.contact-page .contact-quick-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
border-radius: 18px;
padding: 2rem 1.5rem;
text-align: center;
height: 100%;
box-shadow: 0 6px 20px rgba(7, 25, 44, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
position: relative;
overflow: hidden;
}
.contact-page .contact-quick-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--accent-color),
color-mix(in srgb, var(--accent-color), transparent 40%));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
[dir="rtl"] .contact-page .contact-quick-card::before {
transform-origin: right;
}
.contact-page .contact-quick-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(25, 119, 204, 0.16);
border-color: color-mix(in srgb, var(--accent-color), transparent 75%);
}
.contact-page .contact-quick-card:hover::before {
transform: scaleX(1);
}
.contact-page .contact-quick-icon {
width: 72px;
height: 72px;
margin: 0 auto 1.1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent-color), transparent 82%),
color-mix(in srgb, var(--accent-color), transparent 92%));
color: var(--accent-color);
font-size: 1.85rem;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.contact-page .contact-quick-card:hover .contact-quick-icon {
background: var(--accent-color);
color: var(--contrast-color);
transform: scale(1.06) rotate(-4deg);
}
.contact-page .contact-quick-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 0.5rem;
}
.contact-page .contact-quick-card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--default-color);
}
.contact-page .contact-quick-card p a {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-page .contact-quick-card p a:hover {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
}
.contact-page .contact-quick-card-accent {
background: linear-gradient(160deg,
color-mix(in srgb, var(--accent-color), transparent 92%) 0%,
var(--surface-color) 70%);
}
.contact-page .contact-quick-card-accent .contact-quick-icon {
background: var(--accent-color);
color: var(--contrast-color);
}
/* Form + side stack section */
.contact-form-section {
padding-top: 80px;
padding-bottom: 80px;
}
.contact-form-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
border-radius: 22px;
padding: 2.5rem;
height: 100%;
box-shadow: 0 14px 40px rgba(7, 25, 44, 0.08);
}
.contact-form-header {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
.contact-form-header h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 0.5rem;
}
.contact-form-header p {
margin: 0;
color: color-mix(in srgb, var(--default-color), transparent 20%);
line-height: 1.6;
}
/* Modern form fields (overrides .contact .php-email-form defaults) */
.contact-page .contact-modern-form .form-floating > .form-control,
.contact-page .contact-modern-form .form-floating > .form-control:focus {
border-radius: 12px;
border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 85%);
background: color-mix(in srgb, var(--accent-color), transparent 97%);
padding: 1.1rem 1rem 0.3rem;
min-height: 58px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
box-shadow: none;
}
.contact-page .contact-modern-form .form-floating > .form-control:focus {
border-color: var(--accent-color);
background: var(--surface-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 88%);
}
.contact-page .contact-modern-form .form-floating > .contact-textarea {
min-height: 160px;
resize: vertical;
padding-top: 1.6rem;
}
.contact-page .contact-modern-form .form-floating > label {
color: color-mix(in srgb, var(--default-color), transparent 30%);
padding: 1rem;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.contact-page .contact-modern-form .form-floating > label i {
color: var(--accent-color);
font-size: 0.95rem;
}
.contact-page .contact-modern-form .form-floating > .form-control:focus ~ label,
.contact-page .contact-modern-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
color: var(--accent-color);
transform: scale(0.82) translateY(-0.6rem) translateX(0.1rem);
}
[dir="rtl"] .contact-page .contact-modern-form .form-floating > .form-control:focus ~ label,
[dir="rtl"] .contact-page .contact-modern-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
transform: scale(0.82) translateY(-0.6rem) translateX(-0.1rem);
}
/* Form footer with note + submit */
.contact-form-footer {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
}
.contact-response-note {
margin: 0;
font-size: 0.9rem;
color: color-mix(in srgb, var(--default-color), transparent 25%);
display: inline-flex;
align-items: center;
gap: 8px;
}
.contact-response-note i {
color: var(--accent-color);
font-size: 1.05rem;
}
.contact-page .contact-modern-form .contact-submit-btn,
.contact-page .contact-modern-form button[type=submit].contact-submit-btn {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
color: var(--contrast-color);
border: 0;
padding: 12px 32px;
border-radius: 999px;
font-weight: 600;
font-size: 0.98rem;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 24px rgba(25, 119, 204, 0.28);
transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.contact-page .contact-modern-form .contact-submit-btn:hover,
.contact-page .contact-modern-form button[type=submit].contact-submit-btn:hover {
background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 18%) 100%);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
filter: brightness(1.05);
}
.contact-page .contact-modern-form .contact-submit-btn i {
font-size: 1.05rem;
transition: transform 0.25s ease;
}
[dir="rtl"] .contact-page .contact-modern-form .contact-submit-btn i {
transform: scaleX(-1);
}
.contact-page .contact-modern-form .contact-submit-btn:hover i {
transform: translateX(3px);
}
[dir="rtl"] .contact-page .contact-modern-form .contact-submit-btn:hover i {
transform: scaleX(-1) translateX(3px);
}
/* Side info stack */
.contact-side-stack {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: 100%;
}
.contact-side-card {
background: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
border-radius: 18px;
padding: 1.75rem;
box-shadow: 0 8px 22px rgba(7, 25, 44, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-side-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(7, 25, 44, 0.1);
}
.contact-side-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent-color), transparent 82%),
color-mix(in srgb, var(--accent-color), transparent 92%));
color: var(--accent-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 1rem;
}
.contact-side-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 0.85rem;
}
.contact-side-text {
margin: 0 0 1rem;
color: color-mix(in srgb, var(--default-color), transparent 18%);
line-height: 1.65;
font-size: 0.95rem;
}
/* Working hours list */
.contact-hours-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-hours-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 0.7rem 0;
border-bottom: 1px dashed color-mix(in srgb, var(--default-color), transparent 88%);
font-size: 0.95rem;
}
.contact-hours-list li:last-child {
border-bottom: none;
}
.contact-hours-list .hours-day {
color: var(--heading-color);
font-weight: 600;
}
.contact-hours-list .hours-time {
color: color-mix(in srgb, var(--default-color), transparent 15%);
font-weight: 500;
font-feature-settings: "tnum";
}
.contact-hours-list .hours-closed {
color: #c0392b;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Social row */
.contact-social-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.contact-social-row a {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-color), transparent 92%);
color: var(--accent-color);
font-size: 1.15rem;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
text-decoration: none;
}
.contact-social-row a:hover {
background: var(--accent-color);
color: var(--contrast-color);
transform: translateY(-3px);
}
/* CTA card variant */
.contact-side-card-cta {
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent-color), transparent 90%) 0%,
color-mix(in srgb, var(--accent-color), transparent 96%) 100%);
border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}
.contact-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--accent-color);
font-weight: 600;
text-decoration: none;
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease, gap 0.2s ease;
}
.contact-cta-link i {
transition: transform 0.25s ease;
}
[dir="rtl"] .contact-cta-link i {
transform: scaleX(-1);
}
.contact-cta-link:hover {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
gap: 12px;
}
.contact-cta-link:hover i {
transform: translateX(3px);
}
[dir="rtl"] .contact-cta-link:hover i {
transform: scaleX(-1) translateX(3px);
}
/* Map section */
.contact-map-section {
padding-top: 80px;
}
.contact-map-wrapper {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(7, 25, 44, 0.14);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
background: var(--surface-color);
}
.contact-map-wrapper iframe {
display: block;
width: 100%;
height: 500px;
border: 0;
filter: saturate(1.05);
}
.contact-map-overlay-btn {
position: absolute;
bottom: 22px;
inset-inline-end: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: var(--surface-color);
color: var(--accent-color);
font-weight: 600;
font-size: 0.95rem;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 10px 28px rgba(7, 25, 44, 0.2);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.contact-map-overlay-btn:hover {
background: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 2px 8px rgba(25, 119, 204, 0.22);
}
.contact-map-overlay-btn i {
font-size: 1rem;
}
/* Responsive */
@media (max-width: 991.98px) {
.contact-form-card {
padding: 1.75rem;
}
.contact-form-section,
.contact-map-section {
padding-top: 60px;
padding-bottom: 60px;
}
.contact-map-wrapper iframe {
height: 380px;
}
}
@media (max-width: 575.98px) {
.contact-form-card {
padding: 1.25rem;
border-radius: 16px;
}
.contact-form-header h2 {
font-size: 1.35rem;
}
.contact-form-footer {
flex-direction: column;
align-items: stretch;
}
.contact-page .contact-modern-form .contact-submit-btn {
justify-content: center;
width: 100%;
}
.contact-map-overlay-btn span {
display: none;
}
.contact-map-overlay-btn {
padding: 12px 14px;
}
.contact-map-wrapper iframe {
height: 320px;
}
}
/*--------------------------------------------------------------
# Mobile card carousels (Hero + Services)
# On phones the stacked cards turn into a horizontal, scroll-snapping
# carousel so the user swipes sideways instead of scrolling the whole
# page. Desktop/tablet grid layout is untouched.
--------------------------------------------------------------*/
@media (max-width: 767px) {
/* Hero: the three feature cards (the lead "why-box" stays full width above) */
.hero .content .col-lg-8 .row,
/* Services (home section only): the service-item cards. Scoped to the
.services-cards-row marker so the Services *page* two-panel layout
(sidebar + content) is NOT turned into a horizontal carousel. */
.services .container > .row.services-cards-row {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* drop Bootstrap's negative gutter margins so the cards sit flush */
margin-inline: 0;
/* breathing room so card shadows aren't clipped by the scroll container */
padding-block: 6px 14px;
/* symmetric side padding = half the empty space left by a 82%-wide card,
so the first card can rest centered at scroll-start and the last card
can rest centered at scroll-end (no card gets cut off) */
padding-inline: 9%;
scroll-padding-inline: 0;
/* hide the scrollbar; the peeking neighbour cards signal there's more */
scrollbar-width: none;
}
.hero .content .col-lg-8 .row::-webkit-scrollbar,
.services .container > .row.services-cards-row::-webkit-scrollbar {
display: none;
}
.hero .content .col-lg-8 .row > [class*="col-"],
.services .container > .row.services-cards-row > [class*="col-"] {
/* ~82% width leaves the neighbour cards peeking on both sides as a
swipe affordance */
flex: 0 0 82%;
max-width: 82%;
/* centre each card in the viewport when snapped */
scroll-snap-align: center;
}
}
/* >>> seed-content.py: theme-aware brand logo (do not edit) */
/* Default: colored logo (light themes). Header / footer / favicon all
reference Logo ETTIZAN-colored.png. For any current or future dark
theme variant (data-theme value containing 'dark'), swap to the
white logo via the data-dark attribute set in HeaderLayout.razor. */
.site-header .brand img.brand-logo {
content: var(--brand-logo, none);
max-height: 48px;
width: auto;
}
html[data-theme*="dark"] .site-header .brand img.brand-logo[data-dark] {
content: attr(data-dark url);
}
/* Fallback that works in every browser (the content/attr() form above
is forward-looking). A small inline script in theme.js mirrors the
data-dark attribute into the img.src whenever a dark theme is
active. */
/* <<< seed-content.py: theme-aware brand logo */
/* === Admin action buttons — global icon / text / both switch =================
Every governed admin button renders via the component, which emits
BOTH an icon (.action-btn__icon) and a label (.action-btn__label). Which one is
shown is decided globally by data-action-buttons on , set from the site
theme setting (ThemeStudio) and broadcast live (ThemeWatcher / theme.js).
Default when the attribute is absent = icons-only (the historical look). */
.action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
}
.action-btn__icon { line-height: 1; }
/* Icons-only is the default (attribute absent or "icons"): hide the labels. */
.action-btn__label { display: none; }
html[data-action-buttons="text"] .action-btn__label,
html[data-action-buttons="both"] .action-btn__label { display: inline-block; }
/* Text-only: hide the icon (and the busy spinner, which shares the icon class). */
html[data-action-buttons="text"] .action-btn__icon { display: none; }
/* Collapse the icon↔label gap whenever only one of the two is visible. */
html[data-action-buttons="icons"] .action-btn,
html[data-action-buttons="text"] .action-btn { gap: 0; }
/* ============================================================================
HEADER ENLARGEMENT OVERRIDES — added per design request
----------------------------------------------------------------------------
Bigger header (brand name, logo, utility bar), equal-width utility actions
(cart / account / language), an enlarged "Book your appointment" CTA sized
to span those three actions, wider header page margins, and a slightly
larger h2. These selectors match the originals so source order wins.
TO REVERT: delete this entire block (everything down to the matching
"END HEADER ENLARGEMENT OVERRIDES" marker). Nothing above is modified.
Knobs are exposed as CSS variables on :root for quick tuning.
============================================================================ */
:root {
--hdr-utility-min-height: 96px; /* utility bar height (was 76px) */
--hdr-logo-height: 64px; /* brand logo height (was 48px) */
--hdr-brand-size: 2.1rem; /* brand name size (was 1.6rem) */
--hdr-action-width: 7rem; /* equal width for cart/account/lang */
--hdr-actions-gap: 0.6rem; /* gap between those three actions */
--hdr-nav-indent: 1rem; /* matches the nav link inline padding */
--hdr-page-pad: 3rem; /* header side margin (was 1.5rem) */
--hdr-h2-size: 44px; /* section heading (was 32px, then 36px) */
}
/* Identical side margins for the utility bar and the nav bar: both rows use
.site-header .container, so a single padding keeps their boxes flush. */
.site-header .container {
padding-inline: var(--hdr-page-pad);
}
/* Nav links carry their own inline padding, so the first/last link sit indented
relative to the brand/utility actions. Pull the row out by that padding so the
nav visually starts (Home) and ends (CTA) on the same x as the utility bar. */
.site-header .main-nav > .container > ul {
margin-inline-start: calc(-1 * var(--hdr-nav-indent));
}
/* Taller utility bar. */
.utility-bar-inner {
min-height: var(--hdr-utility-min-height);
}
/* Bigger logo + brand name. */
.site-header .brand {
gap: 0.8rem;
}
.site-header .brand img {
max-height: var(--hdr-logo-height);
}
.site-header .brand-name {
font-size: var(--hdr-brand-size);
}
/* Equal-size end elements (cart, my account, language switcher). */
.utility-actions {
gap: var(--hdr-actions-gap);
}
.utility-action {
box-sizing: border-box;
min-width: var(--hdr-action-width);
justify-content: center;
font-size: 0.95rem;
padding-block: 0.6rem;
}
.utility-action i {
font-size: 1.2rem;
}
.utility-action-label {
font-size: 1.2rem;
}
/* The cart keeps its trailing pad but still respects the shared min-width. */
.utility-cart {
padding-inline-end: 0.85rem;
}
/* "Book your appointment" CTA sized to span the three utility actions above it:
3 × action width + the two gaps between them. Both this button and the actions
group are flush to the same right edge, so the CTA starts at the cart's left
edge and ends at the language switcher's right edge. */
.site-header .nav-cta-btn {
box-sizing: border-box;
width: calc(var(--hdr-action-width) * 3 + var(--hdr-actions-gap) * 8);
justify-content: center;
padding: 0.8rem 1.4rem !important;
font-size: 1.2rem !important;
}
/* Slightly larger section headings. */
.section-title h2 {
font-size: var(--hdr-h2-size);
}
/* On tablet/mobile the actions collapse to icons, so drop the equal-width
constraint to avoid an over-wide utility bar. */
@media (max-width: 1199px) {
.utility-action {
min-width: 0;
}
.site-header .nav-cta-btn {
width: auto;
}
.site-header .main-nav > .container > ul {
margin-inline-start: 0;
}
}
/* ===================== END HEADER ENLARGEMENT OVERRIDES ===================== */