/*
 * Scheduler modal styling — scoped under #service-scheduler-wrapper.
 * Migrated 2026-05-14 from deleted Custom CSS+JS snippet 12749 (HTML clone, Phase-2 Tier-B backup).
 * Loaded on every frontend page via wp_enqueue_style() in child-theme functions.php.
 */

    /* =========================================================

      SERVICE SCHEDULER – FINAL UI (07-30-2025)

      Scoped CSS to prevent conflicts in WordPress

    ============================================================*/



    /* -------- Base / Typography -------- */

    #service-scheduler-wrapper *,

    #service-scheduler-wrapper *::before,

    #service-scheduler-wrapper *::after {

      box-sizing: border-box;

      font-family: 'Inter', sans-serif

    }



    /* -------- NEW helper classes for former headings -------- */

    #service-scheduler-wrapper .heading {

      font-weight: 700;

      line-height: 1.2;

      margin: 0

    }



    #service-scheduler-wrapper .heading--h2 {

      font-size: 22px

    }



    #service-scheduler-wrapper .heading--h3 {

      font-size: 22px

    }



    #service-scheduler-wrapper .heading--h4 {

      font-size: 18px

    }



    @media(max-width:480px) {



      #service-scheduler-wrapper .heading--h2,

      #service-scheduler-wrapper .heading--h3 {

        font-size: 20px

      }

    }



    /* -------- Buttons -------- */

    #service-scheduler-wrapper .btn,

    #service-scheduler-wrapper .option-box {

      cursor: pointer;

      border: none;

      font-weight: 600;

      border-radius: 8px;

      transition: background .3s, color .3s, border .25s;

      min-height: 44px;

      line-height: 1.2;

      user-select: none

    }



    #service-scheduler-wrapper .btn-outline {

      background: transparent !important;

      color: #6b7280 !important

    }



    #service-scheduler-wrapper .btn-outline:hover {

      background: #f9fafb

    }



    #service-scheduler-wrapper .btn-next {

      background: transparent !important;

      color: #ce0000 !important

    }



    #service-scheduler-wrapper .btn-next:hover {

      background: #fff5f5

    }



    #service-scheduler-wrapper .btn-next::after {

      content: "→";

      margin-left: 6px

    }



    #service-scheduler-wrapper .btn-success {

      background: #FDDE67 !important;

      color: #ce0000 !important;

      border: 2px solid #1e2f3d !important

    }



    #service-scheduler-wrapper .btn-success:hover {

      background: #FDDE67 !important

    }



    #service-scheduler-wrapper #prev-btn::before {

      content: "←";

      margin-right: 6px

    }



    #service-scheduler-wrapper .open-modal {

      cursor: pointer;

    }



    /* -------- Modal Shell -------- */

    #service-scheduler-wrapper .modal {

      position: fixed;

      inset: 0;

      display: none;

      justify-content: center;

      align-items: center;

      background: rgba(0, 0, 0, .6);

      z-index: 1000;

      padding: 10px

    }



    #service-scheduler-wrapper .modal.active {

      display: flex

    }



    #service-scheduler-wrapper .modal-content {

      background: #fff;

      border-radius: 12px;

      width: 95%;

      max-width: 600px;

      max-height: 90vh;

      display: flex;

      flex-direction: column;

      overflow: hidden;

      box-shadow: 0 25px 50px rgba(0, 0, 0, .2);

      animation: fadeInModal .45s cubic-bezier(.4, 2, .4, 1);

      padding: 10px 20px

    }



    @keyframes fadeInModal {

      from {

        transform: scale(.9) translateY(40px);

        opacity: 0

      }



      to {

        transform: scale(1) translateY(0);

        opacity: 1

      }

    }



    /* -------- Modal Header / Footer -------- */

    #service-scheduler-wrapper .modal-header,

    #service-scheduler-wrapper .modal-footer {

      padding: 20px 0;

      display: flex;

      align-items: center

    }



    #service-scheduler-wrapper .modal-header {

      border-bottom: 1px solid #e2e8f0

    }



    #service-scheduler-wrapper .modal-footer {

      border-top: 1px solid #e2e8f0;

      justify-content: space-between;

      gap: 12px

    }



    #service-scheduler-wrapper .modal-title {

      font-size: 22px;

      font-weight: 700;

      margin: 0

    }



    #service-scheduler-wrapper .close-button {

      margin-left: auto;

      font-size: 26px;

      background: none;

      color: #64748b;

      border: none;

      padding: 8px;

      border-radius: 8px

    }



    #service-scheduler-wrapper .close-button:hover {

      background: rgba(0, 0, 0, .05)

    }



    /* -------- Progress bar -------- */

    #service-scheduler-wrapper .progress-bar {

      padding: 8px;

      border-bottom: 1px solid #e2e8f0

    }



    #service-scheduler-wrapper .progress-steps {

      display: flex;

      justify-content: space-between;

      align-items: center

    }



    #service-scheduler-wrapper .step {

      display: flex;

      align-items: center;

      flex: 1

    }



    #service-scheduler-wrapper .step-circle {

      width: 32px;

      height: 32px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 600;

      font-size: 14px;

      margin-right: 10px

    }



    #service-scheduler-wrapper .step-circle.active {

      background: #253F58 !important;

      color: #fff

    }



    #service-scheduler-wrapper .step-circle.completed {

      background: #e30f1e !important;

      color: #fff

    }



    #service-scheduler-wrapper .step-circle.inactive {

      background: #e5e7eb;

      color: #6b7280

    }



    #service-scheduler-wrapper .step-connector {

      height: 2px;

      background: #e5e7eb;

      flex: 1;

      margin: 0 12px

    }



    /* -------- Panels / Forms -------- */

    #service-scheduler-wrapper .tab-content {

      flex: 1;

      padding: 28px;

      overflow-y: auto

    }



    #service-scheduler-wrapper .tab-panel {

      display: none

    }



    #service-scheduler-wrapper .tab-panel.active {

      display: block;

      animation: fadeIn .3s ease

    }



    @keyframes fadeIn {

      from {

        opacity: 0;

        transform: translateY(10px)

      }



      to {

        opacity: 1;

        transform: translateY(0)

      }

    }



    #service-scheduler-wrapper .tab-header {

      text-align: center;

      margin-bottom: 28px

    }



    #service-scheduler-wrapper .tab-title {

      font-size: 22px;

      font-weight: 700;

      margin: 0

    }



    #service-scheduler-wrapper .tab-subtitle {

      color: #64748b;

      margin-top: 6px

    }



    #service-scheduler-wrapper .form-group {

      margin-bottom: 22px

    }



    #service-scheduler-wrapper .form-label {

      display: block;

      margin-bottom: 6px;

      font-weight: 600

    }



    #service-scheduler-wrapper .form-input {

      width: 100%;

      padding: 14px 16px;

      border: 2px solid #e5e7eb;

      border-radius: 8px;

      font-size: 16px;

      transition: border .2s;

      background: #fff

    }



    #service-scheduler-wrapper .form-input:focus {

      border-color: #253F58;

      outline: none

    }



    #service-scheduler-wrapper .field-error {

      border-color: #e30f1e !important;

      background: #fff5f5

    }



    #service-scheduler-wrapper .error-text {

      color: #e30f1e;

      font-size: 14px;

      margin-top: 6px

    }



    #service-scheduler-wrapper .shake {

      animation: shake .4s;

      border-color: #e30f1e !important

    }



    @keyframes shake {



      0%,

      100% {

        transform: translateX(0)

      }



      20%,

      60% {

        transform: translateX(-10px)

      }



      40%,

      80% {

        transform: translateX(10px)

      }

    }



    /* -------- Option Boxes -------- */

    #service-scheduler-wrapper .option-grid {

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

      gap: 12px

    }



    #service-scheduler-wrapper .option-box {

      border: 2px solid #e5e7eb;

      border-radius: 10px;

      padding: 14px 18px;

      text-align: center

    }



    #service-scheduler-wrapper .option-box:hover {

      background: #f9fafb

    }



    #service-scheduler-wrapper .option-box.selected {

      border-color: #253F58;

      background: #f8fafc

    }



    /* -------- Confirmation cards -------- */

    #service-scheduler-wrapper .confirmation-card {

      background: #f8fafc;

      border-radius: 12px;

      padding: 20px;

      margin-bottom: 20px

    }



    #service-scheduler-wrapper .confirmation-title {

      font-weight: 700;

      margin: 0 0 14px;

      display: flex;

      align-items: center;

      color: #1e293b

    }



    #service-scheduler-wrapper .confirmation-icon {

      margin-right: 6px

    }



    #service-scheduler-wrapper .confirmation-item {

      display: flex;

      justify-content: space-between;

      margin-bottom: 6px

    }



    #service-scheduler-wrapper .confirmation-label {

      color: #64748b

    }



    #service-scheduler-wrapper .confirmation-value {

      font-weight: 600

    }



    /* -------- Success popup -------- */

    #service-scheduler-wrapper #success-popup .modal-content {

      max-width: 350px;

      width: 90%;

      padding: 30px 22px;

      text-align: center;

      border-radius: 12px

    }



    #service-scheduler-wrapper #success-popup .heading--h4 {

      font-size: 18px

    }



    /* -------- Responsive tweaks -------- */

    @media(max-width:480px) {

      #service-scheduler-wrapper .modal-content {

        max-width: none;

        width: 100%;

        border-radius: 10px;

        max-height: 95vh

      }



      #service-scheduler-wrapper .tab-content {

        padding: 20px

      }



      #service-scheduler-wrapper .tab-title {

        font-size: 20px

      }



      #service-scheduler-wrapper .tab-subtitle {

        font-size: 14px

      }



      #service-scheduler-wrapper .confirmation-card {

        padding: 16px

      }



      #service-scheduler-wrapper .confirmation-item {

        flex-direction: column;

        align-items: flex-start

      }



      #service-scheduler-wrapper .progress-steps {

        gap: 12px

      }



      #service-scheduler-wrapper .step-connector {

        display: none

      }



      #service-scheduler-wrapper .step-circle {

        width: 28px;

        height: 28px;

        margin-right: 8px;

        font-size: 13px

      }



      #service-scheduler-wrapper .modal-footer {

        flex-direction: column;

        gap: 10px;

        padding: 16px

      }



      #service-scheduler-wrapper .btn {

        width: 100%;

        font-size: 15px

      }

    }