/* Windows opened over the page: backdrop nudge, add-fuel chooser and fuel purchase form */

/* ---------- a click on the backdrop only nudges the window ---------- */
.overlay > .is-nudged,
.tank-detail-overlay > .is-nudged {
    animation: fuelNudge .35s ease;
}

@keyframes fuelNudge {
    0%, 100% { transform: none; }
    20% { transform: scale(1.012); }
    40% { transform: scale(.994); }
    60% { transform: scale(1.006); }
}

/* ---------- chooser ---------- */
.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice-head > span {
    position: relative;
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice-head > span::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #2fa96d;
    animation: fiRing 2.6s ease-out infinite;
    pointer-events: none;
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice {
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fiCardIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice.is-purchase { animation-delay: .1s; --fi-tone: #1f9d6a; --fi-tone2: #4fc79a; }
.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice.is-adjustment { animation-delay: .2s; --fi-tone: #d9822b; --fi-tone2: #f6c05a; }

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fi-tone) 14%, transparent), transparent 55%);
    pointer-events: none;
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice:hover {
    border-color: color-mix(in srgb, var(--fi-tone) 55%, var(--border));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--fi-tone) 18%, transparent);
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--fi-tone2), var(--fi-tone));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--fi-tone) 34%, transparent);
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice:hover > i {
    color: var(--fi-tone);
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice:hover .fuel-intake-choice-icon i {
    animation: fiWobble .6s;
}

.overlay .modal.fuel-intake-choice-modal .fuel-intake-choice-cancel:hover i {
    animation: fiSpin .5s;
}

/* ---------- purchase form: balanced two columns ---------- */
.overlay .modal.fuel-purchase-modal {
    height: auto;
    max-height: none;
    overflow: visible;
    grid-template-rows: auto auto auto;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: visible;
    padding: 14px 0;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-main-panel,
.overlay .modal.fuel-purchase-modal .fuel-purchase-meta-panel {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 12px;
    overflow: visible;
    padding: 16px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-meta-panel > :last-child {
    margin-top: auto;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-main-panel > .field:has(#fp_amount),
.overlay .modal.fuel-purchase-modal .fuel-purchase-main-panel > .field:has(#fp_cost) {
    grid-column: auto;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-main-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-content: start;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-main-panel > * {
    min-width: 0;
}

.fuel-purchase-panel-head > span {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--fp-tone) 60%, #fff), var(--fp-tone));
    box-shadow: 0 6px 14px rgba(var(--fp-tone-rgb), .3);
}

.fuel-purchase-meta-panel .fuel-purchase-panel-head > span {
    background: linear-gradient(145deg, #7d8df6, #5461df);
    box-shadow: 0 6px 14px rgba(84,97,223,.3);
}

/* ---------- fuel tiles ---------- */
.overlay .modal.fuel-purchase-modal .fuel-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fp-tile-chip {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(145deg, var(--tile-a, #f2a43a), var(--tile-b, #e8820a));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--tile-b, #e8820a) 32%, transparent);
}

.fuel-tile[data-fuel="diesel"] { --tile-a: #6fd68a; --tile-b: #1f9d4d; }
.fuel-tile[data-fuel="cng"] { --tile-a: #6db8ff; --tile-b: #2f78e0; }

.fp-tile-check {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: #1d9a58;
    transform: scale(0);
}

.overlay .modal.fuel-purchase-modal .fuel-tile.active .fp-tile-check {
    animation: fiPop .35s forwards;
}

.overlay .modal.fuel-purchase-modal .fuel-tile i {
    font-size: inherit !important;
    color: inherit !important;
}

.overlay .modal.fuel-purchase-modal .fuel-tile .fp-tile-check i {
    font-size: 11px !important;
}

.overlay .modal.fuel-purchase-modal .fuel-tile.active .fp-tile-chip i {
    animation: fiFloat 2.4s ease-in-out infinite;
}

/* ---------- inputs with chip and unit ---------- */
.fp-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--theme-stroke, rgba(120,130,150,.25));
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #fff) 84%, transparent);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.fp-in:hover {
    border-color: rgba(var(--fp-tone-rgb), .4);
}

.fp-in:focus-within {
    border-color: var(--fp-tone);
    box-shadow: 0 0 0 4px rgba(var(--fp-tone-rgb), .18);
}

.fp-ic {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
    color: var(--fp-tone);
    background: rgba(var(--fp-tone-rgb), .13);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.fuel-purchase-meta-panel .fp-ic {
    color: #5461df;
    background: rgba(84,97,223,.13);
}

.fp-in:focus-within .fp-ic {
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--fp-tone) 60%, #fff), var(--fp-tone));
    transform: scale(1.06) rotate(-4deg);
}

.fuel-purchase-meta-panel .fp-in:focus-within .fp-ic {
    background: linear-gradient(145deg, #7d8df6, #5461df);
}

.overlay .modal.fuel-purchase-modal .fp-in input,
.overlay .modal.fuel-purchase-modal .fp-in input.amt-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 700;
}

.fp-unit {
    flex: none;
    margin-inline-end: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
}

/* ---------- dropdown menus ---------- */
.overlay .modal.fuel-purchase-modal .fuel-purchase-select-trigger {
    min-height: 46px;
    padding: 0 10px 0 12px;
    border-radius: 14px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-trigger > i {
    transition: transform .3s ease, color .2s ease;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.is-open .fuel-purchase-select-trigger > i {
    transform: rotate(180deg);
    color: var(--fp-tone);
}

.fp-chip {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(145deg, var(--chip-a, #f2a43a), var(--chip-b, #e8820a));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--chip-b, #e8820a) 32%, transparent);
}

.fp-chip[data-tone="diesel"] { --chip-a: #6fd68a; --chip-b: #1f9d4d; }
.fp-chip[data-tone="cng"] { --chip-a: #6db8ff; --chip-b: #2f78e0; }
.fp-chip[data-tone="afn"] { --chip-a: #9aa6ff; --chip-b: #5461df; }
.fp-chip[data-tone="usd"] { --chip-a: #5fd0a0; --chip-b: #1f9d6a; }
.fp-chip[data-tone="person"] { --chip-a: #c28bf5; --chip-b: #8a4fe0; }

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-trigger > span > .fp-chip {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--chip-a, #f2a43a), var(--chip-b, #e8820a));
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-trigger strong {
    font-size: 13.5px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-menu {
    top: calc(100% + 8px);
    padding: 6px;
    border-radius: 16px;
    background: var(--theme-surface, #fff);
    transform-origin: top center;
}

html[data-theme="dark"] .overlay .modal.fuel-purchase-modal .fuel-purchase-select-menu {
    background: #262b3d;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.opens-up .fuel-purchase-select-menu {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-option {
    justify-content: flex-start;
    gap: 10px;
    min-height: 50px;
    opacity: 0;
    transform: translateX(8px);
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.is-open .fuel-purchase-select-option {
    animation: fiOptionIn .3s forwards;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.is-open .fuel-purchase-select-option:nth-child(2) { animation-delay: .05s; }
.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.is-open .fuel-purchase-select-option:nth-child(3) { animation-delay: .1s; }
.overlay .modal.fuel-purchase-modal .fuel-purchase-select-control.is-open .fuel-purchase-select-option:nth-child(4) { animation-delay: .15s; }

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-option:hover {
    transform: translateX(-3px);
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-option > span.fp-chip {
    display: grid;
}

.fp-option-text {
    flex: 1;
    min-width: 0;
    display: grid !important;
    gap: 1px;
    font-size: 13.5px;
    font-weight: 700;
}

.fp-option-text small {
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
}

.fp-option-bar {
    flex: none;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text2) 22%, transparent);
    overflow: hidden;
}

.fp-option-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f2a43a, #e8820a);
}

.fp-option-bar[data-tone="diesel"] i { background: linear-gradient(90deg, #6fd68a, #1f9d4d); }
.fp-option-bar[data-tone="cng"] i { background: linear-gradient(90deg, #6db8ff, #2f78e0); }

.fp-option-check {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    color: #fff;
    background: #1d9a58;
    transform: scale(0);
}

.fp-option-check i {
    color: #fff !important;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-select-option.active .fp-option-check {
    animation: fiPop .35s forwards;
}

/* ---------- foreign currency fields appear with motion ---------- */
#fp_fxFields:not([hidden]) {
    animation: fiFieldIn .35s cubic-bezier(.2,.8,.2,1);
}

/* ---------- footer: total sits next to the buttons ---------- */
.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 12px 14px;
    margin-top: 2px;
    border: 1px solid var(--theme-stroke, rgba(120,130,150,.22));
    border-radius: 18px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total-icon {
    flex: none;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total > span:last-child {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
    text-align: start;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total small {
    font-size: 12px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total strong {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: start;
    font-size: 22px;
    line-height: 1.3;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total em {
    font-size: 11px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total-icon {
    background: linear-gradient(145deg, #f6c05a, #e08a1e);
    box-shadow: 0 6px 14px rgba(224,138,30,.3);
    animation: fiWarn 3s ease-in-out infinite;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .btn {
    min-width: 128px;
    padding-inline: 20px;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .btn-primary {
    position: relative;
    overflow: hidden;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
    transform: translateX(120%);
    animation: fiShine 4.5s ease-in-out 1.4s infinite;
    pointer-events: none;
}

.overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot #fp_cancelBtn:hover {
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-body {
        grid-template-columns: 1fr;
    }
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot {
        grid-template-columns: 1fr;
    }
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .btn {
        width: 100%;
    }
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot #fp_cancelBtn {
        grid-row: auto;
    }
}

@keyframes fiRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes fiCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fiWobble { 25% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
@keyframes fiSpin { from { transform: rotate(-180deg); } to { transform: none; } }
@keyframes fiPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes fiFloat { 50% { transform: translateY(-2px); } }
@keyframes fiOptionIn { to { opacity: 1; transform: none; } }
@keyframes fiFieldIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fiWarn { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-5deg); } }
@keyframes fiShine { 0%, 55% { transform: translateX(120%); } 80%, 100% { transform: translateX(-120%); } }

@media (prefers-reduced-motion: reduce) {
    .overlay > .is-nudged,
    .tank-detail-overlay > .is-nudged,
    .overlay .modal.fuel-intake-choice-modal .fuel-intake-choice-head > span::after,
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .fuel-purchase-total-icon,
    .overlay .modal.fuel-purchase-modal .fuel-purchase-modal-foot .btn-primary::after,
    .overlay .modal.fuel-purchase-modal .fuel-tile.active .fp-tile-chip i {
        animation: none !important;
    }
    .overlay .modal.fuel-intake-choice-modal .fuel-intake-choice,
    .overlay .modal.fuel-purchase-modal .fuel-purchase-select-option {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .overlay .modal.fuel-purchase-modal .fuel-tile.active .fp-tile-check,
    .overlay .modal.fuel-purchase-modal .fuel-purchase-select-option.active .fp-option-check {
        animation: none !important;
        transform: scale(1);
    }
}