/* =========================================================
   MR STRIPE PAYMENT — PREMIUM FUTURISTIC UI
   ========================================================= */

.mr-stripe-card,
.mr-stripe-card *{
  box-sizing:border-box;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

.mr-stripe-card{
  --mr-bg:#0b0d14;
  --mr-bg-soft:#111522;
  --mr-border:rgba(255,255,255,.10);
  --mr-text:#f7f8fc;
  --mr-muted:#a8adbd;
  --mr-purple:#756bff;
  --mr-blue:#536dfe;

  position:relative;
  isolation:isolate;
  overflow:hidden;

  width:min(100%,720px);
  margin:42px auto;
  padding:36px;

  border:1px solid var(--mr-border);
  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(18,21,33,.98) 0%,
      rgba(10,12,19,.99) 70%
    );

  color:var(--mr-text);

  box-shadow:
    0 35px 90px rgba(8,10,20,.28),
    0 12px 35px rgba(24,20,80,.18),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Futuristic glow */
.mr-stripe-card::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-180px;
  right:-130px;

  width:420px;
  height:420px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(117,107,255,.32) 0%,
      rgba(83,109,254,.15) 38%,
      transparent 72%
    );

  filter:blur(8px);
  pointer-events:none;
}

/* Μικρό δεύτερο glow */
.mr-stripe-card::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:-130px;
  bottom:-210px;

  width:360px;
  height:360px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(76,201,240,.14),
      transparent 70%
    );

  pointer-events:none;
}

/* =========================================================
   HEADER
   ========================================================= */

.mr-stripe-head{
  position:relative;
  display:grid;
  grid-template-columns:68px 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:32px;
}

/* Secure label */
.mr-stripe-head::after{
  content:"SECURE CHECKOUT";

  position:absolute;
  top:0;
  right:0;

  padding:7px 11px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;

  background:rgba(255,255,255,.055);
  color:#c7cbd8;

  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1;
}

/* Stripe icon */
.mr-stripe-icon{
  position:relative;
  width:68px;
  height:68px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #8c83ff 0%,
      #685fff 48%,
      #4e59e8 100%
    );

  color:#fff;
  font-size:30px;
  font-weight:900;
  line-height:1;

  box-shadow:
    0 18px 38px rgba(102,91,255,.34),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Μικρό shine στο icon */
.mr-stripe-icon::before{
  content:"";
  position:absolute;
  top:8px;
  left:10px;

  width:26px;
  height:14px;
  border-radius:50%;

  background:rgba(255,255,255,.20);
  filter:blur(6px);
}

/* Τίτλος */
.mr-stripe-head h2{
  margin:0 0 8px !important;
  padding-right:130px;

  color:#fff !important;
  font-size:clamp(27px,3.5vw,36px) !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
}

/* Περιγραφή */
.mr-stripe-head p{
  max-width:500px;
  margin:0 !important;
  padding-right:40px;

  color:var(--mr-muted) !important;
  font-size:15px !important;
  font-weight:450 !important;
  line-height:1.65 !important;
  letter-spacing:0 !important;
}

/* =========================================================
   PAYMENT BUTTON
   ========================================================= */

.mr-stripe-pay-link{
  position:relative;
  overflow:hidden;

  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;

  width:100%;
  min-height:64px;
  padding:0 28px;

  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:19px;

  background:
    linear-gradient(
      110deg,
      #786cff 0%,
      #655cff 44%,
      #536dfe 100%
    ) !important;

  color:#fff !important;
  text-decoration:none !important;

  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;

  box-shadow:
    0 20px 45px rgba(93,83,255,.32),
    inset 0 1px 0 rgba(255,255,255,.30);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* Βελάκι */
.mr-stripe-pay-link::after{
  content:"↗";

  display:grid;
  place-items:center;

  width:29px;
  height:29px;

  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;

  background:rgba(255,255,255,.12);

  font-size:15px;
  font-weight:700;

  transition:transform .25s ease;
}

/* Shine animation */
.mr-stripe-pay-link::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.24),
      transparent
    );

  transform:skewX(-22deg);
  transition:left .75s ease;
}

.mr-stripe-pay-link:hover{
  transform:translateY(-3px);
  filter:brightness(1.06);

  box-shadow:
    0 25px 55px rgba(93,83,255,.42),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.mr-stripe-pay-link:hover::before{
  left:155%;
}

.mr-stripe-pay-link:hover::after{
  transform:translate(2px,-2px);
}

.mr-stripe-pay-link:active{
  transform:translateY(0) scale(.992);
}

.mr-stripe-pay-link:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 4px rgba(117,107,255,.24),
    0 22px 50px rgba(93,83,255,.36);
}

/* =========================================================
   INFO NOTE
   ========================================================= */

.mr-stripe-note{
  position:relative;

  margin:20px 0 0 !important;
  padding:17px 18px 17px 54px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  color:#b7bbca !important;

  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.mr-stripe-note::before{
  content:"✓";

  position:absolute;
  top:50%;
  left:18px;

  width:23px;
  height:23px;

  display:grid;
  place-items:center;

  border:1px solid rgba(117,107,255,.30);
  border-radius:50%;

  background:rgba(117,107,255,.15);
  color:#a99fff;

  font-size:12px;
  font-weight:900;

  transform:translateY(-50%);
}

/* =========================================================
   ALERTS
   ========================================================= */

.mr-stripe-alert{
  padding:17px 18px;

  border:1px solid rgba(255,190,73,.28);
  border-radius:17px;

  background:rgba(255,186,59,.10);
  color:#ffd895;

  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

/* =========================================================
   ADMIN STATUS BADGES
   ========================================================= */

.mr-stripe-status-paid,
.mr-stripe-status-pending{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:7px 11px;

  border:1px solid transparent;
  border-radius:999px;

  font-size:12px;
  font-weight:800;
  line-height:1;
}

.mr-stripe-status-paid{
  border-color:rgba(28,189,112,.18);
  background:rgba(28,189,112,.10);
  color:#0c7c48;
}

.mr-stripe-status-paid::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1cbd70;
  box-shadow:0 0 0 4px rgba(28,189,112,.10);
}

.mr-stripe-status-pending{
  border-color:rgba(224,162,0,.20);
  background:rgba(255,193,33,.12);
  color:#846000;
}

.mr-stripe-status-pending::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e0a200;
  box-shadow:0 0 0 4px rgba(224,162,0,.10);
}

/* =========================================================
   WORDPRESS ADMIN
   ========================================================= */

.mr-stripe-admin,
.mr-stripe-admin input,
.mr-stripe-admin textarea,
.mr-stripe-admin button,
.mr-stripe-admin select{
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

.mr-stripe-admin code{
  padding:4px 8px;

  border:1px solid #dedfee;
  border-radius:8px;

  background:#f5f5fb;
  color:#554de2;

  font-size:13px;
}

.mr-stripe-admin .widefat{
  overflow:hidden;

  border:1px solid #e0e2ea;
  border-radius:16px;

  box-shadow:0 10px 30px rgba(22,24,35,.06);
}

.mr-stripe-admin .widefat thead th{
  background:#f5f6fa;
  color:#343746;
  font-weight:800;
}

.mr-stripe-admin .button{
  min-height:36px;
  padding:0 14px;

  border-color:#d8d9e5;
  border-radius:9px;

  background:#fff;
  color:#5148de;

  font-weight:700;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .mr-stripe-card{
    margin:24px auto;
    padding:25px;
    border-radius:24px;
  }

  .mr-stripe-head{
    grid-template-columns:56px 1fr;
    gap:15px;
    margin-bottom:26px;
  }

  .mr-stripe-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    font-size:25px;
  }

  .mr-stripe-head::after{
    position:static;
    display:inline-flex;
    grid-column:1 / -1;
    justify-self:start;
    margin-top:4px;
  }

  .mr-stripe-head h2{
    padding-right:0;
    font-size:27px !important;
  }

  .mr-stripe-head p{
    padding-right:0;
    font-size:14px !important;
  }

  .mr-stripe-pay-link{
    min-height:58px;
    border-radius:17px;
    font-size:16px !important;
  }
}

@media(max-width:460px){

  .mr-stripe-card{
    margin:16px auto;
    padding:20px;
    border-radius:21px;
  }

  .mr-stripe-head{
    grid-template-columns:50px 1fr;
  }

  .mr-stripe-icon{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:22px;
  }

  .mr-stripe-head h2{
    font-size:23px !important;
  }

  .mr-stripe-note{
    padding:15px 15px 15px 48px;
  }
}

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

  .mr-stripe-card *,
  .mr-stripe-card *::before,
  .mr-stripe-card *::after{
    transition:none !important;
    animation:none !important;
  }
}