/* বাংলা ব্যাখ্যা: glass-style card ও shared visual effect-এর style রাখে। */
/* Simple English: These rules add the existing glass look to cards, buttons and inputs. */

/* ==========================================================================
   NAGAR — Crystal-clear glass / 3D finish (customer side only)
   Loaded AFTER app.css. Colours, borders, shadows and text clarity only:
   no layout, spacing or behaviour is changed, so every feature works as before.
   ========================================================================== */

/* ---------- 1. Crisp text everywhere the customer looks ---------- */
:is(.customer-body, .public-body, .auth-bg) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: Inter, "Segoe UI", "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", Roboto, Arial, sans-serif;
  color: #f4f9ff;
}

:is(.customer-body, .public-body, .auth-bg) :is(h1, h2, h3, h4, strong, b, th, legend) {
  text-shadow: none;
}

:is(.customer-body, .public-body, .auth-bg) .muted {
  color: #b9d2ee;
}

/* ---------- 2. Glass cards with a real 3D edge (customer pages) ---------- */
.customer-body :is(.card, .service-card, .stat-card) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .38),
    0 2px 0 rgba(2, 8, 20, .85),
    0 16px 30px -8px rgba(0, 0, 0, .55);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Cards that already have their own colour identity (wallet balance, customer ID, unread notification) keep it. */
.customer-body :is(.card:not(.notification-card), .service-card, .stat-card) {
  border: 1px solid rgba(130, 200, 255, .34);
}

.customer-body :is(.card:not(.wallet-hero):not(.customer-identity-card), .service-card, .stat-card) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(145deg, rgba(16, 58, 108, .92), rgba(6, 26, 52, .97));
}

.customer-body :is(.service-card, .stat-card):hover {
  border-color: rgba(90, 210, 255, .65);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .38),
    0 2px 0 rgba(2, 8, 20, .85),
    0 22px 36px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(60, 200, 255, .18);
}

.customer-body :is(.wallet-hero, .hero) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -3px 0 rgba(0, 0, 0, .35),
    0 3px 0 rgba(2, 8, 20, .85),
    0 22px 40px -10px rgba(0, 0, 0, .6);
}

/* Headings and numbers: pure white, sharp */
.customer-body :is(.page-heading h1, .card h2, .card h3, .service-card h3, .stat-card strong, .wallet-hero-balance, .hero h2) {
  color: #ffffff;
}

.customer-body .eyebrow {
  color: #b9d2ee
}

/* ---------- 3. Buttons: glossy, raised, press-down ---------- */
.customer-body .btn:not(.primary):not(.danger),
.public-body .btn:not(.primary):not(.danger),
.auth-bg .btn:not(.primary):not(.danger) {
  border: 1px solid rgba(130, 200, 255, .45);
  background: linear-gradient(180deg, #14436f 0%, #0a2a4d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #04142a, 0 8px 14px rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

:is(.customer-body, .public-body, .auth-bg) .btn.primary {
  border: 1px solid rgba(160, 225, 255, .55);
  background: linear-gradient(180deg, #3cc9ff 0%, #2a6bff 52%, #6a2cf0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 0 #1a2c8c, 0 12px 20px rgba(20, 60, 200, .4);
  color: #ffffff;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

:is(.customer-body, .public-body, .auth-bg) .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.07)
}

:is(.customer-body, .public-body, .auth-bg) .btn:active:not(:disabled) {
  transform: translateY(3px);
  filter: none
}

.customer-body .btn.primary:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #1a2c8c, 0 4px 8px rgba(20, 60, 200, .35)
}

:is(.customer-body, .public-body, .auth-bg) .btn:focus-visible {
  outline: 3px solid #a4e5ff;
  outline-offset: 3px
}

.customer-body .btn.danger {
  border-color: #c43a66;
  background: linear-gradient(180deg, #6a2a4c 0%, #491d39 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 #230b1b, 0 8px 14px rgba(0, 0, 0, .35);
}

/* ---------- 4. Inputs: clear and readable ---------- */
.customer-body .main-content :is(input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=image]):not([type=range]):not([type=color]), select, textarea),
.auth-bg :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) {
  color: #ffffff;
  background: #04162c;
  border: 1px solid rgba(110, 180, 240, .55);
  border-radius: 11px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08);
}

.customer-body .main-content :is(input, select, textarea)::placeholder,
.auth-bg :is(input, select, textarea)::placeholder {
  color: #8fb0d3
}

.customer-body .main-content :is(input:not([type=radio]):not([type=checkbox]), select, textarea):focus,
.auth-bg :is(input:not([type=radio]):not([type=checkbox]), select, textarea):focus {
  outline: 0;
  border-color: #3fd2ff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4), 0 0 0 3px rgba(63, 210, 255, .28);
}

/* ---------- 5. Tables, pills, notices ---------- */
.customer-body .table-wrap {
  border: 1px solid rgba(130, 200, 255, .34);
  background: linear-gradient(180deg, #071f3b, #05172e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 26px -10px rgba(0, 0, 0, .55);
}

.customer-body th {
  color: #bfdcf8;
  background: #0b2a4d
}

.customer-body td {
  color: #ecf5ff
}

.customer-body .pill {
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(0, 0, 0, .35)
}

.customer-body .notice {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px -8px rgba(0, 0, 0, .5);
}

.customer-body .list-row {
  border-bottom-color: rgba(130, 200, 255, .2)
}

/* ---------- 6. Top-up amount tiles (wallet page) ---------- */
.customer-body :is(.cashfree-package-main, .amount-option span) {
  border: 1px solid rgba(130, 200, 255, .45);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%),
    linear-gradient(145deg, #0d3560, #08203f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 4px 0 #03101f, 0 10px 16px -6px rgba(0, 0, 0, .5);
  color: #ffffff;
}

.customer-body .cashfree-package-main strong {
  color: #ffffff
}

.customer-body .cashfree-package-main small {
  color: #cfe6fb
}

.customer-body .cashfree-package-option:hover .cashfree-package-main {
  transform: translateY(-2px)
}

.customer-body .cashfree-package-option input:checked+.cashfree-package-main,
.customer-body .amount-option input:checked+span {
  border-color: #6fe3ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 0 #0a3a66, 0 0 0 2px rgba(63, 210, 255, .55), 0 14px 24px -6px rgba(20, 160, 255, .45);
}

.customer-body .cashfree-selection-summary {
  color: #e4f2ff;
  border-color: rgba(130, 200, 255, .4);
  background: linear-gradient(180deg, #0a2748, #071b33);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4);
}

/* ---------- 7. Payment confirmation page — crystal glass, razor-sharp text ---------- */
.cf-confirm-wrap {
  padding: 20px 4px 34px;
  perspective: none
}

.cf-confirm-card {
  max-width: 580px;
  color: #ffffff;
  transform: none;
  /* a tilted card makes text soft; 3D now comes from light and depth */
  border: 1px solid rgba(190, 230, 255, .55);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 220, 255, .34), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(150, 90, 255, .34), transparent 48%),
    radial-gradient(circle at 50% 120%, rgba(255, 120, 200, .20), transparent 55%),
    linear-gradient(160deg, #0f2f66 0%, #0a1f48 55%, #0b1738 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -6px 0 rgba(0, 0, 0, .30),
    inset 0 0 40px rgba(120, 200, 255, .10),
    0 10px 0 -2px #050f26,
    0 30px 50px -12px rgba(0, 0, 0, .8),
    0 0 48px rgba(70, 140, 255, .30);
}

/* diagonal glass shine */
.cf-confirm-glow {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 24%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 22%);
}

.cf-confirm-coin {
  background: radial-gradient(circle at 32% 28%, #fffbd0, #ffd84a 52%, #e49000);
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, .9), inset 0 -4px 6px rgba(150, 80, 0, .45), 0 5px 0 #9a5600, 0 16px 24px rgba(0, 0, 0, .5), 0 0 28px rgba(255, 200, 60, .45);
}

.cf-confirm-eyebrow {
  color: #dff4ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10));
  border: 1px solid rgba(200, 235, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  font-weight: 800;
}

.cf-confirm-card h2 {
  color: #ffffff;
  text-shadow: none;
  /* the old blurred shadow made letters look foggy */
  font-weight: 800;
  letter-spacing: 0;
}

.cf-tile {
  border: 1px solid rgba(200, 235, 255, .5);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04) 55%),
    linear-gradient(145deg, #12408a, #0b2559);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .30), 0 6px 0 #050f26, 0 16px 22px -4px rgba(0, 0, 0, .55);
}

.cf-tile small {
  color: #d6ecff;
  opacity: 1;
  font-weight: 700
}

/* full opacity = sharp text */
.cf-tile strong {
  color: #ffffff;
  font-weight: 800;
  text-shadow: none
}

.cf-tile-coins strong {
  color: #ffe173
}

.cf-confirm-arrow {
  color: #ffffff;
  opacity: 1;
  font-weight: 900
}

.cf-confirm-cheer {
  color: #f4faff;
  background: linear-gradient(180deg, rgba(4, 14, 36, .78), rgba(4, 14, 36, .62));
  border: 1px solid rgba(170, 215, 255, .35);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .18);
}

.cf-confirm-cheer b {
  color: #ffe173
}

.cf-confirm-note {
  color: #e2f1ff;
  opacity: 1
}

.cf-confirm-note b {
  color: #ffffff
}

.cf-confirm-go {
  color: #1d1200;
  font-weight: 800;
  border: 1px solid rgba(255, 245, 190, .9);
  background: linear-gradient(180deg, #fff3a8 0%, #ffd23f 48%, #ffb100 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(160, 90, 0, .35), 0 6px 0 #a86100, 0 18px 26px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 190, 40, .35);
  position: relative;
  overflow: hidden;
}

.cf-confirm-go:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05)
}

.cf-confirm-go:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 0 #a86100, 0 6px 10px rgba(0, 0, 0, .45)
}

.cf-confirm-go:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px
}

.cf-confirm-back {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px
}

.cf-confirm-back:hover {
  color: #ffe173
}

.cf-confirm-error {
  color: #ffffff;
  background: linear-gradient(180deg, #8d1330, #6a0d24);
  border: 1px solid rgba(255, 170, 185, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  font-weight: 600;
}

/* Fallback "opening Cashfree" card (same crystal look) */
.cf-open-card {
  border: 1px solid rgba(190, 230, 255, .5);
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%), linear-gradient(145deg, #0f2f66, #0a1f48);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 8px 0 -2px #050f26, 0 24px 40px -10px rgba(0, 0, 0, .7);
}

.cf-open-card h2 {
  color: #ffffff
}

.cf-open-amount {
  color: #e4f2ff
}

@media(max-width:520px) {
  .cf-confirm-card {
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(0, 0, 0, .28), 0 8px 0 -2px #050f26, 0 22px 36px -10px rgba(0, 0, 0, .75)
  }
}

@media(prefers-reduced-motion:reduce) {

  .customer-body :is(.card, .service-card, .stat-card),
  :is(.customer-body, .public-body, .auth-bg) .btn,
  .cf-confirm-go {
    transition: none
  }

  .customer-body :is(.service-card, .stat-card):hover {
    transform: none
  }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .cf-confirm-card {
    background: linear-gradient(160deg, #102f68, #0a1f48)
  }
}