/*
 * pay.css — ABPAY Payment Pages Custom Styles
 * Replaces Sneat admin template with lightweight custom classes.
 * Bootstrap 5 is loaded via CDN; only page-specific overrides live here.
 * ============================================================
 */

/* ============================================================
   Bootstrap CSS Variable Overrides  (must be before everything else)
   ============================================================ */
:root {
    --bs-primary: #666cff;
    --bs-primary-rgb: 102, 108, 255;
    --bs-link-color: #666cff;
    --bs-link-hover-color: #5258cc;
    --bs-border-color: #eaeaec;
}

/* ============================================================
   Base / Body
   ============================================================ */
body {
    background-color: #f7f7f9;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #636578;
}

/* ============================================================
   container-p-y  (Sneat spacing helper)
   ============================================================ */
.container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
    padding-top: 1.5rem !important;
}

.container-p-y:not([class^=pb-]):not([class*=" pb-"]) {
    padding-bottom: 1.5rem !important;
}

/* ============================================================
   text-heading  (Sneat colour helper)
   ============================================================ */
.text-heading {
    color: #636578 !important;
}

/* ============================================================
   authentication-wrapper / authentication-inner / authentication-image
   ============================================================ */
.authentication-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.authentication-wrapper .authentication-inner {
    width: 100%;
}

.authentication-wrapper.authentication-basic {
    align-items: center;
    justify-content: center;
}

.authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 460px;
}

.authentication-wrapper .authentication-image {
    z-index: -1;
    width: 100%;
    bottom: 7%;
    position: absolute;
    left: 0;
}

/* ============================================================
   app-brand  (logo / brand block)
   ============================================================ */
.app-brand {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
    min-height: 1px;
    align-items: center;
}

.app-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.app-brand-logo {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    min-height: 1px;
}

.app-brand-logo img,
.app-brand-logo svg {
    display: block;
}

.app-brand-text {
    flex-shrink: 0;
    opacity: 1;
    font-size: 1.25rem;
    font-weight: 700;
    color: #636578;
    transition: opacity 0.3s ease-in-out;
}

/* ============================================================
   Global Loading Overlay  (spinner-overlay)
   ============================================================ */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

/* SVG spinner animation */
@keyframes abpay-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================/* mdi-spin  (rotate animation for MDI icons, e.g. mdi-loading mdi-spin)
   MDI v7 does not ship this — Sneat added it
   ============================================================ */
@keyframes mdi-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mdi-spin::before {
    animation: mdi-spin 1s linear infinite;
    display: inline-block;
}

/* sr-only  (Bootstrap 4 alias — Bootstrap 5 uses visually-hidden)
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* cursor-pointer  (utility not in Bootstrap 5)
   ============================================================ */
.cursor-pointer {
    cursor: pointer;
}

.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ============================================================
   form-floating-outline  (Sneat custom component)
   ============================================================ */

/* Non-outline variant: filled bottom border style */
.form-floating:not(.form-floating-outline)>.form-control,
.form-floating:not(.form-floating-outline)>.form-select {
    background-color: #fafafa;
    border: 0;
    border-bottom: 1px solid #d8d8dd;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Outline variant: standard bordered input, label floats outside */
.form-floating.form-floating-outline>.form-control:focus,
.form-floating.form-floating-outline>.form-select:focus {
    border-width: 2px;
    border-color: #666cff;
}

.form-floating.form-floating-outline>.form-control:focus,
.form-floating.form-floating-outline>.form-control:not(:placeholder-shown),
.form-floating.form-floating-outline>.form-select:focus,
.form-floating.form-floating-outline>.form-select:not(:placeholder-shown) {
    padding-top: 0.7813rem;
    padding-bottom: 0.7813rem;
}

.form-floating.form-floating-outline>.form-control:focus::placeholder,
.form-floating.form-floating-outline>.form-control:not(:placeholder-shown)::placeholder,
.form-floating.form-floating-outline>.form-select:focus::placeholder,
.form-floating.form-floating-outline>.form-select:not(:placeholder-shown)::placeholder {
    color: #bbbcc4;
}

/* Label floats to top-left of border */
.form-floating.form-floating-outline>.form-control:focus~label,
.form-floating.form-floating-outline>.form-control:not(:placeholder-shown)~label,
.form-floating.form-floating-outline>.form-select:focus~label,
.form-floating.form-floating-outline>.form-select:not(:placeholder-shown)~label {
    width: auto;
    height: auto;
    padding: 0 2px;
    margin-left: 0.7813rem;
    transform: scale(0.8) translateY(-0.7rem) translateX(-2px);
    opacity: 1;
    color: #666cff;
}

/* White background behind floating label to cut through the border */
.form-floating.form-floating-outline>.form-control:focus~label::after,
.form-floating.form-floating-outline>.form-control:not(:placeholder-shown)~label::after,
.form-floating.form-floating-outline>.form-select:focus~label::after,
.form-floating.form-floating-outline>.form-select:not(:placeholder-shown)~label::after {
    content: "";
    position: absolute;
    height: 0.5rem;
    width: 100%;
    left: 0;
    top: 0.35rem;
    z-index: -1;
    background: #fff;
}

.form-floating.form-floating-outline>.form-control:-webkit-autofill,
.form-floating.form-floating-outline>.form-select:-webkit-autofill {
    padding-top: 0.7813rem;
    padding-bottom: 0.7813rem;
}

.form-floating.form-floating-outline>.form-control:-webkit-autofill~label,
.form-floating.form-floating-outline>.form-select:-webkit-autofill~label {
    transform: scale(0.8) translateY(-0.7rem) translateX(-2px);
    opacity: 1;
}

/* Bootstrap variable overrides block already defined at top of file */

.btn-primary {
    --bs-btn-bg: #666cff;
    --bs-btn-border-color: #666cff;
    --bs-btn-hover-bg: #5258cc;
    --bs-btn-hover-border-color: #5258cc;
    --bs-btn-active-bg: #4a50bf;
    --bs-btn-focus-shadow-rgb: 102, 108, 255;
}

.form-control:focus,
.form-select:focus {
    border-color: #666cff;
    box-shadow: 0 0 0 0.2rem rgba(102, 108, 255, 0.25);
}

.text-primary {
    color: #666cff !important;
}

.border-primary {
    border-color: #666cff !important;
}

/* ============================================================
   Card — subtle shadow like Sneat
   ============================================================ */
.card {
    border: 0;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    border-radius: 0.5rem;
}

/* ============================================================
   form-floating label colour when active (Sneat style)
   ============================================================ */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
    color: #666cff;
}

/* ============================================================
   Channel list items  (cektagihan.php payment channels)
   ============================================================ */
.channel-item:hover {
    background-color: #f7f7ff !important;
}

.channel-item.selected,
.channel-item.active {
    background-color: #eeeeff !important;
    border-color: #666cff !important;
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 575.98px) {
    .authentication-wrapper.authentication-basic .authentication-inner {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}