/* ==========================================================================
   Pulse Moments — Responsive corrections (mobile + tablet)
   Loaded LAST, after dark.css and vendors.css, so these rules win without
   needing !important except where dark.css already uses it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero clearance under the fixed header
   .pm-header is position:fixed and 90px tall, but the home page renders no
   .pm-header-spacer. On desktop the hero's 560px min-height + vertical
   centering hides that; once the layout stacks, the H1 sits at 46px and the
   logo lands on top of it. Give the hero text real clearance instead.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.pm-hero3d__text { padding-top: 118px; }
}
@media (max-width: 600px) {
	.pm-hero3d__text { padding-top: 108px; }
	.pm-hero3d__text h1 { font-size: 34px; }
	.pm-hero3d__text p { font-size: 16px; }
	/* Full-width, thumb-sized hero buttons rather than two shrunken pills. */
	.pm-hero3d__btns { flex-direction: column; align-items: stretch; gap: 10px; }
	.pm-hero3d__btns .pm-btn { width: 100%; justify-content: center; padding: 14px 20px; }
	.pm-hero3d__scene { height: 300px; }
}

/* --------------------------------------------------------------------------
   2. Dashboard shell (admin + vendor)
   .pm-vn has no horizontal padding, so on a phone every card and heading
   touches the screen edge.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.pm-vn { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
	.pm-vn { padding-left: 13px; padding-right: 13px; }
}

/* --------------------------------------------------------------------------
   3. Stat cards
   vendors.css sets `repeat(auto-fit,minmax(170px,1fr))` *after* its own
   max-width:880px rule, so the later declaration wins and a 390px screen
   still gets two ~170px columns — narrow enough that "₹104,998" wraps in the
   middle of the number. Re-assert the breakpoints and stop the figure
   breaking at all.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
	.pm-vn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.pm-vn-stats { grid-template-columns: minmax(0, 1fr); }
}
.pm-vn-stat { min-width: 0; }
.pm-vn-stat b {
	white-space: nowrap;
	font-size: clamp(19px, 5.2vw, 24px);
}
.pm-vn-stat small { display: block; }

/* --------------------------------------------------------------------------
   4. Dashboard header row — title and actions stack instead of colliding,
   and "Log out" stops running off the right edge.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.pm-vn-dashhead { flex-direction: column; align-items: stretch; gap: 14px; }
	.pm-vn-dashhead__act { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
	.pm-vn-dashhead h1 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   5. Charts and their range switcher
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.pm-vn-chart__head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.pm-vn-range { flex-wrap: wrap; }
}
@media (max-width: 560px) {
	.pm-vn-canvas { height: 200px; }
	.pm-vn-chart { padding: 15px 14px 13px; }
}

/* --------------------------------------------------------------------------
   6. Table toolbar — the search box and status filter each get a full row
   rather than being squeezed side by side.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.pm-vn-myh-row { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
	.pm-vn-tablefilter { width: 100%; flex-wrap: wrap; }
	.pm-vn-tablefilter input,
	.pm-vn-tablefilter select { flex: 1 1 140px; min-width: 0; }
}

/* --------------------------------------------------------------------------
   7. Touch targets
   Row action buttons are 30x30 and the range buttons smaller still — both
   below a comfortable tap size on a real device.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
	.pm-vn-act { width: 40px; height: 40px; font-size: 16px; }
	.pm-vn-range button { padding: 9px 14px; font-size: 12px; }
	.pm-vn-tablefilter input,
	.pm-vn-tablefilter select { padding: 11px 13px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   8. Modals — full-bleed on a phone, with room for the close button.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.pm-vn-modal { padding: 14px 12px 40px; }
	.pm-vn-modal__box { padding: 22px 16px 26px; border-radius: 14px; }
	.pm-vn-modal__h { font-size: 18px; padding-right: 34px; }
}

/* --------------------------------------------------------------------------
   9. Stacked-table cards — vendors.css already flips the table to cards at
   680px; keep long values from crushing their labels.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
	.pm-vn-table td { gap: 14px; align-items: flex-start; }
	.pm-vn-table td::before { flex: 0 0 auto; padding-top: 2px; }
	.pm-vn-table td > * { min-width: 0; }
	.pm-vn-actions { white-space: normal; }
}

/* --------------------------------------------------------------------------
   10. Page title band
   Kadence's .entry-hero-container-inner is 320px tall on a phone to show one
   line of text — a whole screen before any content. Trim it on small viewports
   only; the desktop proportions are intentional.
   -------------------------------------------------------------------------- */
/* Kadence sets this padding from a more specific selector of its own, so match
   its weight rather than relying on load order. */
@media (max-width: 780px) {
	.entry-hero .entry-hero-container-inner,
	.page-hero-section .entry-hero-container-inner {
		min-height: 0;
		padding-top: 22px !important; padding-bottom: 22px !important;
	}
	.entry-hero .entry-hero-container-inner .hero-section-overlay { padding-top: 14px; padding-bottom: 14px; }
	.entry-hero .entry-hero-container-inner h1 { font-size: 30px; line-height: 1.15; }
}
@media (max-width: 600px) {
	.entry-hero .entry-hero-container-inner,
	.page-hero-section .entry-hero-container-inner {
		padding-top: 16px !important; padding-bottom: 16px !important;
	}
	.entry-hero .entry-hero-container-inner .hero-section-overlay { padding-top: 10px; padding-bottom: 10px; }
	.entry-hero .entry-hero-container-inner h1 { font-size: 25px; }
}
.pm-vn-hero h1 { font-size: clamp(25px, 6vw, 40px); }

/* --------------------------------------------------------------------------
   11. Ghost button contrast
   The dark-luxury sheet forces near-black text on buttons so gold fills stay
   legible, but the same rule lands on .pm-vn-btn--ghost, which sits on a dark
   panel — black on near-black, about 1.3:1. Give the ghost variant its own
   colour back.
   -------------------------------------------------------------------------- */
.pm-vn-btn--ghost,
.pm-vn-btn--ghost:visited { color: #e2c074 !important; }
.pm-vn-btn--ghost:hover { color: #f5efe0 !important; border-color: #e2c074; }