/* /public/css/billing.css */
.billing-page { --card-radius: 12px; }
.billing-header{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem}
.billing-header h2{font-size:1.6rem;margin:0}
.billing-reset{margin-left:auto;font-size:.9rem;color:var(--text-muted,#666)}

.billing-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:1rem;margin-bottom:1rem}
.card{background:#fff;border:1px solid var(--border-color,#eee);border-radius:var(--card-radius);padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.plan-card__title{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}
.plan-card__row{display:flex;align-items:center;justify-content:space-between;margin:12px 0 18px}

.btn{display:inline-block;border-radius:999px;padding:12px 18px;font-weight:600;text-align:center}
.btn-primary{background:var(--primary-color);color:#fff}
.upgrade-cta{width:40%;margin-top:16px}
#upggrade-now{
    width: 40%;

}

/* --- Kebab menu --- */
.kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--border, #e5e7eb);
    background: #fff;
    cursor: pointer;
  }
  
  .kebab:hover { background: #fafafa; }
  
  .plan-card__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: relative; /* anchor for menu */
    margin-top: .75rem;
  }
  
  .menu {
    position: absolute;
    right: 0;
    top: 42px;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: .25rem;
    display: none;
    z-index: 20;
  }
  .menu.menu--open { display: block; }
  
  .menu__item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .6rem .8rem;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
  }
  .menu__item:hover { background: #f6f6f6; }
  .menu__item--danger { color: #b42318; }
  .menu__item--danger:hover { background: #fef3f2; }

.billing-error{margin-top:10px;color:#c44;font-size:.92rem}

.credits-header h3{margin:0 0 .25rem 0}
.credit-row{margin-top:14px}
.credit-row__label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.credit-row__left{display:flex;align-items:center;gap:.5rem}
.credit-row__meta{margin-top:6px;color:#777;font-size:.9rem}

.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot--basic{background:#35c37c}.dot--advanced{background:#8b6cf3}.dot--elite{background:#ff9a49}

.progress{height:8px;background:#f1f1f1;border-radius:999px;overflow:hidden}
.progress>div{height:100%;width:0;background:var(--primary-color);transition:width .35s ease}

.history-card h3{margin:0 0 .75rem}
.table__head,.table__row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.5rem;align-items:center}
.table__head{font-weight:600;color:#666;margin-bottom:.5rem}
.table__row{padding:.5rem 0;border-top:1px solid #f0f0f0}
.table__empty{padding:2.25rem;color:#9aa;text-align:center}

@media (max-width:980px){.billing-grid{grid-template-columns:1fr}}

/* Tiny toggle (decorative) */
.switch{position:relative;display:inline-block;width:38px;height:22px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:not-allowed;top:0;left:0;right:0;bottom:0;background:#ddd;transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:white;transition:.2s;border-radius:50%}
input:checked + .slider{background:var(--primary-color)}
input:checked + .slider:before{transform:translateX(16px)}