/* RoamNex eSIM Theme — destination-hub.css
 * Restyles the PLUGIN destination hub (.esimaccess-dh-*) into the RoamNex look,
 * and styles the theme FALLBACK (.rnx-dhub--fallback / .rnx-card*) to match.
 * The plugin owns the hub markup + tab JS; this file is presentation only.
 * ------------------------------------------------------------------------- */

/* ===== Shared card grid ================================================= */
.esimaccess-dh-grid,
.rnx-cardgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

/* ===== Search ========================================================== */
.esimaccess-destination-hub{margin:0}
.esimaccess-dh-search,
.rnx-dhub__search{
  position:relative;
  display:flex;align-items:center;gap:10px;
  background:#fff;
  border:1.5px solid var(--rnx-border-strong);
  border-radius:var(--rnx-r-pill);
  padding:12px 18px;
  margin-bottom:20px;
  box-shadow:var(--rnx-shadow-1);
  transition:border-color .15s,box-shadow .15s;
}
.esimaccess-dh-search:focus-within,
.rnx-dhub__search:focus-within{border-color:var(--rnx-primary);box-shadow:0 0 0 4px rgba(255,120,86,.12)}
.esimaccess-dh-search-icon{color:var(--rnx-primary);font-size:18px;line-height:1}
.rnx-dhub__search .rnx-ic{color:var(--rnx-primary);width:20px;height:20px}
.esimaccess-dh-search-input,
.rnx-dhub__input{flex:1;border:0;outline:0;font-size:16px;background:transparent;color:var(--rnx-ink);font-family:inherit}

/* ===== Popular / hot row =============================================== */
.esimaccess-dh-hot{margin-bottom:22px}
.esimaccess-dh-hot h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--rnx-muted);font-weight:800;margin:0 0 12px}
.esimaccess-dh-hot-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.esimaccess-dh-hot-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;padding:14px 8px;border-radius:var(--rnx-r-md);border:1px solid var(--rnx-border);background:#fff;text-align:center;transition:transform .14s,box-shadow .2s,border-color .15s}
.esimaccess-dh-hot-item:hover{transform:translateY(-2px);box-shadow:var(--rnx-shadow-2);border-color:var(--rnx-tint-100)}
.esimaccess-dh-hot-item>span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--rnx-tint-50);color:var(--rnx-primary-strong);font-size:24px;overflow:hidden}
.esimaccess-dh-hot-item>span svg{width:26px;height:26px}
.esimaccess-dh-hot-item strong{font-size:12px;font-weight:700;color:var(--rnx-ink);line-height:1.2}

/* ===== Tabs ============================================================ */
.esimaccess-dh-tabs,
.rnx-dhub__tabs{
  display:inline-flex;
  gap:4px;
  background:var(--rnx-surface);
  border:1px solid var(--rnx-border);
  border-radius:var(--rnx-r-pill);
  padding:5px;
  margin-bottom:20px;
}
.esimaccess-dh-tabs button,
.rnx-dhub__tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:10px 22px;border-radius:var(--rnx-r-pill);
  font-weight:700;font-size:14px;color:var(--rnx-muted);
  transition:background .18s,color .18s,box-shadow .18s;
}
.esimaccess-dh-tabs button:hover,
.rnx-dhub__tab:hover{color:var(--rnx-ink)}
.esimaccess-dh-tabs button.is-active,
.rnx-dhub__tab.is-active{
  background:#fff;color:var(--rnx-primary-strong);
  box-shadow:var(--rnx-shadow-1);
}

/* ===== Panels ========================================================== */
.esimaccess-dh-panel,
.rnx-dhub__panel{display:none}
.esimaccess-dh-panel.is-active,
.rnx-dhub__panel.is-active{display:block;animation:rnx-fade .25s ease}
@keyframes rnx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rnx-dhub__hint{color:var(--rnx-muted);padding:20px;text-align:center;background:var(--rnx-surface);border-radius:var(--rnx-r-md)}

/* ===== Cards (plugin + theme) ========================================== */
.esimaccess-dh-card,
.rnx-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 14px;
  background:#fff;
  border:1px solid var(--rnx-border);
  border-radius:var(--rnx-r-lg);
  text-align:center;
  color:var(--rnx-ink);
  box-shadow:var(--rnx-shadow-1);
  transition:transform .14s ease,box-shadow .2s ease,border-color .15s;
  min-height:118px;justify-content:center;
}
.esimaccess-dh-card:hover,
.rnx-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--rnx-shadow-hover);
  border-color:var(--rnx-tint-100);
}
.esimaccess-dh-card strong,
.rnx-card__name{font-size:15px;font-weight:700;line-height:1.25}
.esimaccess-dh-card small,
.rnx-card__price,
.rnx-card__note{font-size:12.5px;color:var(--rnx-muted);font-weight:600}
.rnx-card__price{color:var(--rnx-primary-strong)}

/* Circular flag chips (plugin renders emoji or data-country-code) */
.esimaccess-dh-flag,
.rnx-card__flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--rnx-surface);
  border:1px solid var(--rnx-border);
  font-size:28px;line-height:1;overflow:hidden;
}
/* Flag image/SVG must fill the round container. Without this, the <img> that
 * icon_markup() outputs has no intrinsic size inside a fixed 52px overflow:hidden
 * span and collapses to nothing — which is why local cards looked blank while the
 * "popular" row (which wraps the same markup in a plain span) showed fine. */
.esimaccess-dh-flag img,
.esimaccess-dh-icon-img,
.esimaccess-dh-flag svg{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.esimaccess-dh-hot-item img,
.esimaccess-dh-hot-item .esimaccess-dh-icon-img{
  width:52px;height:52px;object-fit:cover;border-radius:50%;display:block;
}
.rnx-card__flag{font-size:13px;font-weight:800;color:var(--rnx-primary-strong);text-transform:uppercase}

/* Region map + globe icon treatment */
.esimaccess-dh-map,
.esimaccess-dh-globe,
.rnx-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:16px;
  background:var(--rnx-tint-50);
  color:var(--rnx-primary);
}
.esimaccess-dh-map svg,
.esimaccess-dh-globe svg,
.rnx-card__icon svg,
.rnx-card__icon .rnx-map{width:34px;height:34px}
.rnx-card__icon--globe{background:#eef6ff;color:#2563eb}

/* Badge */
.rnx-card__badge{position:absolute;top:8px;right:8px;background:var(--rnx-primary);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}

/* Region/global card icon-forward layout already handled above */
.esimaccess-dh-region-card strong,
.esimaccess-dh-global-card strong{margin-top:2px}

/* v1.0.18: remove the black gift/login promo card from destination lists. */
.rnx-gift-card{display:none!important;}


/* v1.0.19: Softer BNE-like typography. Avoid heavy Heiti/black weights on mobile UI. */
:root{
  --rnx-font:-apple-system,BlinkMacSystemFont,"PingFang SC","PingFang TC","Noto Sans SC","Noto Sans TC","Microsoft YaHei","Microsoft JhengHei","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rnx-display:-apple-system,BlinkMacSystemFont,"PingFang SC","PingFang TC","Noto Sans SC","Noto Sans TC","Microsoft YaHei","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html,body,.rnx-site,.rnx-main,.rnx-header,.rnx-bottomnav,.esimaccess-destination-hub,
.woocommerce,.woocommerce-page{font-family:var(--rnx-font)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,.rnx-pagehero__title,.rnx-shead__title,.rnx-destination-title,
.esimaccess-exact-destination-title,.esimaccess-destination-title{font-family:var(--rnx-display)!important;font-weight:700!important;letter-spacing:-.015em!important;}
.rnx-brand{font-weight:700!important;letter-spacing:-.015em!important;}
.rnx-menu li a,.rnx-drawer__menu li a,.rnx-drawer__item,.rnx-drawer__switch,.rnx-bottomnav__item{font-weight:500!important;}
.rnx-btn,.rnx-chip-btn,.rnx-opt,.button,.woocommerce a.button,.woocommerce button.button{font-weight:600!important;}
@media(max-width:768px){
  h1,.rnx-pagehero__title,.esimaccess-exact-destination-title,.esimaccess-destination-title{font-weight:700!important;}
  h2,h3,.rnx-shead__title{font-weight:650!important;}
}