/* GoodEasy Website v1.0.46 - fully unified 2px GoodEasy-yellow card outline */
:root{
  --ge-card-bg:#eef7f8;
  --ge-card-bg-hover:#e7f2f4;
  --ge-card-border:#e6bf3f;
  --ge-card-border-width:2px;
  --ge-card-shadow:0 14px 34px rgba(15,29,61,.070);
  --ge-card-radius:24px;
  --ge-card-text:#52657d;
}

/* Main GoodEasy cards / boxes: one soft light-blue surface across the site. */
.card,
.thanks-card,
.not-endorsement,
.comments-box,
.x-feature,
.x-visual-card,
.sticker-feature,
.sticker-card,
.value,
.official-link-card,
body[data-page="taxi"] .feature,
body[data-page="taxi"] .step,
body[data-page="taxi"] .info-card{
  background:var(--ge-card-bg) !important;
  border:var(--ge-card-border-width) solid var(--ge-card-border) !important;
  border-radius:var(--ge-card-radius) !important;
  box-shadow:var(--ge-card-shadow) !important;
}

/* v1.0.46 border normalization.
   Integer 2px borders avoid the anti-aliasing differences seen with 1.5px.
   All primary light cards use the exact same width, style and yellow color. */
.card,
.thanks-card,
.not-endorsement,
.comments-box,
.x-feature,
.x-visual-card,
.sticker-feature,
.sticker-card,
.value,
.official-link-card,
body[data-page="taxi"] .feature,
body[data-page="taxi"] .step,
body[data-page="taxi"] .info-card{
  box-sizing:border-box !important;
  border-width:var(--ge-card-border-width) !important;
  border-style:solid !important;
  border-color:var(--ge-card-border) !important;
}


.thanks-card:hover{
  background:var(--ge-card-bg-hover) !important;
  border-color:var(--ge-card-border) !important;
  box-shadow:0 18px 42px rgba(15,29,61,.090) !important;
}

.card p,
.thanks-card p,
.not-endorsement p,
.comments-box p,
.x-feature-copy .x-desc,
.sticker-feature p,
.sticker-card p,
.value p,
.official-link-card p,
body[data-page="taxi"] .feature p,
body[data-page="taxi"] .step p,
body[data-page="taxi"] .info-card p{
  color:var(--ge-card-text);
}

/* Keep intended dark/semantic surfaces. */
.dark .card{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.support-card{
  background:linear-gradient(135deg,#0f1d3d 0%,#163261 100%) !important;
  color:#fff !important;
}
.notice{background:#fff9e8 !important;}
body[data-page="taxi"] .display-card{background:#071321 !important;}

/* TaxiCatcher detail page Hero fix. */
body[data-page="taxi"] .hero h1{color:#fff !important;}
body[data-page="taxi"] .hero h1 span{color:var(--yellow) !important;}

/* Mobile safety: prevent the generic .taxi visual rule from enlarging the Apps icon. */
.app-icon.taxi{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  font-size:15px !important;
  line-height:1 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

@media(max-width:560px){
  .card,
  .thanks-card,
  .not-endorsement,
  .comments-box,
  .x-feature,
  .x-visual-card,
  .sticker-feature,
  .sticker-card,
  .value,
  .official-link-card,
  body[data-page="taxi"] .feature,
  body[data-page="taxi"] .step,
  body[data-page="taxi"] .info-card{
    border-radius:20px !important;
  }
  .app-icon.taxi{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    font-size:14px !important;
  }
}


/* v1.0.46 refinement: keep the overall X section in GoodEasy light blue,
   but give the inner X visual a subtly different blue-white surface. */
.x-visual-card{
  background:#f7f9fc !important;
  border:var(--ge-card-border-width) solid var(--ge-card-border) !important;
  box-shadow:0 14px 34px rgba(15,29,61,.060) !important;
}

/* v1.0.46 About-symbol repair.
   Use the original official GoodEasy symbol and center it with CSS only.
   mix-blend-mode:multiply lets the original white image background merge with
   the soft circular gradient instead of appearing as a white rectangle. */
.symbol-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.symbol-wrap:before{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.symbol-wrap img{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:min(66%,286px) !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  transform:none !important;
  mix-blend-mode:multiply !important;
}
@media(max-width:560px){
  .symbol-wrap img{width:min(64%,236px) !important;}
}

/* v1.0.46 refinement: make the central X motif instantly recognizable.
   Keep the GoodEasy soft-blue card system around it, but render X itself
   as a black circular badge with a white letter, matching X brand imagery. */
.x-mark{
  width:112px !important;
  height:112px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  flex:none !important;
  background:#111111 !important;
  color:#ffffff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:68px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.08em !important;
  margin:8px 0 14px !important;
  padding:0 6px 0 0 !important;
  box-shadow:0 12px 26px rgba(17,17,17,.18) !important;
}
@media(max-width:560px){
  .x-mark{
    width:92px !important;
    height:92px !important;
    font-size:56px !important;
    margin:6px 0 12px !important;
  }
}