/* =====================================================
   AMS — CLEAN, STABLE, NON-REVERTING UI
===================================================== */

#ams-app {
    font-family: 'DM Sans', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

/* =====================================================
   FORM CONTAINER
===================================================== */

#ams-app .ams-form {
    background-color: #1A5D37;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px;
    border-radius: 18px;
}

/* =====================================================
   HEADINGS & LABELS
===================================================== */

#ams-app h1,
#ams-app h2,
#ams-app h3 {
    color: #FFFFFF;
}

#ams-app h1 {
    font-size: 26px;
    font-weight: 700;
}

#ams-app h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 26px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    padding-bottom: 6px;
}

#ams-app label {
    color: #EAF5EF;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

/* =====================================================
   INPUTS / SELECTS (FINAL FIX)
===================================================== */

#ams-app input:not([type="file"]),
#ams-app select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;

    background-color: #FFFFFF;
    color: #1A5D37;
    -webkit-text-fill-color: #1A5D37;

    border: 1px solid rgba(26,93,55,0.45);
    font-size: 15px;
}

/* =====================================================
   FILE INPUT (FULL WIDTH + CLEANER LOOK)
===================================================== */

#ams-app input[type="file"] {
    width: 100%;
    display: block;
    box-sizing: border-box;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #FFFFFF;
    color: #1A5D37;
    -webkit-text-fill-color: #1A5D37;
    border: 1px dashed rgba(26,93,55,0.45);
}

#ams-app input::placeholder {
    color: rgba(26,93,55,0.6);
}

#ams-app input:focus,
#ams-app select:focus {
    outline: none;
    border-color: #1A5D37;
    box-shadow: 0 0 0 2px rgba(26,93,55,0.25);
}

/* =====================================================
   DATE INPUT
===================================================== */

#ams-app input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    width: 24px;
    height: 24px;
}

/* =====================================================
   SLOT GRID
===================================================== */

#ams-app #slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin: 16px 0 20px;
}

/* =====================================================
   SLOT BUTTONS — SINGLE SOURCE OF TRUTH
===================================================== */

#ams-app button.slot {
    background-color: #0F3E25;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;

    border: 2px solid rgba(255,255,255,0.45);
    border-radius: 10px;

    min-height: 46px;
    padding: 10px;

    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover */
#ams-app button.slot:hover:not(.taken):not(.selected) {
    background-color: #16603A;
}

/* ✅ SELECTED SLOT — ALWAYS WHITE, NO DARKENING */
#ams-app button.slot.selected,
#ams-app button.slot.selected:hover,
#ams-app button.slot.selected:focus,
#ams-app button.slot.selected:active {
    background-color: #ffffff !important;
    color: #1A5D37 !important;
    -webkit-text-fill-color: #1A5D37 !important;

    border: 3px solid #1A5D37 !important;
    box-shadow: 0 0 0 3px rgba(26,93,55,0.35) !important;

    filter: none !important;
    opacity: 1 !important;
}

/* ❌ TAKEN */
#ams-app button.slot.taken,
#ams-app button.slot:disabled {
    background-color: #6B8F7A;
    color: rgba(255,255,255,0.65);
    -webkit-text-fill-color: rgba(255,255,255,0.65);

    border: 2px dashed rgba(255,255,255,0.35);
    cursor: not-allowed;
    opacity: 0.6;
}

/* =====================================================
   BOOKING SUMMARY
===================================================== */

#ams-app .ams-summary {
    background-color: #FFFFFF;
    color: #1A5D37;
    border-radius: 14px;
    padding: 16px;
    margin-top: 22px;
}

#ams-app .ams-summary * {
    color: #1A5D37;
}

/* =====================================================
   SUMMARY LINE ITEMS (SLOT + PRICE)
===================================================== */

#ams-app .ams-lines {
    margin-top: 10px;
    border-top: 1px solid rgba(26,93,55,0.18);
}

#ams-app .ams-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26,93,55,0.12);
}

#ams-app .ams-line__left {
    font-weight: 700;
    font-size: 14px;
}

#ams-app .ams-line__right {
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
}

#ams-app .ams-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    margin-top: 6px;
    font-weight: 900;
    font-size: 18px;
}

/* =====================================================
   CONFIRM MODAL
===================================================== */

body.ams-modal-open {
    overflow: hidden; /* desktop */
    position: fixed;  /* iOS/Android: hard lock background scroll */
    width: 100%;
}

#ams-app .ams-modal {
    isolation: isolate;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    overflow: auto; /* allow modal content to scroll if panel is tall */
    overscroll-behavior: contain;
}

#ams-app .ams-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
    pointer-events: auto;
}

#ams-app .ams-modal__panel {
    position: relative;
    width: min(680px, calc(100% - 28px));
    margin: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    font-size: 15px;

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 28px);
    z-index: 1;
    pointer-events: auto;
}

#ams-app .ams-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

#ams-app .ams-modal__header h3 {
    margin: 0;
    padding: 0;
    border: none;
    color: #1A5D37;
    font-size: 16px;
}

#ams-app .ams-modal__x {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    color: #1A5D37;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#ams-app .ams-modal__x:hover {
    background: rgba(26,93,55,0.06);
    border-color: rgba(26,93,55,0.18);
}

#ams-app .ams-modal__body {
    padding: 14px 16px 16px;
    color: #1A5D37;

    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#ams-app .ams-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-bottom: 14px;
}

#ams-app .ams-modal__field {
    background: rgba(26,93,55,0.06);
    border: 1px solid rgba(26,93,55,0.10);
    border-radius: 12px;
    padding: 10px 12px;
}

#ams-app .ams-modal__label {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.75;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

#ams-app .ams-modal__value {
    font-size: 13px;
    font-weight: 800;
    white-space: pre-line;
}

#ams-app .ams-modal__section {
    margin-top: 10px;
}

#ams-app .ams-mlines {
    border-top: 1px solid rgba(26,93,55,0.16);
}

#ams-app .ams-mline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(26,93,55,0.10);
}

#ams-app .ams-mline__right {
    white-space: nowrap;
}

#ams-app .ams-modal__total {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(26,93,55,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ams-app .ams-modal__total .ams-modal__value {
    font-size: 16px;
    font-weight: 900;
}

#ams-app .ams-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fff;
}


/* =====================================================
   CONFIRM MODAL (GLOBAL OVERRIDES)
   NOTE: Modal is appended to <body> to escape theme stacking contexts.
   These rules mirror the #ams-app-scoped ones so styling is preserved.
===================================================== */

.ams-modal {
    isolation: isolate;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    overflow: auto;
    overscroll-behavior: contain;
}

.ams-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
    pointer-events: auto;
}

.ams-modal__panel {
    position: relative;
    width: min(680px, calc(100% - 28px));
    margin: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    font-size: 13px;

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 28px);
    z-index: 1;
    pointer-events: auto;
}

.ams-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #fff;
}

.ams-modal__header h3 {
    margin: 0;
    padding: 0;
    border: none;
    color: #1A5D37;
    font-size: 16px;
}

.ams-modal__x {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    color: #1A5D37;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ams-modal__body {
    padding: 14px 16px 16px;
    color: #1A5D37;
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.ams-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fff;
}

/* Make CTAs easier to tap, especially on mobile */
.ams-modal__footer .button,
.ams-modal__footer .button-primary {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    min-height: 44px;
    height: auto;
    box-shadow: none;
}

/* Mobile layout: full-width buttons */
@media (max-width: 520px) {
    .ams-modal__panel {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 16px;
    }
    .ams-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }
    .ams-modal__footer .button,
    .ams-modal__footer .button-primary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* =====================================================
   MODAL CTA BUTTONS (MORE APPEALING)
===================================================== */

#ams-app .ams-modal__footer .button,
#ams-app .ams-modal__footer .button-primary {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    min-height: 44px;
    height: auto;
    box-shadow: none;
}

#ams-app #amsModalEdit {
    background: #ffffff;
    color: #1A5D37;
    border: 1px solid rgba(26,93,55,0.35);
}

#ams-app #amsModalEdit:hover {
    background: rgba(26,93,55,0.06);
    border-color: rgba(26,93,55,0.5);
}

#ams-app #amsModalProceed {
    background: #1A5D37;
    color: #ffffff;
    border: 1px solid #1A5D37;
}

#ams-app #amsModalProceed:hover {
    background: #134c2d;
    border-color: #134c2d;
}

#ams-app #amsModalProceed[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    #ams-app .ams-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }
    #ams-app .ams-modal__footer .button,
    #ams-app .ams-modal__footer .button-primary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    #ams-app .ams-modal__grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SUBMIT BUTTON
===================================================== */

#ams-app #submit {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;

    background-color: #FFFFFF;
    color: #1A5D37;
    border-radius: 14px;
    border: none;
    cursor: pointer;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {

    #ams-app .ams-form {
        padding: 18px 14px;
    }

    #ams-app #slots {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    }

    #ams-app button.slot {
        font-size: 13px;
    }
}

/* =====================================================
   🚫 KILL ALL NATIVE BUTTON STATES (FINAL FIX)
   This stops browser & theme darkening permanently
===================================================== */

#ams-app button.slot {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;

    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;

    transition: none !important; /* ⛔ stop active animation */
}

/* 🔒 FORCE COLOR IN ALL STATES */
#ams-app button.slot,
#ams-app button.slot:hover,
#ams-app button.slot:focus,
#ams-app button.slot:active,
#ams-app button.slot:focus-visible {
    background-color: #0F3E25 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ✅ SELECTED — PURE WHITE, NEVER DARK */
#ams-app button.slot.selected,
#ams-app button.slot.selected:hover,
#ams-app button.slot.selected:focus,
#ams-app button.slot.selected:active,
#ams-app button.slot.selected:focus-visible {
    background-color: #FFFFFF !important;
    color: #1A5D37 !important;
    -webkit-text-fill-color: #1A5D37 !important;

    border: 3px solid #1A5D37 !important;
    box-shadow: 0 0 0 3px rgba(26,93,55,0.35) !important;

    filter: none !important;
    opacity: 1 !important;
}

/* ❌ TAKEN — DIMMED BUT READABLE */
#ams-app button.slot.taken,
#ams-app button.slot.taken:hover,
#ams-app button.slot.taken:active,
#ams-app button.slot:disabled {
    background-color: #6B8F7A !important;
    color: rgba(255,255,255,0.65) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.65) !important;

    border: 2px dashed rgba(255,255,255,0.35) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* =====================================================
   ✅ SLOT VISUAL STATE FIX (DIV-BASED SLOTS)
   This matches the current JS structure
===================================================== */

/* BASE SLOT */
#ams-app .slot {
    background-color: #0F3E25 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border: 2px solid rgba(255,255,255,0.45) !important;
    border-radius: 10px !important;

    min-height: 46px;
    padding: 10px !important;

    font-weight: 700 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    line-height: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease, border 0.15s ease !important;
}

/* HOVER (AVAILABLE ONLY) */
#ams-app .slot:hover:not(.taken):not(.selected) {
    background-color: #16603A !important;
}

/* ✅ SELECTED SLOT — CLEAR & OBVIOUS */
#ams-app .slot.selected {
    background-color: #FFFFFF !important;
    color: #1A5D37 !important;
    -webkit-text-fill-color: #1A5D37 !important;

    border: 3px solid #1A5D37 !important;
    box-shadow: 0 0 0 3px rgba(26,93,55,0.35) !important;

    opacity: 1 !important;
}

/* ❌ TAKEN SLOT */
#ams-app .slot.taken {
    background-color: #6B8F7A !important;
    color: rgba(255,255,255,0.65) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.65) !important;

    border: 2px dashed rgba(255,255,255,0.35) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* =====================================================
   📐 SLOT GRID — NO TEXT WRAP EVER
===================================================== */

#ams-app #slots {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 10px !important;
}

/* MOBILE */
@media (max-width: 640px) {
    #ams-app #slots {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
    }

    #ams-app .slot {
        font-size: 13px !important;
    }
}

/* =====================================================
   🔥 CONFIRM BOOKING BUTTON — FINAL, OVERRIDE-PROOF
===================================================== */

/* 🚫 REMOVE ALL THEME / BROWSER STATES */
html body #ams-app button#submit,
html body #ams-app button#submit:hover,
html body #ams-app button#submit:focus,
html body #ams-app button#submit:active,
html body #ams-app button#submit:focus-visible {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ❌ DISABLED (BEFORE READY) */
html body #ams-app button#submit:disabled {
    background-color: rgba(255,255,255,0.4) !important;
    color: rgba(26,93,55,0.55) !important;
    -webkit-text-fill-color: rgba(26,93,55,0.55) !important;

    border: 2px dashed rgba(255,255,255,0.6) !important;
    cursor: not-allowed !important;
}

/* ✅ ENABLED — CLEAR & VISIBLE */
html body #ams-app button#submit:not(:disabled) {
    background-color: #0F3E25 !important;   /* DARK GREEN */
    color: #FFFFFF !important;              /* WHITE TEXT */
    -webkit-text-fill-color: #FFFFFF !important;

    border: 2px solid #FFFFFF !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* 🔁 HOVER FEEDBACK */
html body #ams-app button#submit:not(:disabled):hover {
    background-color: #16603A !important;
}

/* =====================================================
   ✅ CONFIRM BUTTON — REAL ENABLED STATE
===================================================== */

#ams-app button#submit {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ❌ Disabled (default) */
#ams-app button#submit:disabled {
    background-color: #ffffff !important;
    color: rgba(26,93,55,0.5) !important;
    cursor: not-allowed;
}

/* ✅ ENABLED — THIS IS THE KEY */
#ams-app button#submit.is-enabled {
    background-color: #0F3E25 !important; /* dark green */
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    cursor: pointer;
}

/* Hover feedback */
#ams-app button#submit.is-enabled:hover {
    background-color: #16603A !important;
}

/* ===== AMS Note (no services) ===== */
#ams-app .ams-note{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.12);color:#fff;font-size:13px;line-height:1.35}
#ams-app .ams-note strong{color:#fff;text-decoration:underline}



/* =====================================================
   CONFIRM MODAL — TOPMOST + MOBILE BUTTON ACCESS (V16)
   - Ensures modal is above any theme/header overlays
   - Works even if #ams-app is inside transformed/stacking parents
===================================================== */

.ams-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* modern mobile viewport */
    z-index: 2147483647; /* maximum practical */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14px;
    overflow: hidden; /* container should not scroll; panel/body will */
    overscroll-behavior: contain;
    isolation: isolate;
}

.ams-modal .ams-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
}

.ams-modal .ams-modal__panel {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: min(680px, calc(100% - 28px));
    margin: 0;
    max-height: calc(100dvh - 28px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ams-modal .ams-modal__body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ams-modal .ams-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* If a theme applies transforms, ensure the modal isn't clipped */
body > .ams-modal {
    transform: none !important;
}