@charset "utf-8";

/*
    Theme "Soft Original" (white38)

    The established white31 palette with softer corners, shadows and control
    treatment. The complete theme is kept in this file without CSS imports.

    Test with: /booking/?theme=white38
*/

:root {
    /* Local design tokens. Only used inside this file, so the shared themes stay untouched. */
    --panel-radius: 14px;
    --panel-shadow: 0 1px 2px rgba(23, 30, 42, 0.05), 0 10px 24px -18px rgba(23, 30, 42, 0.45);
    --panel-shadow-soft: 0 1px 2px rgba(23, 30, 42, 0.04), 0 6px 16px -14px rgba(23, 30, 42, 0.4);
    --accent: #6fa0d0;
    --accent-darker: #5790c9;

    /* Bootstrap derives every component radius from these, so raising them here
       rounds buttons, inputs, cards, accordions and modals in one step. */
    --bs-border-radius: 0.6rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-border-radius-xl: 1rem;

    --font-color: #333333;
    --font-color-lighter: #666666;
    --font-color-heading: #333333;
    --font-family: 'Open Sans', Helvetica, Arial, sans-serif;

    --link-color: #3f79ad;
    --link-color-hover: #326895;
    --link-color-nav: #555555;
    --link-color-nav-two: #444444;

    --body-color: #a6afd2;
    --body-gradient-start: #d2aea3;
    --body-gradient-middle: #9f9fce;
    --body-gradient-end: #8eb5be;
    --body-background: linear-gradient(90deg, var(--body-gradient-start) 0%, var(--body-gradient-middle) 52%, var(--body-gradient-end) 100%);

    /* Keep the established horizontal surface gradients of the original theme. */
    --items-background-start: #e5e9f3;
    --items-background-end: #d9deee;
    --items-background: linear-gradient(90deg, var(--items-background-start) 0%, var(--items-background-end) 100%);
    --nav-background-start: #dfe4ef;
    --nav-background-end: #d6dbee;
    --nav-background: linear-gradient(90deg, var(--nav-background-start) 0%, var(--nav-background-end) 100%);
    --side-header-background: var(--nav-background);

    --color-one: #fefefe;
    --color-two: #dce0ea;
    --color-three: #dce0ea;
    --color-four: #ffffff;
    --session-color: #ffffff;

    /* Decorative separators are hairlines now. Form controls get their own,
       darker border below so they stay above the 3:1 contrast requirement. */
    --bs-border-color: #b5bbc7;
    --input-border-color: #d4dbe7;

    --font-button-color: #ffffff;
    --font-button-outline-color: #3f79ad;

    /* The darker blue keeps white primary-button labels at AA contrast. */
    --btn-color-one: #6697c7;
    --btn-color-one-border: #6697c7;
    --btn-color-one-darker: #4d85bd;
    --btn-color-one-border-darker: #4d85bd;

    --font-button-secondary-color: #333333;
    --btn-color-two: #e2e5ed;
    --btn-color-two-border: #b5bcc5;
    --btn-color-two-darker: #d6dae5;
    --btn-color-two-border-darker: #69717e;

    --font-button-danger-color: #97323b;
    --btn-color-danger: #fdeef0;
    --btn-color-danger-border: #b45b64;
    --btn-color-danger-darker: #f8dfe3;
    --btn-color-danger-border-darker: #a44d56;

    --font-badge-color: #ffffff;
    --font-badge-two-color: #ffffff;
    --color-badge: var(--accent);
    --color-badge-two: #74ab90;

    --font-success-color: #2b6047;
    --color-green: #e9f4ee;
    --color-green-border: #4c8065;
    --color-green-darker: #dbebe2;

    --font-error-color: #97323b;
    --color-red: #fdeef0;
    --color-red-border: #b45b64;

    --font-warning-color: #7d4426;
    --color-orange: #fdf1e8;
    --color-orange-border: #b0724a;

    --font-gray-color: #333333;
    --color-gray: #e2e5ed;
    --color-gray-border: #777f8b;

    /* mui.css consumes these theme hooks after this file has loaded. */
    --theme-warning-color: #fdf1e8;
    --warning-foreground: #7d4426;
    --warning-text-color: #8a4a29;
    --theme-error-color: #fdeef0;
    --error-foreground: #97323b;
    --theme-notice-color: #e8f0f9;
    --notice-foreground: #27527f;
    --theme-confirmation-color: #e9f4ee;
    --confirmation-foreground: #2b6047;
}

/* mui.css declares these tokens after the theme, so a doubled :root is needed to win. */
:root:root {
    --focus-color: #5790c9;
    --color-white: #fefefe;
    --color-white-two: #dce0ea;
    --color-dark: #333333;
}

body {
    background: var(--body-background, var(--body-color));
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color-hover);
}

.navbar {
    box-shadow: var(--panel-shadow-soft);
}

.navbar-toggler,
.basket-icon,
.reset-icon {
    filter: brightness(0) saturate(100%) opacity(0.72) !important;
}

.session {
    border: 1px solid var(--bs-border-color);
}

.session-date .date {
    color: var(--font-color);
}

#homeView .h5 {
    color: #ffffff;
    letter-spacing: -0.01em;
}

.accordion-item {
    border-width: 0;
}

/* Bootstrap ships the chevron as a data URI in its own brand blue, so both
   states are restated in the theme palette. */
.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2359616b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f6ba3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.filter .accordion-item {
    background-color: var(--color-four) !important;
}

/* Bootstrap 5.2 still hard-codes a low-contrast input border instead of using its root token. */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--input-border-color);
}

/* Bootstrap's default focus ring is its own brand blue; align it with the theme accent. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(111, 160, 208, 0.2);
}

.btn-success:hover,
.btn-success:focus {
    color: var(--font-success-color);
    background-color: var(--color-green-darker) !important;
    border-color: var(--color-green-border) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--font-button-secondary-color) !important;
    background-color: var(--btn-color-two-darker) !important;
    border-color: var(--btn-color-two-border-darker) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    color: var(--font-button-danger-color) !important;
    background-color: var(--btn-color-danger-darker) !important;
    border-color: var(--btn-color-danger-border-darker) !important;
}

/* ---------------------------------------------------------------------------
   Modern polish. Surface treatment only: radii, shadows and transitions.
   No box model or positioning is touched, so the layout stays identical.
   --------------------------------------------------------------------------- */

/* .rounded carries Bootstrap's !important, so the panel radius needs it as well. */
#defaultView,
#loginView,
#calendarView,
.main.rounded,
#bookingBasketSummary.rounded {
    border-radius: var(--panel-radius) !important;
}

#defaultView,
#loginView,
#calendarView,
#homeView .main {
    box-shadow: var(--panel-shadow);
}

/* mui.css gives the banner its own radius and shadow after the theme has loaded. */
body .home-info-banner {
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
}

/* Clipping the accordions keeps the rounded corners clean behind the header button. */
.filter .accordion-item,
.side .accordion-item {
    overflow: hidden;
    box-shadow: var(--panel-shadow-soft);
}

#fixed-bottom-bar,
#fixed-cart-button-side-bar-div {
    box-shadow: var(--panel-shadow);
}

.btn,
.accordion-button,
.form-control,
.form-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
                color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media only screen and (min-width: 768px) {
    .navbar {
        border-radius: var(--panel-radius);
    }

    body .footer {
        border-radius: var(--panel-radius);
    }
}

/* mui.css loads after the theme, so its footer radii need the extra body selector. */
body .footer {
    border-top-left-radius: var(--panel-radius);
    border-top-right-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow-soft);
}

/* --- Neutral greys that mui.css hard-codes, retinted to the theme palette --- */

body input {
    color: var(--font-color);
}

body .label,
body .form-label,
body .filter-label,
body .quiet,
body .chair-icon {
    color: var(--font-color-lighter);
}

body .side-nav-header,
body .fixed-cart-msg {
    color: var(--font-color-lighter) !important;
}

body .session-first {
    color: var(--font-color);
}

body #defaultView .session-title {
    color: var(--font-color-lighter);
}

body #defaultView .session-title .date,
body #defaultView .session-title .time {
    color: var(--accent);
}

body #homeView .session .card {
    border-top: 1px solid var(--bs-border-color) !important;
    background-color: #f7f9fc !important;
}

body .home-basket-summary-row {
    background-color: rgba(76, 128, 101, 0.07);
}

body .error,
body .error-notification,
body .error-message,
body .error-listing {
    color: var(--font-error-color) !important;
}

body .error-notification li {
    color: var(--font-color-lighter) !important;
}

/* Same 2px border width as before, so flagging a field never shifts the layout. */
body .has-error {
    background: var(--color-red);
    border: 2px solid var(--color-red-border);
}

body .tooltip .tooltip-inner,
body .tooltip .tooltip-arrow::before {
    --bs-tooltip-bg: #2b323c;
}

/* Keep the header and content visually continuous inside the rounded panels. */
body .accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* The source icon is white, which disappears on this theme's pale danger button. */
body .btn-danger img.delete {
    filter: brightness(0) saturate(100%) invert(24%) sepia(30%) saturate(2127%)
            hue-rotate(306deg) brightness(91%) contrast(89%);
}