/* ==========================================================================
   Pata Deals theme — WordPress-specific styles on top of site.css.
   ========================================================================== */

/* Keep the sticky header below the WP admin bar when logged in. */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* WP editor content niceties inside .prose */
.prose img { border-radius: 12px; height: auto; }
.prose .aligncenter { margin-inline: auto; display: block; }

/* The site is a light design; pin the plugin widgets to it so their own
   prefers-color-scheme:dark styles never flip cards/inputs dark mid-page. */
.pd-cat .pd-cat__select,
.pd-cat .pd-cat__input,
.pd-exp .pd-exp__input,
.pd-track .pd-track__input {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.pd-cat .pd-cat__card,
.pd-exp .pd-exp__card,
.pd-exp .pd-exp__detail {
  background: #fff;
  border-color: var(--line);
}
.pd-cat .pd-cat__name,
.pd-exp .pd-exp__name {
  color: var(--ink);
}
.pd-exp .pd-exp__price { color: var(--ink); }

/* Sample-data fallbacks (shown until the plugins are connected) */
.pd-demo__note { color: var(--text-soft); font-size: 0.85rem; margin: 1.2rem 0 0; }
.pd-demo .pd-cat__section .pill,
.pd-demo .pd-exp__section .pill { margin-left: 0.2rem; }
.rowhead .pill { margin-left: 0.6rem; vertical-align: middle; }

/* Home "hot right now" rows (products + experiences) */
.rowhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.rowhead h2 { margin-bottom: 0; }
.rowhead .btn { flex: 0 0 auto; }

.hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 980px) { .hot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hot-grid { grid-template-columns: 1fr; } }

.hot-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hot-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-soft);
  display: block;
}
.hot-card__name { font-weight: 600; margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.3; }
.hot-card__price { color: var(--red-dark); font-weight: 800; margin-top: 0.25rem; }
.hot-card__meta { color: var(--text-soft); font-size: 0.8rem; margin-top: 0.2rem; }

/* Updates (blog) listing */
.post-card { display: flex; flex-direction: column; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--red); }
.post-card__thumb { display: block; margin: -0.4rem 0 1rem; }
.post-card__thumb img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; }
.post-card__date {
  color: var(--text-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.post-card__more { font-weight: 700; margin-top: auto; padding-top: 0.6rem; }
.post-hero img { width: 100%; border-radius: var(--radius); }
.post-hero { margin: 0 0 1.5rem; }

.post-pagination { margin-top: 2.5rem; text-align: center; }
.post-pagination .nav-links { display: inline-flex; gap: 0.5rem; }
.post-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.2em;
  height: 2.2em;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.post-pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }

/* --------------------------------------------------------------------------
   Re-skin the Pata Deals plugin widgets (tracking + catalog) to the brand.
   The plugins ship neutral green; the theme pulls them into brand red and
   the site's card language — no plugin edits needed.
   -------------------------------------------------------------------------- */

/* The plugins print their inline CSS in the footer (after this sheet), so
   every override rides an extra ancestor class to win on specificity. */

/* patadeals-tracking ([patadeals_tracking]) */
.pd-track .pd-track__btn { background: var(--red); border-radius: 999px; font-weight: 700; padding: 0.6em 1.5em; }
.pd-track .pd-track__btn:hover:not(:disabled) { background: var(--red-dark); }
.pd-track .pd-track__input { border-radius: 12px; }
.pd-track .pd-track__input:focus { outline: none; border-color: var(--red); }
.pd-track { max-width: 640px; }
.pd-track h3 { margin-top: 0; }

/* patadeals-catalog ([patadeals_catalog]) */
.pd-cat .pd-cat__btn { background: var(--red); border-radius: 999px; font-weight: 700; }
.pd-cat .pd-cat__btn:hover:not(:disabled) { background: var(--red-dark); }
.pd-cat .pd-cat__buy { background: var(--red); border-radius: 999px; font-weight: 700; transition: background 0.15s ease; }
.pd-cat .pd-cat__buy:hover { background: var(--red-dark); }
.pd-cat .pd-cat__select, .pd-cat .pd-cat__input { border-radius: 12px; }
.pd-cat .pd-cat__select:focus, .pd-cat .pd-cat__input:focus { outline: none; border-color: var(--red); }
.pd-cat .pd-cat__card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pd-cat .pd-cat__price { color: var(--ink); }
.pd-cat .pd-cat__towns a, .pd-cat .pd-cat__clear { color: var(--red); }
.pd-cat h3 { font-size: 1.4rem; }

/* patadeals-experiences ([patadeals_experiences]) — ships purple; pull it
   into brand red and the site's card language. */
.pd-exp .pd-exp__btn { background: var(--red); border-radius: 999px; font-weight: 700; }
.pd-exp .pd-exp__btn:hover:not(:disabled) { background: var(--red-dark); }
.pd-exp .pd-exp__book { background: var(--red); border-radius: 999px; font-weight: 700; transition: background 0.15s ease; }
.pd-exp .pd-exp__book:hover { background: var(--red-dark); }
.pd-exp .pd-exp__book--out { background: var(--line); color: var(--text-soft) !important; }
.pd-exp .pd-exp__input, .pd-exp .pd-exp__select { border-radius: 12px; }
.pd-exp .pd-exp__input:focus, .pd-exp .pd-exp__select:focus { outline: none; border-color: var(--red); }
.pd-exp .pd-exp__card, .pd-exp .pd-exp__detail { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pd-exp .pd-exp__price { color: var(--ink); }
.pd-exp .pd-exp__nav a, .pd-exp .pd-exp__clear { color: var(--red); }
.pd-exp h3 { font-size: 1.4rem; }

/* patadeals-intl-parcels ([patadeals_intl_parcels]) — ships green; pull it
   into brand red and the site's quote-card language on the Deliveries page. */
.pd-intl { max-width: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.8rem; margin: 0; }
.pd-intl h3 { margin-top: 0; }
.pd-intl .pd-intl__type { border-radius: 999px; font-weight: 600; }
.pd-intl .pd-intl__type.is-active { background: var(--red); border-color: var(--red); }
.pd-intl .pd-intl__btn { background: var(--red); border-radius: 999px; font-weight: 700; }
.pd-intl .pd-intl__btn:hover:not(:disabled) { background: var(--red-dark); }
.pd-intl .pd-intl__btn--ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.pd-intl .pd-intl__btn--ghost:hover:not(:disabled) { background: var(--bg-soft); }
.pd-intl .pd-intl__input, .pd-intl .pd-intl__select { border-radius: 12px; }
.pd-intl .pd-intl__input:focus, .pd-intl .pd-intl__select:focus { outline: none; border-color: var(--red); }
.pd-intl .pd-intl__result { border-radius: 12px; background: var(--bg-soft); }

/* The catalog/experiences page sections get a soft backdrop so cards pop. */
.catalog-section { background: var(--bg-soft); }
.catalog-section .pd-cat, .catalog-section .pd-exp { margin: 0; }

/* Trending page: Products / Experiences tab bar over the plugin widgets. */
.trend-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.trend-tab {
	appearance: none;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	padding: 0.65rem 1.4rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.trend-tab:hover { border-color: var(--red); color: var(--red); }
.trend-tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.trend-pane .pd-cat, .trend-pane .pd-exp { margin: 0; }