/* Modern checkout styles for Checkout.blade.php */
:root{
    --bg-1: #f6f8fb;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #1f6feb;
    --accent-2: #263d57;
    --success: #16a34a;
    --danger: #dc2626;
    --radius: 12px;
    --glass: rgba(255,255,255,0.7);
    --shadow: 0 10px 30px rgba(36,50,90,0.06);
}

/* Page base */
html,body{
    height:100%;
    margin:0;
    padding:0;
    font-family: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #f8fbff 0%, var(--bg-1) 100%);
    color:#111827;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Center content area (target second section) */
body > section:nth-of-type(2){
    max-width:1100px;
    margin:32px 16px;
    padding:20px;
    display:grid;
    grid-template-columns: 1fr;
    gap:24px;
    align-items:start;
}

/* Left card: period + categories */
body > section:nth-of-type(2) .periods,
body > section:nth-of-type(2) .categories {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* Decorative container cards */
.card-panel{
    background:var(--card);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    border: 1px solid rgba(20,30,60,0.03);
}

/* Period boxes */
.period {
    flex: 1 1 220px;
    min-width:160px;
    padding:14px;
    border-radius:10px;
    border:1px solid rgba(10,20,60,0.05);
    background: linear-gradient(180deg,var(--glass), #fff);
    transition: all .18s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.period:hover{ transform: translateY(-4px); box-shadow: 0 12px 26px rgba(30,60,120,0.06); }
.period.disabled{ opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; filter:grayscale(.02); }
.period.selected{
    border:1px solid rgba(31,111,235,0.18);
    box-shadow: 0 12px 30px rgba(31,111,235,0.08);
    transform: translateY(-6px);
}

/* Period label styling */
.period strong{ font-size:1rem; display:block; color:var(--accent-2); }
.period small{ color:var(--muted); font-size:.86rem; margin-top:6px; }

/* Categories grid (two columns) */
.categories{
    margin-top:12px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
}
.cat-btn{
    background:#fff;
    border:1px solid rgba(10,20,60,0.04);
    border-radius:10px;
    padding:12px;
    cursor:pointer;
    transition: all .15s ease;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.cat-btn:hover{ transform: translateY(-4px); box-shadow: 0 10px 22px rgba(20,40,80,0.04); }
.cat-btn.selected{ background: linear-gradient(90deg,#f0f9ff,#eef8ff); border-color: rgba(31,111,235,0.18); }

/* Price and total line */
.price-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed #eef3fb;
}
.price-line .amount{ font-size:1.25rem; font-weight:700; color:var(--accent-2); }
.note{ color:var(--muted); font-size:0.9rem; margin-top:8px; }

/* Right column: payment summary */
#card-container{
    border-radius:8px;
    min-height:92px;
    background:linear-gradient(180deg,#fbfdff,#fff);
    border:1px solid rgba(10,20,60,0.04);
    padding:12px;
}

/* Pay button */
#pay-button{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:none;
    background: linear-gradient(90deg,var(--accent), #3b82f6);
    color:white;
    font-weight:700;
    letter-spacing:0.2px;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 0 8px 18px rgba(31,111,235,0.12);
}
#pay-button:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31,111,235,0.14); }
#pay-button:disabled{
    background: linear-gradient(90deg,#cbdffa,#dfeefe);
    color: rgba(0,0,0,0.45);
    cursor:not-allowed;
    box-shadow:none;
}

/* Select and amount display */
select#category{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid rgba(10,20,60,0.06);
    background:#fff;
    font-size:0.95rem;
    margin-top:8px;
}
#display-amount{
    font-weight:700;
    color:var(--accent-2);
}

/* Status messages */
#payment-status-container{ margin-top:10px; min-height:22px; font-size:0.95rem; }
#payment-status-container .success{ color:var(--success); font-weight:600; }
#payment-status-container .error{ color:var(--danger); font-weight:600; }

/* Utility */
.muted-small{ color:var(--muted); font-size:0.92rem; }
.kv{ display:flex; justify-content:space-between; align-items:center; gap:8px; }

/* Accessibility: focus outline */
.period:focus, .cat-btn:focus, #pay-button:focus, select#category:focus { outline: 3px solid rgba(31,111,235,0.12); outline-offset:3px; }

/* Small screens tweaks */
@media (max-width:520px){
    .categories{ grid-template-columns: 1fr; }
    .period{ min-width: 100%; }
    body > section:nth-of-type(2){ margin:20px 12px; gap:12px; }
}