/*
 * Glory Checkout — Modal + UI styles
 *
 * Mirrors the structure of cashdro-checkout.css / cashdro-change.css.
 * BEM-like class prefix: .glory-*
 *
 * @package IzGlory
 */

/* ── Overlay ────────────────────────────────────────────── */
.glory-modal-overlay {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, .65);
    z-index:          99999;
    align-items:      center;
    justify-content:  center;
}

/* ── Modal card ─────────────────────────────────────────── */
.glory-modal {
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 8px 40px rgba(0, 0, 0, .35);
    width:         min(440px, 96vw);
    overflow:      hidden;
    font-family:   sans-serif;
    animation:     glory-pop .2s ease-out;
}

@keyframes glory-pop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Header ─────────────────────────────────────────────── */
.glory-modal-header {
    background:      #1a6e2e;
    color:           #fff;
    padding:         14px 20px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.glory-modal-title {
    font-size:   1.15rem;
    font-weight: 600;
}

.glory-modal-hw {
    font-size:   .75rem;
    opacity:     .75;
    letter-spacing: .04em;
}

/* ── Body ───────────────────────────────────────────────── */
.glory-modal-body {
    padding: 24px 20px;
}

/* ── Phases ─────────────────────────────────────────────── */
.glory-phase {
    animation: glory-fadein .2s ease;
}

@keyframes glory-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Amount grid ────────────────────────────────────────── */
.glory-amounts {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         10px;
}

.glory-amount-block {
    background:    #f5f5f5;
    border-radius: 8px;
    padding:       10px 14px;
    text-align:    center;
}

.glory-amount-label {
    font-size:  .75rem;
    color:      #888;
    margin-bottom: 4px;
}

.glory-amount-value {
    font-size:   1.4rem;
    font-weight: 700;
    color:       #222;
}

.glory-amount-value.glory-accent  { color: #1a6e2e; }
.glory-amount-value.glory-returned { color: #1a5080; }

/* ── Remaining row ──────────────────────────────────────── */
.glory-remaining-row {
    display:        flex;
    align-items:    baseline;
    gap:            8px;
    margin-bottom:  16px;
}

.glory-remaining {
    font-size:   1.6rem;
    font-weight: 800;
    color:       #c0392b;
}

/* ── Coin animation ─────────────────────────────────────── */
.glory-anim {
    text-align:    center;
    margin-bottom: 12px;
}

.glory-coin-anim {
    font-size: 2rem;
    margin-bottom: 6px;
}

.glory-coin {
    display:          inline-block;
    animation:        glory-drop 1.4s ease-in-out infinite;
    opacity:          .85;
}

.glory-coin-d1 { animation-delay: .4s; }
.glory-coin-d2 { animation-delay: .8s; }

@keyframes glory-drop {
    0%   { transform: translateY(-10px); opacity: .4; }
    50%  { transform: translateY(4px);   opacity: 1;  }
    100% { transform: translateY(-10px); opacity: .4; }
}

/* ── Instruction text ───────────────────────────────────── */
.glory-instr {
    font-size:  .9rem;
    color:      #555;
    text-align: center;
    min-height: 1.3em;
}

.glory-err-text { color: #c0392b; font-weight: 600; }

/* ── Elapsed timer ──────────────────────────────────────── */
.glory-elapsed {
    text-align: center;
    font-size:  .78rem;
    color:      #aaa;
    margin-top: 8px;
}

/* ── Processing spinner ─────────────────────────────────── */
.glory-spinner {
    width:    48px;
    height:   48px;
    margin:   0 auto 16px;
    position: relative;
}

.glory-spinner div {
    box-sizing:   border-box;
    position:     absolute;
    width:        100%;
    height:       100%;
    border:       4px solid transparent;
    border-top-color: #1a6e2e;
    border-radius: 50%;
    animation:    glory-spin 1s linear infinite;
}

.glory-spinner div:nth-child(2) { animation-delay: -.25s; opacity: .6; }
.glory-spinner div:nth-child(3) { animation-delay: -.5s;  opacity: .4; }
.glory-spinner div:nth-child(4) { animation-delay: -.75s; opacity: .2; }

@keyframes glory-spin {
    to { transform: rotate(360deg); }
}

/* ── Done phase ─────────────────────────────────────────── */
.glory-icon-ok, .glory-icon-err {
    font-size:     2.4rem;
    text-align:    center;
    margin-bottom: 12px;
}

.glory-result-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
}

/* ── Footer ─────────────────────────────────────────────── */
.glory-modal-footer {
    padding:        12px 20px 16px;
    text-align:     right;
    border-top:     1px solid #eee;
}

.glory-btn-cancel {
    background:    transparent;
    border:        2px solid #c0392b;
    color:         #c0392b;
    border-radius: 6px;
    padding:       8px 20px;
    font-size:     .9rem;
    cursor:        pointer;
    transition:    background .15s, color .15s;
}

.glory-btn-cancel:hover {
    background: #c0392b;
    color:      #fff;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .glory-modal-header { padding: 12px 14px; }
    .glory-modal-body   { padding: 16px 14px; }
    .glory-amounts      { grid-template-columns: 1fr; }
    .glory-result-row   { grid-template-columns: 1fr; }
}