/* HRDB API Landing – full styles (tech gradient + grid, glass cards)
   Scope: .hrdb-api-section
*/

.hrdb-api-section{
  position: relative;
  padding: 5px 0;
  color: rgba(255,255,255,.90);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.72)),
    url('https://horseracedatabase.com/wp-content/uploads/2024/02/BG.jpg') center center / cover no-repeat;
  background-color: #070707;
}

body.page-id-25856,
body.page-id-25950{
  background:
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.68)),
    url('https://horseracedatabase.com/wp-content/uploads/2024/02/BG.jpg') center center / cover fixed no-repeat !important;
  background-color: #070707 !important;
}

body.page-id-25856 .page-content,
body.page-id-25856 .colibri-page-content,
body.page-id-25856 #content,
body.page-id-25856 .h-section-global-spacing,
body.page-id-25950 .page-content,
body.page-id-25950 .colibri-page-content,
body.page-id-25950 #content,
body.page-id-25950 .h-section-global-spacing{
  background: transparent !important;
}

body.page-id-25856 .post-25856,
body.page-id-25950 .post-25950,
body.page-id-25856 .page,
body.page-id-25950 .page{
  background: transparent !important;
}

body.page-id-25856 .hrdb-footnav__social,
body.page-id-25950 .hrdb-footnav__social{
  display: none !important;
}

body.page-id-25856 .sharedaddy,
body.page-id-25856 .jetpack-likes-widget-wrapper,
body.page-id-25856 .sd-sharing-enabled,
body.page-id-25950 .sharedaddy,
body.page-id-25950 .jetpack-likes-widget-wrapper,
body.page-id-25950 .sd-sharing-enabled{
  display: none !important;
}

body.page-id-25856 .hrdb-footnav__inner,
body.page-id-25950 .hrdb-footnav__inner{
  justify-content: space-between;
}

.hrdb-api-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity:.18;
  mask-image: radial-gradient(closest-side at 50% 25%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}

.hrdb-api-section::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,159,28,.18), transparent 55%),
    radial-gradient(900px 500px at 80% 0%, rgba(0,190,255,.12), transparent 55%);
  pointer-events:none;
}

.hrdb-api-section__wrap{
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  z-index: 1;
}

.hrdb-api-section__head{
  text-align: center;
  margin-bottom: 18px;
}

.hrdb-api-section__title{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: .02em;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 40px rgba(0,0,0,.65);
}

.hrdb-api-section__subtitle{
  margin: 10px auto 0;
  max-width: 760px;
  font-size: 15px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

.hrdb-api-plansbar{
  margin-top: 1px;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 16px 18px;
}

.hrdb-api-control{
  position: fixed;
  inset: 0 auto auto 0;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.hrdb-api-tabs{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 6px;
}

.hrdb-api-tab{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.86);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#plans .hrdb-api-tab{
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}

#plans #hrdb-api-region-hk:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="hk"],
#plans #hrdb-api-region-uk:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="uk"],
#plans #hrdb-api-region-full:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="full"],
#plans #hrdb-api-region-usa:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="usa"],
#plans #hrdb-api-region-nac:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="nac"],
#plans #hrdb-api-region-global:checked ~ .hrdb-api-section__wrap .hrdb-api-tab[data-region="global"]{
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.hrdb-api-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,159,28,.28);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.hrdb-api-tab__label{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
}

.hrdb-api-tab__pill{
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);
}

.hrdb-api-tab.is-active{
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.hrdb-api-tab.is-active .hrdb-api-tab__pill{
  border-color: rgba(255,159,28,.35);
  background: rgba(255,159,28,.10);
  color: rgba(255,255,255,.88);
}

.hrdb-api-toggle{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hrdb-api-toggle__btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.80);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease;
}

.hrdb-api-toggle__btn:hover{
  border-color: rgba(255,159,28,.30);
}

.hrdb-api-toggle__btn.is-active{
  background: rgba(255,159,28,.14);
  border-color: rgba(255,159,28,.42);
  color: rgba(255,255,255,.92);
}

#plans .hrdb-api-toggle__btn{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.80);
}

.hrdb-api-plan__priceval--annual{
  display: none;
}

#plans #hrdb-api-billing-annual:checked ~ .hrdb-api-section__wrap .hrdb-api-plan__priceval--monthly{
  display: none;
}

#plans #hrdb-api-billing-annual:checked ~ .hrdb-api-section__wrap .hrdb-api-plan__priceval--annual{
  display: inline;
}

#plans #hrdb-api-billing-monthly:checked ~ .hrdb-api-section__wrap .hrdb-api-toggle__btn[data-billing="monthly"],
#plans #hrdb-api-billing-annual:checked ~ .hrdb-api-section__wrap .hrdb-api-toggle__btn[data-billing="annual"]{
  background: rgba(255,159,28,.14);
  border-color: rgba(255,159,28,.42);
  color: rgba(255,255,255,.92);
}

.hrdb-api-regionnote{
  grid-column: 1 / -1;
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.62);
}

/* Regions with a single plan tier (FULL/USA/USA+CAN/GLOBAL) only ever show
   2 cards (the plan + Enterprise) - without this they'd sit left-aligned
   in a 3-column track with empty space on the right. Centred, narrower
   columns only at desktop width; the existing max-980px/640px breakpoints
   below already collapse to 2/1 columns full-width and take over there. */
@media (min-width: 981px){
  .hrdb-api-plansgrid.is-narrow{
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
  }
}

/* Visible/stacked by default so every region's plans are readable even if
   the JS tab-switcher never runs. Only once JS confirms it's running (adds
   .hrdb-api-js to the [data-hrdb-plans] root) do we hide inactive regions
   and behave like real tabs. */
.hrdb-api-plansgrid{
  display: grid;
  margin-top: 18px;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

#plans #hrdb-api-region-hk:checked ~ .hrdb-api-section__wrap [data-region-panel],
#plans #hrdb-api-region-uk:checked ~ .hrdb-api-section__wrap [data-region-panel],
#plans #hrdb-api-region-full:checked ~ .hrdb-api-section__wrap [data-region-panel],
#plans #hrdb-api-region-usa:checked ~ .hrdb-api-section__wrap [data-region-panel],
#plans #hrdb-api-region-nac:checked ~ .hrdb-api-section__wrap [data-region-panel],
#plans #hrdb-api-region-global:checked ~ .hrdb-api-section__wrap [data-region-panel]{
  display: none;
}

#plans #hrdb-api-region-hk:checked ~ .hrdb-api-section__wrap [data-region-panel="hk"],
#plans #hrdb-api-region-uk:checked ~ .hrdb-api-section__wrap [data-region-panel="uk"],
#plans #hrdb-api-region-full:checked ~ .hrdb-api-section__wrap [data-region-panel="full"],
#plans #hrdb-api-region-usa:checked ~ .hrdb-api-section__wrap [data-region-panel="usa"],
#plans #hrdb-api-region-nac:checked ~ .hrdb-api-section__wrap [data-region-panel="nac"],
#plans #hrdb-api-region-global:checked ~ .hrdb-api-section__wrap [data-region-panel="global"]{
  display: grid;
}

[data-hrdb-plans].hrdb-api-js ~ .hrdb-api-plansgrid{
  display: none;
}

[data-hrdb-plans].hrdb-api-js ~ .hrdb-api-plansgrid.is-active{
  display: grid; /* re-affirmed for clarity, matches the always-on base rule */
}

@media (max-width: 980px){
  .hrdb-api-plansgrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .hrdb-api-plansgrid{
    grid-template-columns: 1fr;
  }
}

.hrdb-api-plan{
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 18px 18px 16px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.hrdb-api-plan::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 220px at 20% 0%, rgba(255,159,28,.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.hrdb-api-plan.is-soon{ opacity:.82; }
.hrdb-api-plan.is-soon::before{ opacity:.5; }

.hrdb-api-plan__top{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.hrdb-api-plan__name{
  margin: 0;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,159,28,.95);
  font-weight: 800;
}

.hrdb-api-plan__tag{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,159,28,.28);
  background: rgba(255,159,28,.10);
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

.hrdb-api-plan__desc{
  position: relative;
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.55;
}

.hrdb-api-plan__price{
  position: relative;
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hrdb-api-plan__priceval{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
}

.hrdb-api-plan__priceunit{
  font-size: 13px;
  color: rgba(255,255,255,.62);
}

.hrdb-api-plan__meta{
  position: relative;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hrdb-api-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.76);
}

.hrdb-api-plan__list{
  position: relative;
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.55;
}

.hrdb-api-plan__list li{ margin: 6px 0; }

.hrdb-api-plan__cta{
  position: relative;
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.hrdb-api-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  border: 1px solid rgba(255,159,28,.40);
  background: rgba(255,159,28,.14);
  color: rgba(255,255,255,.92);
}

.hrdb-api-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,159,28,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

.hrdb-api-btn--ghost{
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
}

.hrdb-api-btn--ghost:hover{
  border-color: rgba(255,159,28,.30);
}

/* Features grid */
.hrdb-api-features{
  margin-top: 40px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px){
  .hrdb-api-features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .hrdb-api-features{ grid-template-columns: 1fr; }
}

.hrdb-api-feature{
  border-radius: 20px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hrdb-api-feature__kicker{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,159,28,.95);
  font-weight: 800;
}

.hrdb-api-feature__title{
  margin: 8px 0 0;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.hrdb-api-feature__desc{
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}

/* Quickstart */
.hrdb-api-quickstart{
  margin-top: 40px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 980px){
  .hrdb-api-quickstart{ grid-template-columns: 1fr; }
}

.hrdb-api-codecard{
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.hrdb-api-codecard__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.hrdb-api-codecard__title{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.hrdb-api-copy{
  appearance:none;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.hrdb-api-copy:hover{
  border-color: rgba(255,159,28,.30);
}

.hrdb-api-code{
  margin: 0;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  white-space: pre;
  overflow: auto;
}

/* Plan CTA alignment (button + hint) */
.hrdb-api-plan__actions{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.hrdb-api-plan__actions .hrdb-api-btn{
  align-self: center;
}

.hrdb-api-plan__hint{
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.72);
  max-width: 240px;
}

/* Defensive: avoid theme resetting our buttons/links */
.hrdb-api-section a{ color: inherit; }
.hrdb-api-section a:hover{ text-decoration: none; }