body {
    font-family:Poppins,Helvetica,sans-serif;
    background-color:#F9FAFB !important;
}

.btn-secondary {
    color:#3e3e3e;
    background-color: transparent;
}

.panel {
    padding:40px;
}
.panel-heading {
    height:58px;
}
.panel-title {
    font-size:23px !important;
    line-height:27px;
    font-weight:600;
}
.panel-body {
    background-color:#fff;
    padding-left:50px;
    padding-right:50px;
    padding-top:20px;
    padding-bottom:20px;
    border-radius:10px;
    /*margin-top:40px;*/
}

.panel-body h2 {
    font-size:20px;
    font-weight:600;
    line-height:23px;
    min-height:35px;
}

.panel-body-subheading {
    color:#a1a5b7;
    font-weight:500;
    font-size:15px;
}

.custom-breadcrumb {
    font-weight:500;
    color:#A1A5B7;
    font-size:13px;
    line-height:10px;
    text-transform: capitalize;
}

.custom-text-gray {
    font-size: 1.075rem!important;
    color: #69696b!important;
}

.custom-semibold {
    font-weight: 500!important;
}

.custom-card {
    font-size: 1.8rem!important;
    line-height: 1!important;
    letter-spacing: -.115rem!important;
    font-weight: 500!important;
    margin-right: 0.5rem!important;
}

.graph_box {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 8px 0px;
    margin-bottom: 25px;
    border: 0px;
}

.custom-date-inputbox {
    /*border: 0px !important;*/
    /*text-align: left !important;*/
    max-width: 20% !important;
    /*text-decoration: underline !important;*/
    /*color: #f1416c !important;*/
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    /*width: 190px;*/
    /*background: #fff url("../images/calendar_2.png")  97% 50% no-repeat;*/
    background: #fff url("../images/calendar_2.png")  8% 50% no-repeat;

}

.custom-date-icon-new {
    line-height: 2;
   /* color: #f1416c;*/
}


.date-to-1 {
    margin: 0px 10px;
    color: rgb(39, 47, 54);
    font-size: 14px;
    font-weight: 400;
    font-family: Roboto;
    line-height: 30px;
    text-align: inherit;
}

.date-header-1{
    text-align: inherit;
    color: rgb(39, 47, 54);
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}



/*Media Start - max-width:767px*/
@media (max-width:767px){
     #app{
          padding-left:30px;
          width:100%;
          left:0!important;
          padding-right: 30px;  
     
       }   

    div#app {
        left: 22%;
        width: 100%;
        padding-top: 0px;
    }   



    .panel {
        padding: 0px!important;
        margin-top: 80px !important;
    }   

    .panel-body h2{ 
        font-size: 20px!important;
    }   

    .panel-body {
        background-color: #fff;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-radius: 10px;
        /*margin-top: 40px;*/
        padding-right: 20px;
    }   
}
/*Media End - max-width:767px*/


#editor {
  font-size: 14px;
}
.device-frame {
  margin: auto;
  background: #000;
  transition: width 0.3s ease, height 0.3s ease;
  border-radius: 40px;
  padding: 20px 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mockup-frame {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}
.mockup-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.mockup-frame .top-bar,
.mockup-frame .bottom-bar {
  height: 10px;
  background: #333;
}
.mockup-frame .text-preview {
  white-space: pre-wrap;
  padding: 20px;
  background: #f8f9fa;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.device-frame.desktop {
  width: 100%;
  max-width: 100%;
  height: 600px;
}
.device-frame.tablet {
  width: 768px;
  height: 600px;
}
.device-frame.mobile {
  width: 375px;
  height: 667px;
}
.nav-tabs.modern-tabs {
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 10px;
}
.nav-tabs.modern-tabs .nav-item .nav-link {
  padding: 8px 16px;
  border: none;
  background: #f8f9fa;
  color: #007bff;
  font-weight: bold;
  border-radius: 4px;
}
.nav-tabs.modern-tabs .nav-item.active .nav-link,
.nav-tabs.modern-tabs .nav-item .nav-link.active {
  background-color: #007bff;
  color: #fff;
}
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.device-buttons .btn {
  border: 1px solid #ccc;
  background: #f9f9f9;
}
.device-buttons .active {
  background-color: #e65100;
  color: #fff;
  border-color: #e65100;
}

/* --- Navbar Brand --- */
.navbar-brand {
    font-weight: 600;
    font-size: 1.2rem;
}

/* --- Avatar Styling --- */
.user-dropdown .avatar img {
    object-fit: cover;
    border: 2px solid #fff;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.user-dropdown .avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(230, 81, 0, 0.5); /* Subtle orange glow */
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    min-width: 200px;
    font-size: 0.95rem;
    padding: 0.5rem 0 0.5rem 0.5rem;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* --- Dropdown Item --- */
.dropdown-menu .dropdown-item {
    padding: 0.6rem 1rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(230, 81, 0, 0.08); /* Soft brand hover */
    color: #E65100;
}

/* --- Dropdown Divider --- */
.dropdown-divider {
    margin: 0.4rem 0;
}

/* --- Active Item --- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #E65100 !important;
    color: #fff !important;
}

/* --- Align avatar and username --- */
#logoutMenuUser {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Username text styling --- */
#acc_username {
    font-weight: 500;
    color: #fff;
}

/* Space between icon and text in dropdown */
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .mp-icons {
    margin-right: 0.5rem; /* space between icon and label */
    width: 1.2rem; /* keeps icons aligned vertically */
    text-align: center;
}

/* Ensure dropdown text aligns well after icon */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}


/* ---------------------------
 *    Section Header Styling
 *       --------------------------- */
.section-header {
  margin-bottom: 20px; /* Space below the section heading */
}
.section-header h2 {
  font-size: 22px; /* Title font size */
  font-weight: 600; /* Semi-bold for emphasis */
  margin: 0; /* Remove default margin */
}
.section-header p {
  color: #666; /* Subtle gray for description text */
  font-size: 14px; /* Smaller font for subtitle */
}

/* Strike-through old price style */
del {
  opacity: 0.7; /* Slightly faded to de-emphasize */
}

/* ---------------------------
 *    Wrapper
 *       --------------------------- */
.premium-plan-list {
  font-family: 'Inter', sans-serif; /* Premium modern font */
}

/* ---------------------------
 *    Plan Card Styling
 *       --------------------------- */
.premium-plan-card {
  background: #fff; /* Clean white background */
  border-radius: 16px; /* Rounded corners for modern look */
  padding: 24px; /* Inner spacing */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Soft card shadow */
  border: 1px solid rgba(0,0,0,0.05); /* Light border for separation */
  transition: all 0.3s ease; /* Smooth hover transition */
}
.premium-plan-card:hover {
  transform: translateY(-4px); /* Slight lift on hover */
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Stronger shadow on hover */
}

/* Special border highlight for featured/most popular plan */
.premium-plan-featured {
  border: 2px solid #e65100; /* Brand color border */
}

/* ---------------------------
 *    Plan Title
 *       --------------------------- */
.premium-plan-title {
  font-size: 1.25rem; /* Slightly large title text */
  font-weight: 700; /* Bold for emphasis */
}

/* ---------------------------
 *    Most Popular Badge
 *       --------------------------- */
.premium-plan-badge {
  background: linear-gradient(90deg, #ff9800, #e65100); /* Brand gradient */
  color: #fff; /* White text for contrast */
  padding: 4px 10px; /* Inner spacing */
  border-radius: 12px; /* Rounded pill shape */
  font-size: 0.8rem; /* Smaller badge text */
  font-weight: bold; /* Bold to stand out */
}

/* ---------------------------
 *    Price Section
 *       --------------------------- */
.premium-plan-price-container {
  margin-top: 14px; /* Space above price */
}
.premium-plan-price {
  display: flex; /* Align currency, price, discount in row */
  align-items: center;
  flex-wrap: wrap; /* Wrap if too long */
  gap: 6px; /* Space between items */
}

/* Currency styling */
.premium-plan-currency {
  font-size: 2rem; /* Large number for emphasis */
  font-weight: 800; /* Extra bold */
  display: flex;
  align-items: center;
  gap: 4px; /* Space between icon and number */
}
/* Color variations for currency type */
.premium-plan-currency.usd i {
  color: #2ecc71; /* Green for USD */
}
.premium-plan-currency.inr i {
  color: #f39c12; /* Orange for INR */
}

/* Old/original price styling */
.premium-plan-oldprice {
  font-size: 1rem;
  color: #aaa; /* Light gray */
  text-decoration: line-through; /* Strike-through style */
}

/* Discount badge */
.premium-plan-discount {
  background: linear-gradient(90deg, #27ae60, #2ecc71); /* Green gradient */
  color: #fff; /* White text */
  padding: 2px 8px; /* Inner spacing */
  border-radius: 12px; /* Rounded pill */
  font-size: 0.8rem; /* Small badge text */
  font-weight: bold; /* Bold to stand out */
}

/* /month text styling */
.premium-plan-month {
  font-size: 0.9rem;
  color: #555; /* Medium gray */
}

/* ---------------------------
 *    Plan Description
 *       --------------------------- */
.premium-plan-desc {
  color: #666; /* Subtle gray text */
  font-size: 0.95rem;
  margin-top: 6px;
}

/* ---------------------------
 *    Features List
 *       --------------------------- */
.premium-features-list {
  list-style: none; /* Remove bullets */
  padding: 0;
  margin: 0;
  display: grid; /* Two-column layout */
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px; /* Vertical & horizontal spacing */
  font-family: 'Inter', sans-serif;
}
.premium-features-list li {
  font-size: 0.95rem; /* Standard readable size */
  color: #333; /* Dark gray text */
  display: flex; /* Align icon + text */
  align-items: center;
  gap: 8px; /* Space between icon and text */
  background: #fffdfc; /* Slightly off-white background */
  padding: 8px 12px; /* Inner padding */
  border-radius: 8px; /* Rounded corners */
  border: 1px solid #f5f5f5; /* Light border */
  transition: all 0.2s ease; /* Smooth hover */
}
.premium-features-list li:hover {
  background: #fff7f0; /* Brand-tinted hover */
  transform: translateY(-1px); /* Slight lift */
}

/* Feature icons */
.premium-features-list li i {
  /*color: #e65100;*/ /* Brand orange */
  font-size: 1rem;
  width: 18px; /* Align icon width */
  text-align: center;
}

/* Bold key text */
.premium-features-list strong {
  font-weight: 600;
  color: #000;
}

/* Highlighted value text */
.premium-features-list span {
  font-weight: 600;
  color: #e65100; /* Brand orange */
}

/* ---------------------------
 *    Plan Subtext (Emails/month)
 *       --------------------------- */
.plan-subtext {
  display: inline-block; /* Makes it pill-like */
  background: #f8f9fa; /* Soft gray background */
  padding: 3px 8px; /* Inner spacing */
  border-radius: 50px; /* Fully rounded */
  font-size: 0.85rem; /* Small, subtle text */
  color: #6c757d; /* Muted text */
}

#web {
    /*background-color: #fff;*/
    left: 15%;
    position: absolute;
    width: 85%;
    padding-top: 85px;
    min-height: 100vh;
    background-color: #FFFFFF !important;
    color:#515151;    

}
.auth-wrapper {
  display: flex;
  flex-direction: row;  
  /*padding-left:30%;  
  flex-direction: column; */
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 100px);
  padding: 0;
}

.auth-card {
  background: #fff;
  border-radius: 14px;
  padding: 50px 40px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  text-align: center;
  /*margin-top: 5%;*/
}

.auth-title {
  font-weight: bold;
  font-size: 1.6rem;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: #6c757d;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 57%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
}

.btn-dark {
  background-color: #000;
  border: none;
}

.btn-dark:hover {
  background-color: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.fa-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* When inside the auth card, override to normal positioning */
.auth-card #errorBox,
.auth-card #infoBox,
.auth-card #successBox {
  display: none; /* default hidden */
  position: static;  /* No fixed positioning */
  width: 100%;
  margin-bottom: 1rem;
  text-align: left;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 10px 14px;
  opacity: 1; /* fully opaque inside card */
}

/* Optional: adjust Bootstrap alert spacing */
.auth-card .alert {
  margin: 0 0 1rem 0;
}

.alert {
  position: relative; /* important: makes .close relative to alert */
  /*padding-right: 40px;*/ /* space for close button */
}

.alert .close {
  /*position: absolute;*/
  top: 50%;
  right: 12px;
  /*transform: translateY(-50%);*/
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: #333;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  float: right;
}

.alert .close:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* Divider */
.sidebar-section-divider {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 15px 0;
}


/* --- Mobile Fixes --- */
@media (max-width: 767.98px) {
    .user-dropdown .nav-link {
        padding: 0.5rem;
    }
    .dropdown-menu {
        right: 0;
        left: auto;
    }
}


/* ===== Current Plan premium skin (no .panel changes) ===== */

/* Card shell */
.border-box{
  border: .1px solid #F1F1F4;
  border-radius: .65rem;
  box-shadow: 0 3px 4px #F1F1F4;
}

/* --- HEADERS (all panels) --- */
.border-box.mb-5.mt-3 .panel > h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px !important;
  font-weight:800;
  letter-spacing:.2px;
  color:#14171f;
  margin:0 0 16px;
}
/* any .float-right inside an h2 goes to the right (keeps Change Plan at right) */
.border-box.mb-5.mt-3 .panel > h2 .float-right{
  float:none !important;
  margin-left:auto;
  border-radius:999px;
  padding:9px 18px;
  box-shadow:0 6px 18px rgba(30,107,255,.18);
  transition:transform .08s ease, box-shadow .2s ease;
}
.border-box.mb-5.mt-3 .panel > h2 .float-right:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(30,107,255,.24);
}

/* Disabled-looking buttons should still accept hover/focus (for tooltips) */
.action-renew-button-plan-page-disabled{ pointer-events:auto; opacity:.75; }

/* --- RENEW SECTION (the next panel) --- */
.border-box.mb-5.mt-3 .panel + .panel h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px !important;
  font-weight:800;
  color:#14171f;
  margin:0 0 8px;
}
/* inside Renew header: cancel auto-right on each button… */
.border-box.mb-5.mt-3 .panel + .panel h2 .float-right{
/*  margin-left:0 !important;*/
}
/*  push the WHOLE group to the right */
.border-box.mb-5.mt-3 .panel + .panel h2 .renew-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.border-box.mb-5.mt-3 .panel + .panel h2 .renew-actions .btn{
  border-radius:999px;
  padding:9px 18px;
  box-shadow:0 6px 18px rgba(30,107,255,.18);
}
.border-box.mb-5.mt-3 .panel + .panel h2 .renew-actions .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(30,107,255,.24);
}

/* Offer note sits under the buttons, right-aligned */
.border-box.mb-5.mt-3 .offer-msg-g{
  float:none !important;
  text-align:right;
  margin:8px 0 0;
  color:#6b7280;
  font-size:13px;
}

/* --- Content styles --- */
.border-box.mb-5.mt-3 .camp-overview{
  color:#6b7280;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.3px;
}
.border-box.mb-5.mt-3 .plan-details{
  display:inline-block;
  font-size:15px;
  color:#111827;
  margin-bottom:6px;
}
/* Expiry → pill */
.border-box.mb-5.mt-3 .plan-details[style*="color:red"]{
  color:#b42318 !important;
  background:#fff1f2;
  border:1px solid #ffd0d4;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  display:inline-block;
  margin-top:6px;
}

/* Email Sends */
.border-box.mb-5.mt-3 h2 .email-sends-val{
  margin-left:auto;
  color:#6b7280;
  font-size:13px;
  font-weight:700;
}
.border-box.mb-5.mt-3 .progress{
  height:14px;
  background:#eef2f7;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.border-box.mb-5.mt-3 .progress .progress-bar{
  background:linear-gradient(90deg,#1e6bff,#1657d6);
  font-size:11px;
  font-weight:800;
  line-height:14px;
  letter-spacing:.3px;
  transition:width .35s ease;
}
.border-box.mb-5.mt-3 .email-sends-val{
  color:#6b7280;
  font-size:13px;
  margin-top:8px;
}

/* spacing for the first wrapper */
.border-box.mb-5.mt-3{ margin-top:18px !important; }

/* --- Responsive --- */
@media (max-width: 992px){
  .border-box.mb-5.mt-3 .panel > h2{ font-size:19px !important; flex-wrap:wrap; }
  .border-box.mb-5.mt-3 .panel + .panel h2 .renew-actions{ margin-left:0; width:100%; justify-content:flex-end; }
  .border-box.mb-5.mt-3 .col-3, 
  .border-box.mb-5.mt-3 .col-9{ flex:0 0 100%; max-width:100%; }
}

/* ===== Payment History (premium look) ===== */

/* wrapper around the table */
.payment-history-wrap {
  border: 1px solid #F1F1F4;
  border-radius: .65rem;
  background: #fff;
  overflow: hidden;
}

/* table base */
.payment-history-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}

/* header */
.payment-history-table thead th {
  background: #f8fafc;
  color: #14171f;
  font-weight: 800;
  border-bottom: 2px solid #e5e7eb;
  padding: 12px 16px;
  white-space: nowrap;
}

/* cells */
.payment-history-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f1f4;
  color: #111827;
}

/* row hover */
.payment-history-table tbody tr:hover { background: #f6f9ff; }

/* subtle ID tone */
.payment-history-table td.text-muted { color: #6b7280 !important; }

/* amount emphasis */
.payment-history-table .fw-700 { font-weight: 700; }

/* payment method badge */
.method-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:#1e3a8a;
  background:#eef2ff; border:1px solid #dbe2ff;
  padding:4px 10px; border-radius:999px;
}

/* txn id code */
.txid-code{
  background:#f9fafb; border:1px solid #eef2f7;
  padding:2px 6px; border-radius:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px; color:#374151;
}

/* empty state */
.empty-state-premium{
  padding:18px; text-align:center; color:#6b7280;
  background:#f9fdfa; border:1px dashed #e5e7eb; border-radius:.65rem;
}

/* make header button a premium pill (reuses your existing h2 button rules) */
.border-box.mb-5.mt-3 .panel > h2 .float-right{
  float:none !important; margin-left:auto; border-radius:999px;
  padding:9px 18px; box-shadow:0 6px 18px rgba(30,107,255,.18);
  transition:transform .08s ease, box-shadow .2s ease; border:none;
}
.border-box.mb-5.mt-3 .panel > h2 .float-right:hover{
  transform:translateY(-1px); box-shadow:0 8px 22px rgba(30,107,255,.24);
}

/* responsive: hide ID on very small screens */
@media (max-width: 576px){
  .payment-history-table thead th:nth-child(1),
  .payment-history-table tbody td:nth-child(1){ display:none; }
}

/* ================================
 *    Billing Information — Premium CSS
 *       (inline view ↔ edit in one place)
 *          ================================ */

/* Shell around the tab content (you already use .border-box elsewhere) */
.border-box {
  border: .1px solid #F1F1F4;
  border-radius: .65rem;
  box-shadow: 0 3px 4px #F1F1F4;
}

/* Header + right-aligned action buttons (Edit / Save / Cancel) */
.border-box .panel > h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px !important;
  font-weight:800;
  letter-spacing:.2px;
  color:#14171f;
  margin:0 0 16px;
}
.border-box .panel > h2 .float-right{
  float:none !important;
  margin-left:auto;
  border-radius:999px;
  padding:9px 18px;
  box-shadow:0 6px 18px rgba(30,107,255,.18);
  transition:transform .08s ease, box-shadow .2s ease;
  border:none;
}
.border-box .panel > h2 .float-right:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(30,107,255,.24);
}

/* Content wrapper */
.billing-info-wrap{
  border: 1px solid #F1F1F4;
  border-radius: .65rem;
  background: #fff;
  padding: 12px 8px;
}

/* Key Value card block */
.billing-info-grid .kv{
  border: 1px solid #F1F1F4;
  background: #f9fafc;
  border-radius: .65rem;
  padding: 12px 14px;
  height: 100%;
  transition: background .15s ease, border-color .15s ease;
}
.billing-info-grid .kv:hover{
  background: #f7fbff;
  border-color: #e7eefc;
}

/* Label (key) */
.billing-info-grid .kv .kv-key{
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Value (text or input) */
.billing-info-grid .kv .kv-val{
  font-size: 15px;
  color: #111827;
  line-height: 1.5;
  word-break: break-word;
}

/* Inputs in edit mode (keep premium feel) */
.billing-info-wrap .form-control,
.billing-info-wrap textarea{
  border-radius: .65rem;
  border: 1px solid #E5E7EB;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}
.billing-info-wrap .form-control:focus,
.billing-info-wrap textarea:focus{
  border-color: #8ab4ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(30,107,255,.15);
}

/* Empty state block (errors / no data) */
.empty-state-premium{
  padding: 18px;
  text-align: center;
  color: #6b7280;
  background: #f9fdfa;
  border: 1px dashed #e5e7eb;
  border-radius: .65rem;
}

/* Alerts spacing harmony inside the card */
.billing-info-wrap .alert{
  border-radius: .65rem;
  padding: 10px 14px;
}

/* Responsive tweaks */
@media (max-width: 992px){
  .border-box .panel > h2{ font-size:19px !important; flex-wrap:wrap; }
}
@media (max-width: 576px){
  .billing-info-wrap{ padding: 10px 6px; }
  .billing-info-grid .kv{ padding: 10px 12px; }
}


/* position helpers */
.border-box .panel > h2.has-actions{ position:relative; }
.billing-action-group{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* ===== Billing-only buttons ===== */
.btn-billing-primary{
  border-radius:999px; padding:9px 18px; border:none;
  background:linear-gradient(90deg,#1e6bff,#1657d6); color:#fff;
  box-shadow:0 6px 18px rgba(30,107,255,.18);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-billing-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(30,107,255,.24); }
.btn-billing-primary:disabled{ opacity:.6; cursor:not-allowed; }

/* soft outline for Cancel / Edit-in-header version */
.btn-billing-outline{
  border-radius:999px; padding:9px 16px;
  background:#fff; color:#374151; border:1px solid #E5E7EB;
  transition:border-color .15s ease, transform .08s ease;
}
.btn-billing-outline:hover{ border-color:#CBD5E1; transform:translateY(-1px); }

/* tiny ghost pencil (Edit) */
/* base ghost button you already added */
.btn-ghost-billing{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.65); border:1px solid rgba(17,24,39,.06);
  box-shadow:0 8px 24px rgba(30,107,255,.12); backdrop-filter:blur(6px);
  color:#111827; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ghost-billing:hover{ transform:translateY(-1px); background:#fff; box-shadow:0 10px 28px rgba(30,107,255,.18); }
.btn-ghost-billing i{ font-size:13px; }

/* label variant */
.btn-ghost-billing.has-label{ width:auto; height:40px; padding:0 12px; gap:8px; }
.btn-ghost-billing.has-label .btn-label{
  font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
}

/* keep it tidy on small screens */
@media (max-width:576px){
  .btn-ghost-billing.has-label .btn-label{ display:none; }
  .btn-ghost-billing.has-label{ width:40px; padding:0; }
}

/* position in header */
.action-fab{ position:absolute; right:12px; /*top:6px;*/ }


/* (Optional) if you show both buttons in header without the FAB: align right */
.border-box .panel > h2 .billing-action-group{ margin-left:auto; }

/* Validation */
.invalid{ border-color:#EF4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15) !important; }
.invalid-error{ color:#B42318; font-size:12px; margin-top:6px; }

/* ========== Summary Table & Extras ========== */
.table-details td{ padding:.55rem .75rem; }
.table-details .text-muted{ color:#6B7280 !important; }
select.form-control{  min-width:96px; }

/* Payment method chips */
.payment_labels{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid #E5E7EB; border-radius:12px; background:#fff;
  padding:10px 12px; cursor:pointer;
  transition:box-shadow .2s, transform .08s;
  width:fit-content;
}
.payment_labels:hover{ box-shadow:0 6px 18px rgba(17,24,39,.08); transform:translateY(-1px); }
.payment_labels input{ margin:0 8px 0 0; }

/* Tiny helper */
.text-muted.small{ color:#6B7280; }


a {
    color: #268bd2;
    text-decoration: none;
}

/* Override disabled primary button color */
.btn-primary:disabled, 
.btn-primary.disabled {
  background-color: #e0e0e0 !important;  /* light grey */
  border-color: #d0d0d0 !important;      /* slightly darker border */
  color: #6c757d !important;             /* muted text */
  cursor: not-allowed !important;
  opacity: 1 !important;                 /* remove Bootstrap's faded look */
}