/* ==========================================================================
   Modern Checkout UI (full)
   - Layout (left summary + right form)
   - Order Card (left)
   - Form Fields (right)
   - Grouped inputs (phone / country)
   - Payment Options (Full vs Deposit)
   - Payment Method chips (badges + icons)
   - CTA Button
   ======================================================================= */
/* ========== Layout ========== */
.mc-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:18px}
@media(max-width:1024px){.mc-wrap{grid-template-columns:1fr}}

.mc-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 10px 24px rgba(2,6,23,.06)}

/* ========== Compact mode (embed) ========== */
.mc-wrap.is-compact{
  grid-template-columns:1fr;
  gap:12px;
  max-width:980px;
  margin:0 auto;
  --mc-control-h:42px;
}
.mc-wrap.is-compact .mc-left{display:none}
.mc-wrap.is-compact .mc-card{border-radius:16px;padding:14px}
.mc-wrap.is-compact .mc-btn{border-radius:16px;font-size:18px;padding:14px 18px}

/* ===== Mobile clean-up ===== */
@media (max-width: 640px){
  .mc-wrap{gap:12px}
  .mc-card, .mc-order{border-radius:0;border-left:0;border-right:0;margin:0;padding:14px;box-shadow:none}
  .mc-order-total{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .mc-order-hero img{width:180px}
  .mc-order-head{padding:12px 12px}
  .mc-order-hero{padding:14px 12px}
  .mc-sec{padding:12px}
  .mc-right.mc-card{padding:14px}
  .mc-paychoice .mc-grid2{margin:0}
  .mc-card.mc-manual{border-radius:12px;border-style:solid;margin-top:10px}
  .mc-card.mc-manual .mc-list-lines li{align-items:flex-start;gap:10px}
  .mc-card.mc-manual .mc-list-lines li span{min-width:90px}
  .mc-card.mc-manual .mc-list-lines li strong{text-align:right;word-break:break-word}
  .mc-payonsite-qr .mc-qr-card{max-width:300px;margin:0 auto}
}

/* Override theme .entry-content-wrap padding on checkout page */
.entry-content-wrap .mc-wrap{
  margin-left:-1rem;
  margin-right:-1rem;
}
@media (max-width: 767px){
  .entry-content-wrap .mc-wrap{
    margin-left:-2rem;
    margin-right:-2rem;
  }
}

/* Manual/Pay On Site bank card */
.mc-card.mc-manual { border:1px dashed #d1d5db; }
.mc-card.mc-manual .mc-list-lines li { border-bottom: 1px dashed #eee; }
.mc-card.mc-manual .mc-list-lines li span{min-width:110px}
.mc-card.mc-manual .mc-list-lines li strong{font-weight:700}

.mc-payonsite-qr {
  animation: fadeIn .25s ease;
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:none; }
}


/* Two-up helper */
.mc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.mc-grid2{grid-template-columns:1fr}}

/* ========== Order Card (left) ========== */
.mc-order{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(2,6,23,.06);font-size:.95rem}
.mc-order-head{padding:14px 16px;border-bottom:1px solid #eef0f3;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.9rem;color:#111}
.mc-order-hero{padding:18px 16px;border-bottom:1px solid #eef0f3;text-align:center}
.mc-order-hero img{width:220px;max-width:100%;height:auto;display:block;margin:0 auto 8px}
.mc-order-title{font-weight:800;letter-spacing:.02em;margin-bottom:2px;font-size:1.05rem}
.mc-order-sub{color:#6b7280;font-size:.9rem}
.mc-price-line{margin-top:6px;color:var(--mc-primary,#2563eb);font-weight:700}
.mc-duration{font-weight:700}

.mc-sec{padding:14px 16px;border-bottom:1px solid #eef0f3}
.mc-sec-title{font-weight:800;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px;color:#111}

.mc-row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0}
.mc-row dt{margin:0;color:#6b7280}
.mc-row dd{margin:0;font-weight:600}

.mc-list-lines{list-style:none;margin:0;padding:0}
.mc-list-lines li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed #eef0f3}
.mc-list-lines li:last-child{border-bottom:0}

.mc-order-total{background:#f3f4f6;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;border-top:1px solid #e5e7eb;border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.mc-order-line{background:#f8fafc;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #e5e7eb;font-weight:600;color:#334155;font-size:.9rem}

/* Booking details: location rows */
.mc-linerows{display:grid;grid-template-columns:120px 1fr auto;gap:8px 14px;align-items:center}
.mc-linerows .label{color:#6b7280;font-weight:700}
.mc-linerows .place{min-width:0}
.mc-linerows .amt{font-weight:800}

/* ========== Form Fields (right) ========== */
:root{--mc-control-h:46px}

.mc-right.mc-card input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.mc-right.mc-card textarea,
.mc-right.mc-card select{
  display:block;width:100%;height:var(--mc-control-h);padding:12px 12px;
  border:1px solid #e5e7eb;border-radius:10px;background:#fff;line-height:1.3;
  font:inherit;box-sizing:border-box;margin:0;
}

.mc-right.mc-card textarea{min-height:var(--mc-control-h);height:auto;resize:vertical}

/* keep grid children same height */
.mc-right .mc-grid2 input,
.mc-right .mc-grid2 textarea,
.mc-right .mc-grid2 select{height:var(--mc-control-h)}

.mc-right .mc-sec-title{margin-bottom:6px}
.mc-sec-title{margin-top:10px}

.mc-wrap .mc-card input:focus,
.mc-wrap .mc-card textarea:focus,
.mc-wrap .mc-card select:focus{
  border-color:var(--mc-primary,#2563eb);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mc-primary,#2563eb) 18%, transparent);
}

.mc-field{display:block;margin-bottom:4px;font-weight:600}
.mc-hint{font-size:.85rem;color:#6b7280}

/* ========== Grouped controls (phone / country) ========== */
.mc-input-group{
  display:flex;align-items:stretch;border:1px solid #e5e7eb;border-radius:10px;background:#fff;
  height:var(--mc-control-h);padding:0;margin-bottom:14px;overflow:hidden
}
.mc-input-group:focus-within{
  border-color:var(--mc-primary,#2563eb);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mc-primary,#2563eb) 18%, transparent);
}
.mc-input-group select,
.mc-input-group input{border:0!important;border-radius:0!important;background:transparent;outline:none}

.mc-phone-ui .mc-dial-wrap{position:relative;display:flex;align-items:center}
.mc-phone-ui .mc-select{min-width:180px;padding:0 34px 0 12px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.mc-phone-ui .mc-chevron{position:absolute;right:10px;width:16px;height:16px;color:#6b7280;pointer-events:none}
.mc-phone-ui .mc-divider{width:1px;align-self:stretch;background:#e5e7eb}
#mc_phone_local{flex:1;min-width:0;padding:0 14px;height:100%}
.mc-input-group .mc-select.full{width:100%;padding:0 14px;height:100%;appearance:none}

@media(max-width:520px){.mc-phone-ui .mc-select{min-width:140px}}

/* ========== Payment Options (Full / Deposit) ========== */
.mc-order-head + .mc-paychoice{margin-top:12px}
.mc-paychoice .mc-grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin: 15px;
}
@media(max-width:640px){.mc-paychoice .mc-grid2{grid-template-columns:1fr 1fr}}

.mc-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .mc-grid3 { grid-template-columns: 1fr; }
}


.mc-radio{position:relative;display:block;cursor:pointer}

/* Keep native input hidden (no duplicate dots) */
.mc-radio input{position:absolute;inset:0;opacity:0;pointer-events:none}

/* Card shell – IMPORTANT: target only the OUTER span */
.mc-radio > span{
  display:block;position:relative;height:100%;
  padding:12px 16px 12px 45px;border:1.6px solid #e6e8ee;border-radius:20px;background:#f5f6f8;
  transition:border-color .2s,box-shadow .2s,background .2s;min-height:60px
}
.mc-radio .title{display:block;font-weight:700;font-size:16px;margin:0 0 6px}
.mc-radio .amount{font-style:normal;font-weight:700;font-size:16px}
.mc-radio .sub{display:block;margin-top:6px;font-size:.70rem;opacity:.7}

/* Center title for Option Payment cards */
#mc-deposit-block .mc-radio .title{ text-align:middle; }

/* Custom radio visualization on outer span only */
.mc-paychoice{--ring:16px;--dot:8px;--left:20px}
.mc-radio > span::before,
.mc-radio > span::after{
  content:"";position:absolute;left:var(--left);top:50%;transform:translateY(-50%);border-radius:999px
}
.mc-radio > span::before{width:var(--ring);height:var(--ring);background:#fff;border:2px solid #cfd3dc}
.mc-radio > span::after{width:var(--dot);height:var(--dot);left:calc(var(--left) + (var(--ring) - var(--dot))/2);background:transparent}
.mc-radio input:checked + span{
  background:color-mix(in srgb, var(--mc-primary,#2563eb) 10%, #ffffff);
  border-color:var(--mc-primary,#2563eb);
}
.mc-radio input:checked + span::before{border-color:var(--mc-primary,#2563eb)}
.mc-radio input:checked + span::after{background:var(--mc-primary,#2563eb)}
.mc-radio input:checked + span .title,
.mc-radio input:checked + span .amount{color:#111827}

/* ========== Payment method chips & logos ========== */
.mc-badges{display:flex;gap:.375rem;margin-top:.25rem;flex-wrap:wrap}
.mc-badge{font-size:12px;}
.mc-icons{display:flex;gap:.400rem;margin-top:.25rem;align-items:center;flex-wrap:wrap}
.mc-icon{height:18px;width:auto;vertical-align:middle}

/* Defensive resets so themes don’t bleed in */
.mc-paychoice .mc-radio .title{display:block;margin-bottom:2px}
.mc-wrap .mc-badge{box-shadow:none!important;background-image:none!important}
.mc-radio > span .mc-badges,
.mc-radio > span .mc-icons,
.mc-radio > span .sub{position:relative;background:transparent;border:0;box-shadow:none}

/* Icon sizing guard */
.mc-radio > span .mc-icon{
  height:18px!important;max-height:18px!important;width:auto!important;object-fit:contain;
  display:inline-block!important;margin:0;padding:0;border:0;box-shadow:none!important;border-radius:0!important;max-width:none!important
}

/* ========== CTA Button ========== */
.mc-btn{
  display:block;
  width:100%;
  padding:15px 20px;
  border:0;
  border-radius:20px;
  background:var(--mc-primary,#2563eb);
  color:#fff;
  font-weight:800;
  font-size:20px;
  letter-spacing:.02em;
  text-transform:
  uppercase; cursor:pointer;
  margin-top:15px;
}
.mc-paychoice + .mc-btn{margin-top:15px}
.mc-btn:active{transform:translateY(1px)}
.mc-btn.ghost{background:#f3f4f6;color:#111;border:1px solid #e5e7eb}

/* Space between payment cards and CTA */
.mc-paychoice{margin-bottom:0}
.mc-paychoice + .mc-btn{margin-top:15px
    
}

/* ================== Thank-You (minimalist card, like reference) ================== */
.mc-ty-shell{max-width:1000px;margin:24px auto 56px;padding:0 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.mc-ty-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:36px 12px 18px}
.mc-ty-tick{width:76px;height:76px;border-radius:999px;background:#e9f8ef;color:#16a34a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:30px;box-shadow:0 0 0 6px #f3fcf6}
.mc-ty-hero h1{margin:10px 0 0;font-size:26px;letter-spacing:.2px}
.mc-ty-code{color:#6b7280;margin-top:4px}

.mc-ty-card{
    background:#fff;
    /*border:1px solid #edf0f3;*/
    border-radius:18px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    overflow:hidden;
    margin: 20px;
    padding: 15px;
}

.mc-ty-car{
  display:flex;
  flex-direction:column;      /* stack img then title */
  align-items:center;         /* center both */
  text-align:center;
  gap:10px;
}

/* Desktop size for the image */
.mc-ty-car > img{
  display:block;
  width:250px;                /* as requested */
  height:auto;                /* keep aspect ratio */
  border-radius:12px;         /* optional: matches card vibe */
  object-fit:cover;
}

/* Title styling */
.mc-ty-car-title{
  font-weight:600;
  font-size:18px;
  line-height:1.2;
  color:#0f172a;
}

.mc-ty-actions {
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;
  gap: 10px;                 /* space between buttons */
  margin-top: 14px;
  flex-wrap: wrap;           /* so it can wrap neatly on mobile */
  text-align: center;
}

.mc-ty-actions .mc-ty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  line-height: 1;
  white-space: nowrap;
}

/* keep icons neat */
.mc-ty-actions .mc-ty-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.mc-ty-greet{
  margin-top:10px;
  font-size:20px;
  color:#475569; /* slate-ish */
  text-align: center;
}
.mc-ty-greet strong{ font-weight:600; }

.mc-ty-btn.green .mc-ty-btn.ghost svg {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
}

.mc-ty-row{display:grid;grid-template-columns:1fr 260px;gap:16px;padding:18px}
@media (max-width:860px){.mc-ty-row{grid-template-columns:1fr}}

.mc-ty-left{display:flex;gap:18px;align-items:flex-start}
.mc-ty-car{display:flex;gap:14px;align-items:center;min-width:220px}
.mc-ty-car img{width:170px;height:auto;border-radius:12px;background:#f6f7fb;object-fit:cover}
.mc-ty-car-title{font-weight:700}

.mc-ty-lines{display:grid;gap:8px}
.mc-ty-lines .line{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed #eef1f4}
.mc-ty-lines .line:last-child{border-bottom:0}
.mc-ty-lines .icon{font-size:16px;line-height:1;margin-top:2px}
.mc-ty-lines .label{font-size:12px;color:#6b7280}
.mc-ty-lines .value{font-weight:600}
.mc-ty-lines .meta{color:#6b7280;font-size:12px}
.mc-ty-right .mc-ty-pay-btn { margin-top: 12px; }
@media (max-width: 640px){
  .mc-ty-right .mc-ty-pay-btn .mc-ty-btn { width: 100%; text-align: center; }
}

.mc-ty-price{background:#f0f7ff;border:1px solid #e5efff;border-radius:16px;padding:12px 16px;text-align:right;min-width:210px}
.mc-ty-price .amount{font-weight:700}
.mc-ty-price .amount span{font-size:24px;margin-left:6px}
.mc-ty-price .note{font-size:12px;color:#64748b;margin-top:4px}

.mc-ty-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:10px 16px;
    border:1px solid var(--mc-primary,#2563eb);
    background:var(--mc-primary,#2563eb);
    color:#fff;
    text-decoration:none;
    font-weight:400
}
.mc-ty-btn:hover{
    filter:brightness(0.98)
}
.mc-ty-btn.blue{
    background:var(--mc-primary,#2563eb);
    color: #fff;
    border-color:var(--mc-primary,#2563eb);
    font-size: medium;
    padding:10px 51px;
}
.mc-ty-btn.ghost{
    background:#fff;
    color:#334155;
    border-color:#e5e7eb;
    font-size: small;
}
.mc-ty-btn.green{
    background:#16a34a;
    border-color:#16a34a;
    font-size: small;
}
.mc-ty-btn.gray{
    background:#e5e7eb;
    color:#111827;
    border-color:#e5e7eb;
    font-size: small;
    padding: 13px 22px;
}

.mc-ty-actions .mc-ty-btn svg{
  flex:0 0 auto;
}


/* ===== PHONE LAYOUT (<=640px) ===== */
@media (max-width: 640px){

  /* Wider feel: edge-to-edge container */
  .mc-ty-card{
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0 -16px;    /* bleed to screen edges */
    padding: 16px;
  }

  /* Inner booking content surface */
  .mc-ty-card .mc-ty-row{
    background: #fff;
    border: 0;
    border-radius: 14px;
    padding: 12px;
    margin: 0;
  }

  /* Car block — image on top, title below, centered */
  .mc-ty-left{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
    min-width: 0;
  }
  .mc-ty-car{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  .mc-ty-car img{
    width: 140px;
    height: auto;
    border: none;
    border-radius: 12px;
    background: #f6f7fb;
    object-fit: cover;
  }
  .mc-ty-car-title{
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Pick-up | Return side-by-side */
  .mc-ty-lines{
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  .mc-ty-lines .line{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-bottom: 0 !important;
    padding: 0;
  }
  .mc-ty-lines .icon{ margin-top: 2px; }
  .mc-ty-lines .label{ font-size: 11px; color:#6b7280; }
  .mc-ty-lines .value{ font-size: 18px; font-weight: 800; line-height:1.2; }
  .mc-ty-lines .meta{ font-size: 12px; color:#6b7280; }

  /* Price chip full-width + pay button below */
  .mc-ty-right{ width: 100%; margin-top: 10px; }
  .mc-ty-price{
    width: 100%;
    min-width: 0;
    text-align: center;
    padding: 12px;
    background:#f0f7ff;
    border:1px solid #e5efff;
    border-radius: 14px;
  }
  .mc-ty-price .amount span{ font-size: 22px; }
  .mc-ty-right .mc-ty-pay-btn{ margin-top: 10px; }
  .mc-ty-right .mc-ty-pay-btn .mc-ty-btn{
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }

  /* Action buttons centered; comfy full-width */
  .mc-ty-actions{
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    text-align: center;
  }
  .mc-ty-actions .mc-ty-btn{
    width: 100%;
    max-width: 420px;
    padding: 12px 16px;
    font-size: 14px;
  }
  .mc-ty-actions .mc-ty-btn svg{
    width: 16px; height: 16px; margin-right: 6px;
  }

  /* Kill any theme word-breaking inside TY card */
  .mc-ty-card,
  .mc-ty-code,
  .mc-ty-car-title,
  .mc-ty-lines .value,
  .mc-ty-lines .label,
  .mc-ty-lines .meta{
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Hero tighten (optional) */
  .mc-ty-hero{gap:6px;padding:28px 8px 10px}
  .mc-ty-tick{width:56px;height:56px;font-size:22px;box-shadow:0 0 0 5px #f3fcf6}
  .mc-ty-hero h1{font-size:20px;margin-top:8px}
  .mc-ty-code{font-size:12px}
  .mc-ty-greet{font-size:16px}
}

/* desktop icon sizing stays clean */
.mc-ty-btn.green svg,
.mc-ty-btn.ghost svg {
  width: 20px; height: 20px; margin-right: 6px; vertical-align: middle;
}

.mc-ty-price{display:flex;flex-direction:column;gap:6px}
.mc-ty-status-badge{
  display:inline-block;align-self:flex-start;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid transparent
}
.mc-st-paid{background:#e8fff2;border-color:#bdf1cf;color:#0e7a3e}
.mc-st-half{background:#fff7e8;border-color:#ffe1a6;color:#a15a00}
.mc-st-pending{background:#f4f6fb;border-color:#d9dfef;color:#2b3a67}

.mc-status-half{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:#fff7e8;border:1px solid #ffe1a6;color:#a15a00;font-weight:600
}

/* =============================================================================== */

/* ========== Booking Orders (Admin) ========== */

.mc-tag{display:inline-block;background:#eef;border-radius:999px;padding:2px 8px;font-size:11px}
.mc-status-prebook{background:#ecfeff;border:1px solid #67e8f9;padding:2px 8px;border-radius:999px}
.mc-status-pending{background:#fff7e6;border:1px solid #ffd591;padding:2px 8px;border-radius:999px}
.mc-status-processing{background:#e6f4ff;border:1px solid #91caff;padding:2px 8px;border-radius:999px}
.mc-status-paid{background:#f6ffed;border:1px solid #b7eb8f;padding:2px 8px;border-radius:999px}
.mc-status-failed{background:#fff1f0;border:1px solid #ffa39e;padding:2px 8px;border-radius:999px}
.mc-status-refunded{background:#f0f5ff;border:1px solid #adc6ff;padding:2px 8px;border-radius:999px}
.mc-badge{background:#f5f5f5;padding:2px 8px;border-radius:999px}

/* =============================================================================== */

/* one-click guard UI */
.mc-btn.is-loading { opacity:.85; pointer-events:none; }
.mc-btn[disabled]  { opacity:.6;  cursor:not-allowed; }
/* tiny spinner */
.mc-spin{
  width:16px;height:16px;display:inline-block;vertical-align:-3px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:mcspin .8s linear infinite;margin-right:8px;
}
@keyframes mcspin{to{transform:rotate(360deg)}}

/* QR card */
.mc-qr-card{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  text-align:center;
}

.mc-qr-title{
  font-weight:600;
  margin-bottom:8px;
}

/* Small QR */
.mc-qr-zoomable{
  max-width:300px;
  width:100%;
  height:auto;
  cursor: zoom-in;
  border-radius:8px;
}

/* ===== ZOOM OVERLAY ===== */
.mc-qr-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mc-qr-overlay img{
  width:100%;
  max-width:1200px;
  max-height:1200px;
  background:#fff;
  border-radius:14px;
  padding:14px;
}


.mc-qr-close{
  position:absolute;
  top:20px;
  right:20px;
  background:#fff;
  border-radius:50%;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
}