/*---------------------------------------------
  TYPOGRAPHY & SPACING – Unified, Readable UX
-----------------------------------------------*/

/* Paragraphs */
.trafft-booking-website p,
p {
    margin-bottom: 4px !important;
}

/* ---------------------------------------------
   SERVICE DESCRIPTION CARD VISUAL STYLE
----------------------------------------------- */

.service_de__description__content {
    font-family: 'Roboto', 'Arial', sans-serif;
    color: #38414a;
    font-size: 1.09em;
    line-height: 1.68;
    background: #fcfcfe;
    border-radius: 10px;
    padding: 20px 28px 20px 28px;
    margin-bottom: 4px;
    box-shadow: 2px 4px 18px #eceff7, -2px -2px 9px #fff;
    letter-spacing: 0.01em;
}

/* Space and soften paragraphs */
.service_de__description__content p {
    margin-bottom: 4px;
    margin-top: 0px;
    color: inherit;
}

/* Highlighted strong text for calls-to-action */
.service_de__description__content strong {
    color: #45b163;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Extra: soften line break-only paragraphs */
.service_de__description__content p:empty,
.service_de__description__content p:only-child:empty {
    margin-bottom: 0px;
}

/* Headings */
.trafft-booking-website h1,
h1 { margin-bottom: 16px !important; }
.trafft-booking-website h2,
h2 { margin-bottom: 12px !important; }
.trafft-booking-website h3,
h3 { margin-bottom: 8px !important; }

/* Lists */
.trafft-booking-website li,
li { margin-bottom: 8px !important; }

/* Blockquotes for callouts, testimonials, etc */
.trafft-booking-website blockquote,
blockquote {
    margin-bottom: 20px !important;
    margin-top: 18px !important;
    padding-left: 18px;
    border-left: 4px solid #45b163;
    background: #f7f7fb;
    font-style: italic;
    color: #38414a;
}

/* Enhanced checklist icons */
.service_de__description__content ul li::marker {
    content: "✔ ";
    color: #45b163;
    font-size: 1.25em;
    font-weight: bold;
}

/*---------------------------------------------
  HIDING FIELDS, END TIMES, AND EXTRAS
-----------------------------------------------*/

/* Hide post-booking/booking section fields as needed */
.bs-dt .booking-ts div:last-child,
.bs-dt .booking-ts > span,
.bs-service-card-dc__item__label.par-sm + span,
.bs-service-card-dc__item__label.par-sm + div,
.bs-service-card-dc__item__label.par-sm,
.bs-service-card-dc__item__label.par-sm + span,
.service-dg-dcl__item:has(.ui-icon-clock),
.service-card-dc,
.m-phone-number-input__select {
    display: none !important;
}
.header.with-shadow {
  height: 40px !important; /* Set the height to 40 pixels */
}
/* Sticky Category Section on Mobile */
@media (max-width: 700px) {
  .ser-cat-filter {
    position: sticky;
    top: 0px;
    z-index: 10;
    background: #f7faff;
    box-shadow: 0 2px 12px #eaeef3;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}
.booking-details-body__item__content .sub.text-graphite {
    display: none !important;
}

/*---------------------------------------------
  MORPHISM DESIGN – FORM CARD & LABELS
-----------------------------------------------*/

/* Main morphism card for booking forms/steps */
.booking__wrapper__content {
    background: #f7faff;
    border-radius: 16px;
    box-shadow:
        8px 12px 36px #e6eef7,
        -6px -6px 18px #fff;
    padding: 38px 16px 16px 16px;
    margin: 0 auto 16px auto;
    max-width: 690px;
    min-width: 270px;
    transition: box-shadow 0.22s, background 0.15s;
}

/* Optional: subtle animation/elevation on focus within any input */
.booking__wrapper__content:focus-within {
    box-shadow:
        0 0 0 10px #b7ebdc33,
        8px 12px 38px #e7edf8,
        -7px -7px 17px #fff !important;
    background: #fafdff !important;
    animation: morph-pop 0.20s;
}

@media (max-width: 700px) {
    .booking__wrapper__content {
        padding: 16px 4vw 10vw 4vw;
        border-radius: 9px;
    }
}

/* Main morphism for form container/groups */
.el-form-item,
.el-form-item.is-required,
.el-form-item.asterisk-left,
.el-form-item.ui-form-item {
    background: #f2f3f7 !important;       /* Guaranteed neutral */
    background-color: #f2f3f7 !important;
    background-image: none !important;
    filter: none !important;
    --color-surface: #f2f3f7 !important;  /* CSS var safety net */
    border-radius: 6px !important;
    box-shadow: 6px 6px 18px #e3e3ee, -6px -6px 12px #fff, 0 2px 4px rgba(80,80,100,0.08) !important;
    padding: 18px 16px 14px 16px !important;
    margin-bottom: 12px !important;
    border: none !important;
    transition: box-shadow 0.22s, background 0.15s !important;
    position: relative !important;
    z-index: 1;
}

/* Glowing morphism border when active/focus for accessibility */
.el-form-item:focus-within {
    box-shadow:
        0 0 0 4px #b7ebdc,
        6px 6px 18px #e3e3ee,
        -6px -6px 12px #fff !important;
    background: #fafffc !important;
    animation: morph-pop 0.19s;
}

/* Field label style: floating, soft morph pill */
.el-form-item__label {
    display: inline-block;
    background: #f2f3f7 !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    margin-bottom: 4px !important;
    margin-left: 8px;
    font-weight: 600;
    font-size: 1em;
    color: #38414a !important;
    box-shadow: 2px 2px 8px #e2e7ef, -2px -2px 4px #ffffff !important;
    transition: box-shadow 0.18s, background 0.14s, color 0.13s;
    border: none !important;
    letter-spacing: 0.01em;
}

/* Error State: red tint, red accent label for instant feedback */
.el-form-item.is-error {
    box-shadow: 0 0 0 3px #fcaaa9, 6px 6px 18px #e3e3ee, -6px -6px 12px #fff !important;
    background: #fcf4f4 !important;
}
.el-form-item.is-error .el-form-item__label {
    color: #b81414 !important;
    background: #fff0f0 !important;
    box-shadow: 0 0 0 2px #fdcfcf, 2px 2px 8px #f2e2e7, -2px -2px 4px #fff2f2 !important;
}

/* Remove accidental "required" asterisks */
.el-form-item.is-required::after,
.el-form-item .asterisk-left {
    content: "";
    display: none !important;
}

/*---------------------------------------------
  MORPHISM STYLE – HEADINGS
-----------------------------------------------*/

.trafft-booking-website h2, .trafft-booking-website h3 {
    border-left: 5px solid #45b163;
    padding-left: 16px;
    background: #f9fff9;
}

/* Indented checklist icon padding */
.trafft-booking-website ul li { position: relative; padding-left: 16px; }

/*---------------------------------------------
  ANIMATION POLISH
-----------------------------------------------*/
@keyframes morph-pop {
    0% { box-shadow: 0 0 0 0 #b7ebdc, 6px 6px 18px #e3e3ee, -6px -6px 12px #fff; }
    100% { box-shadow: 0 0 0 4px #b7ebdc, 6px 6px 18px #e3e3ee, -6px -6px 12px #fff; }
}

/*---------------------------------------------
  MOBILE RESPONSIVENESS
-----------------------------------------------*/
@media (max-width: 600px) {
    .el-form-item {
        border-radius: 8px !important;
        padding: 10px 8px !important;
        margin-bottom: 6px !important;
    }
    .el-form-item__label {
        font-size: 0.96em !important;
        padding: 3px 10px !important;
        border-radius: 7px !important;
        margin-left: 4px !important;
    }
    .el-form-item__content {
        padding: 10px 8px !important;
    }
    blockquote, .trafft-booking-website blockquote {
        padding-left: 9px !important;
        font-size: 0.96em !important;
    }
    .trafft-booking-website h2, .trafft-booking-website h3 {
        padding-left: 8px !important;
        font-size: 1.11em !important;
    }
}

/*---------------------------------------------
  END OF STYLE
-----------------------------------------------*/