/* ==========================================================================
   Homepower WooCommerce Checkout Page Stylesheet (Vanilla CSS - Scoped & Flat)
   ========================================================================== */

:root {
  --hp-primary: #009EE3;
  --hp-primary-hover: #0082b9;
  --hp-primary-light: #e6f4ff;
  --hp-primary-glow: rgba(0, 158, 227, 0.15);
  
  --hp-slate-50: #f8fafc;
  --hp-slate-100: #f1f5f9;
  --hp-slate-200: #e2e8f0;
  --hp-slate-300: #cbd5e1;
  --hp-slate-400: #94a3b8;
  --hp-slate-500: #64748b;
  --hp-slate-650: #475569;
  --hp-slate-800: #1e293b;
  --hp-slate-900: #0f172a;
  
  --hp-success: #10b981;
  --hp-success-light: #ecfdf5;
  --hp-warning: #f59e0b;
  --hp-warning-light: #fffbeb;
  --hp-danger: #ef4444;
  --hp-danger-light: #fef2f2;
}

/* ==========================================================================
   1. Scoped Layout & Reset Rules
   ========================================================================== */
#hp-checkout-page,
#hp-thankyou-page,
#hp-sepay-modal,
#hp-vouchers-modal,
#hp-confirm-modal,
.hp-modal-backdrop,
#hp-checkout-page button,
#hp-checkout-page input,
#hp-checkout-page select,
#hp-checkout-page textarea {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  box-sizing: border-box;
}

#hp-checkout-page *,
#hp-thankyou-page *,
#hp-sepay-modal *,
#hp-vouchers-modal *,
#hp-confirm-modal * {
  box-sizing: border-box;
}

#hp-checkout-page.select-none,
#hp-thankyou-page.select-none {
  user-select: none;
}

/* Expand parent container width on WooCommerce Checkout page to match design system (1400px) */
html body.woocommerce-checkout .container {
  max-width: 1400px !important;
}

#hp-checkout-page {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Perfect alignment for checkbox and text */
#hp-checkout-page .flex.items-center.gap-2\.5 {
  display: flex !important;
  align-items: center !important;
}

#hp-checkout-page #hp_save_to_address_book {
  margin: 0 !important;
  flex-shrink: 0 !important;
  transform: translateY(1px) !important;
}

#hp-checkout-page label[for="hp_save_to_address_book"] {
  line-height: 18px !important;
  margin: 0 !important;
  margin-left: 8px !important;
  display: inline-block !important;
}

/* Scoped Checkout Headings styling overrides to bypass Flatsome defaults */
#hp-checkout-page h2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hp-slate-100) !important;
  background: transparent !important;
  padding: 0 0 0.75rem 0 !important;
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 900 !important;
  color: var(--hp-slate-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  line-height: 1.2 !important;
}

#hp-checkout-page h2 span {
  display: block !important;
  width: 0.625rem !important;
  height: 1rem !important;
  background-color: var(--hp-primary) !important;
  border-radius: 0.125rem !important;
  flex-shrink: 0 !important;
}

/* Remove outer borders from main layout container card panels */
#hp-checkout-page .bg-white.shadow-sm,
#hp-thankyou-page .bg-white.shadow-sm {
  border: 0 !important;
}

#hp-thankyou-page.max-w-6xl {
  max-width: 1200px !important;
}
#hp-thankyou-page.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
#hp-thankyou-page.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* ==========================================================================
   2. Scoped Layout & Grid System (Flat selectors)
   ========================================================================== */

/* Main Layout Grid & Columns */
#hp-checkout-page .grid, #hp-thankyou-page .grid, #hp-sepay-modal .grid, #hp-vouchers-modal .grid, .hp-modal-backdrop .grid, .hp-modal-container .grid {
  display: grid !important;
}
#hp-checkout-page .flex, #hp-thankyou-page .flex, #hp-sepay-modal .flex, #hp-vouchers-modal .flex, .hp-modal-backdrop .flex, .hp-modal-container .flex, #hp-confirm-modal .flex {
  display: flex !important;
}
#hp-checkout-page .hidden, #hp-thankyou-page .hidden, #hp-sepay-modal.hidden, #hp-vouchers-modal.hidden, .hp-modal-backdrop.hidden {
  display: none !important;
}
#hp-sepay-modal.flex {
  display: flex !important;
}
#hp-checkout-page .block, #hp-thankyou-page .block, #hp-sepay-modal .block, #hp-vouchers-modal .block, .hp-modal-backdrop .block {
  display: block !important;
}
#hp-checkout-page .inline-block, #hp-thankyou-page .inline-block, #hp-sepay-modal .inline-block, #hp-vouchers-modal .inline-block {
  display: inline-block !important;
}
#hp-checkout-page .inline-flex, #hp-thankyou-page .inline-flex, #hp-sepay-modal .inline-flex, #hp-vouchers-modal .inline-flex {
  display: inline-flex !important;
}

#hp-checkout-page .grid-cols-1, #hp-thankyou-page .grid-cols-1, #hp-sepay-modal .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
#hp-checkout-page .gap-1, #hp-thankyou-page .gap-1, #hp-sepay-modal .gap-1 { gap: 0.25rem !important; }
#hp-checkout-page .gap-1.5, #hp-thankyou-page .gap-1.5, #hp-sepay-modal .gap-1.5 { gap: 0.375rem !important; }
#hp-checkout-page .gap-2, #hp-thankyou-page .gap-2, #hp-sepay-modal .gap-2 { gap: 0.5rem !important; }
#hp-checkout-page .gap-2.5, #hp-thankyou-page .gap-2.5, #hp-sepay-modal .gap-2.5 { gap: 0.625rem !important; }
#hp-checkout-page .gap-3, #hp-thankyou-page .gap-3, #hp-sepay-modal .gap-3 { gap: 0.75rem !important; }
#hp-checkout-page .gap-3.5, #hp-thankyou-page .gap-3.5, #hp-sepay-modal .gap-3.5 { gap: 0.875rem !important; }
#hp-checkout-page .gap-4, #hp-thankyou-page .gap-4, #hp-sepay-modal .gap-4, #hp-vouchers-modal .gap-4 { gap: 1rem !important; }
#hp-checkout-page .gap-5, #hp-thankyou-page .gap-5, #hp-sepay-modal .gap-5, #hp-vouchers-modal .gap-5 { gap: 1.25rem !important; }
#hp-checkout-page .gap-6, #hp-thankyou-page .gap-6, #hp-sepay-modal .gap-6, #hp-vouchers-modal .gap-6 { gap: 1.5rem !important; }
#hp-checkout-page .gap-8, #hp-thankyou-page .gap-8, #hp-sepay-modal .gap-8 { gap: 2rem !important; }

#hp-checkout-page .items-start, #hp-thankyou-page .items-start { align-items: start !important; }
#hp-checkout-page .items-center, #hp-thankyou-page .items-center, #hp-sepay-modal .items-center, #hp-vouchers-modal .items-center, #hp-confirm-modal .items-center { align-items: center !important; }
#hp-checkout-page .items-baseline, #hp-thankyou-page .items-baseline { align-items: baseline !important; }
#hp-checkout-page .justify-start, #hp-thankyou-page .justify-start { justify-content: flex-start !important; }
#hp-checkout-page .justify-center, #hp-thankyou-page .justify-center, #hp-sepay-modal .justify-center, #hp-vouchers-modal .justify-center, #hp-confirm-modal .justify-center { justify-content: center !important; }
#hp-checkout-page .justify-between, #hp-thankyou-page .justify-between, #hp-sepay-modal .justify-between, #hp-vouchers-modal .justify-between { justify-content: space-between !important; }
#hp-checkout-page .justify-end, #hp-thankyou-page .justify-end, #hp-sepay-modal .justify-end, #hp-confirm-modal .justify-end { justify-content: flex-end !important; }
#hp-checkout-page .flex-grow, #hp-thankyou-page .flex-grow, #hp-sepay-modal .flex-grow { flex-grow: 1 !important; }
#hp-checkout-page .flex-shrink-0, #hp-thankyou-page .flex-shrink-0, #hp-sepay-modal .flex-shrink-0 { flex-shrink: 0 !important; }
#hp-checkout-page .flex-row, #hp-thankyou-page .flex-row, #hp-sepay-modal .flex-row { flex-direction: row !important; }
#hp-checkout-page .flex-col, #hp-thankyou-page .flex-col, #hp-sepay-modal .flex-col, #hp-vouchers-modal .flex-col, #hp-confirm-modal .flex-col { flex-direction: column !important; }

#hp-checkout-page .col-span-1 { grid-column: span 1 / span 1 !important; }

@media (min-width: 640px) {
  #hp-checkout-page .sm\:grid-cols-2, #hp-thankyou-page .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #hp-checkout-page .sm\:col-span-2, #hp-thankyou-page .sm\:col-span-2 { grid-column: span 2 / span 2 !important; }
  #hp-checkout-page .sm\:flex-row, #hp-thankyou-page .sm\:flex-row { flex-direction: row !important; }
  #hp-checkout-page .sm\:items-center, #hp-thankyou-page .sm\:items-center { align-items: center !important; }
  #hp-checkout-page .sm\:justify-end, #hp-thankyou-page .sm\:justify-end { justify-content: flex-end !important; }
  #hp-checkout-page .sm\:justify-start, #hp-thankyou-page .sm\:justify-start { justify-content: flex-start !important; }
  #hp-checkout-page .sm\:gap-6, #hp-thankyou-page .sm\:gap-6 { gap: 1.5rem !important; }
  #hp-checkout-page .sm\:text-sm, #hp-thankyou-page .sm\:text-sm { font-size: 0.875rem !important; }
  #hp-checkout-page .sm\:text-base, #hp-thankyou-page .sm\:text-base { font-size: 1rem !important; }
  #hp-checkout-page .sm\:text-lg, #hp-thankyou-page .sm\:text-lg { font-size: 1.125rem !important; }
  #hp-checkout-page .sm\:text-xl, #hp-thankyou-page .sm\:text-xl { font-size: 1.25rem !important; }
  #hp-checkout-page .sm\:text-2xl, #hp-thankyou-page .sm\:text-2xl { font-size: 1.5rem !important; }
  #hp-checkout-page .sm\:p-8, #hp-thankyou-page .sm\:p-8 { padding: 2rem !important; }
  #hp-checkout-page .sm\:w-auto, #hp-thankyou-page .sm\:w-auto { width: auto !important; }
  #hp-checkout-page .sm\:w-1\/3, #hp-thankyou-page .sm\:w-1\/3 { width: 33.333333% !important; }
}

@media (min-width: 768px) {
  #hp-checkout-page .md\:grid-cols-4, #hp-thankyou-page .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #hp-checkout-page .md\:pt-6, #hp-thankyou-page .md\:pt-6 { padding-top: 1.5rem !important; }
}

@media (min-width: 1024px) {
  #hp-checkout-page .lg\:grid-cols-2, #hp-thankyou-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #hp-checkout-page .lg\:grid-cols-12, #hp-thankyou-page .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  #hp-checkout-page .lg\:col-span-7, #hp-thankyou-page .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  #hp-checkout-page .lg\:col-span-6, #hp-thankyou-page .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  #hp-checkout-page .lg\:col-span-5, #hp-thankyou-page .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  #hp-checkout-page .lg\:sticky, #hp-thankyou-page .lg\:sticky { position: sticky !important; }
  #hp-checkout-page .lg\:top-24, #hp-thankyou-page .lg\:top-24 { top: 6rem !important; }
  #hp-checkout-page .lg\:block, #hp-thankyou-page .lg\:block { display: block !important; }
  #hp-checkout-page .lg\:hidden, #hp-thankyou-page .lg\:hidden { display: none !important; }
}

/* Spacings (Margins & Paddings) */
#hp-checkout-page .mb-2, #hp-thankyou-page .mb-2 { margin-bottom: 0.5rem !important; }
#hp-checkout-page .mb-6, #hp-thankyou-page .mb-6 { margin-bottom: 1.5rem !important; }
#hp-checkout-page .mb-10, #hp-thankyou-page .mb-10 { margin-bottom: 2.5rem !important; }
#hp-checkout-page .mb-12, #hp-thankyou-page .mb-12 { margin-bottom: 3rem !important; }
#hp-checkout-page .mb-16, #hp-thankyou-page .mb-16 { margin-bottom: 4rem !important; }
#hp-checkout-page .mt-0.5, #hp-thankyou-page .mt-0.5, #hp-sepay-modal .mt-0.5 { margin-top: 0.125rem !important; }
#hp-checkout-page .mt-1, #hp-thankyou-page .mt-1, #hp-confirm-modal .mt-1 { margin-top: 0.25rem !important; }
#hp-checkout-page .mt-1.5, #hp-thankyou-page .mt-1.5 { margin-top: 0.375rem !important; }
#hp-checkout-page .mt-2, #hp-thankyou-page .mt-2, #hp-sepay-modal .mt-2 { margin-top: 0.5rem !important; }
#hp-checkout-page .mt-4, #hp-thankyou-page .mt-4 { margin-top: 1rem !important; }
#hp-checkout-page .mt-8, #hp-thankyou-page .mt-8 { margin-top: 2rem !important; }
#hp-checkout-page .-mt-2, #hp-thankyou-page .-mt-2 { margin-top: -0.5rem !important; }
#hp-checkout-page .my-1, #hp-thankyou-page .my-1, #hp-sepay-modal .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
#hp-checkout-page .my-2, #hp-thankyou-page .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
#hp-checkout-page .my-12, #hp-thankyou-page .my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
#hp-checkout-page .mr-2 { margin-right: 0.5rem !important; }

#hp-checkout-page .py-1, #hp-thankyou-page .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
#hp-checkout-page .py-2, #hp-thankyou-page .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
#hp-checkout-page .py-2.5, #hp-thankyou-page .py-2.5, #hp-sepay-modal .py-2.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
#hp-checkout-page .py-3, #hp-thankyou-page .py-3, #hp-vouchers-modal .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
#hp-checkout-page .py-3.5, #hp-thankyou-page .py-3.5, #hp-vouchers-modal .py-3.5 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
#hp-checkout-page .py-4, #hp-thankyou-page .py-4, #hp-vouchers-modal .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#hp-checkout-page .py-5, #hp-thankyou-page .py-5, #hp-sepay-modal .py-5, #hp-vouchers-modal .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
#hp-checkout-page .py-6, #hp-thankyou-page .py-6, #hp-sepay-modal .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
#hp-checkout-page .py-24, #hp-thankyou-page .py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
#hp-checkout-page .px-3, #hp-thankyou-page .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
#hp-checkout-page .px-4, #hp-thankyou-page .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
#hp-checkout-page .px-6, #hp-thankyou-page .px-6, #hp-sepay-modal .px-6, #hp-vouchers-modal .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
#hp-checkout-page .px-8, #hp-thankyou-page .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
#hp-checkout-page .p-1, #hp-thankyou-page .p-1, #hp-confirm-modal .p-1 { padding: 0.25rem !important; }
#hp-checkout-page .p-1.5, #hp-sepay-modal .p-1.5 { padding: 0.375rem !important; }
#hp-checkout-page .p-2, #hp-thankyou-page .p-2, #hp-sepay-modal .p-2 { padding: 0.5rem !important; }
#hp-checkout-page .p-2.5, #hp-sepay-modal .p-2.5 { padding: 0.625rem !important; }
#hp-checkout-page .p-4, #hp-thankyou-page .p-4, #hp-sepay-modal .p-4 { padding: 1rem !important; }
#hp-checkout-page .p-5, #hp-thankyou-page .p-5 { padding: 1.25rem !important; }
#hp-checkout-page .p-6, #hp-thankyou-page .p-6, #hp-sepay-modal .p-6 { padding: 1.5rem !important; }
#hp-checkout-page .p-7, #hp-confirm-modal .p-7 { padding: 1.75rem !important; }
#hp-checkout-page .p-8, #hp-thankyou-page .p-8 { padding: 2rem !important; }
#hp-checkout-page .pb-3, #hp-thankyou-page .pb-3 { padding-bottom: 0.75rem !important; }
#hp-checkout-page .pb-4, #hp-thankyou-page .pb-4 { padding-bottom: 1rem !important; }
#hp-checkout-page .pb-6, #hp-thankyou-page .pb-6 { padding-bottom: 1.5rem !important; }
#hp-checkout-page .pt-0, #hp-thankyou-page .pt-0 { padding-top: 0 !important; }
#hp-checkout-page .pt-0.5, #hp-thankyou-page .pt-0.5 { padding-top: 0.125rem !important; }
#hp-checkout-page .pt-4, #hp-thankyou-page .pt-4 { padding-top: 1rem !important; }
#hp-checkout-page .pt-5, #hp-thankyou-page .pt-5 { padding-top: 1.25rem !important; }
#hp-checkout-page .pt-6, #hp-thankyou-page .pt-6 { padding-top: 1.5rem !important; }
#hp-checkout-page .pr-1 { padding-right: 0.25rem !important; }
#hp-confirm-modal .pr-2 { padding-right: 0.5rem !important; }
#hp-checkout-page .pr-4 { padding-right: 1rem !important; }
#hp-checkout-page .pr-8 { padding-right: 2rem !important; }
#hp-checkout-page .pr-10 { padding-right: 2.5rem !important; }
#hp-checkout-page .pl-1 { padding-left: 0.25rem !important; }
#hp-checkout-page .pl-4 { padding-left: 1rem !important; }
#hp-checkout-page .pl-8, #hp-thankyou-page .pl-8 { padding-left: 2rem !important; }

/* Pseudo elements list paddings overrides */
#hp-checkout-page .first\:pt-0:first-child, #hp-thankyou-page .first\:pt-0:first-child { padding-top: 0 !important; }
#hp-checkout-page .last\:pb-0:last-child, #hp-thankyou-page .last\:pb-0:last-child { padding-bottom: 0 !important; }

/* Colors, Backgrounds, and Shadows */
#hp-checkout-page .bg-white, #hp-thankyou-page .bg-white, #hp-sepay-modal .bg-white, #hp-vouchers-modal .bg-white, #hp-confirm-modal .bg-white { background-color: #ffffff !important; }
#hp-checkout-page .bg-slate-50, #hp-thankyou-page .bg-slate-50, #hp-sepay-modal .bg-slate-50, #hp-vouchers-modal .bg-slate-50 { background-color: var(--hp-slate-50) !important; }
#hp-checkout-page .bg-slate-50\/50 { background-color: rgba(248, 250, 252, 0.5) !important; }
.hp-modal-backdrop, #hp-sepay-modal { background-color: rgba(15, 23, 42, 0.6) !important; }
#hp-checkout-page .bg-sky-blue\/30 { background-color: rgba(230, 244, 255, 0.3) !important; }
#hp-checkout-page .bg-sky-50\/30, #hp-sepay-modal .bg-sky-50\/30 { background-color: rgba(240, 249, 255, 0.3) !important; }
#hp-checkout-page .bg-sky-blue, #hp-thankyou-page .bg-sky-blue, #hp-sepay-modal .bg-sky-blue { background-color: var(--hp-primary-light) !important; }
#hp-checkout-page .bg-primary-blue, #hp-thankyou-page .bg-primary-blue, #hp-sepay-modal .bg-primary-blue, #hp-vouchers-modal .bg-primary-blue { background-color: var(--hp-primary) !important; }
#hp-checkout-page .bg-emerald-50, #hp-thankyou-page .bg-emerald-50 { background-color: #ecfdf5 !important; }
#hp-checkout-page .bg-emerald-500, #hp-thankyou-page .bg-emerald-500, #hp-sepay-modal .bg-emerald-500 { background-color: #10b981 !important; }
#hp-confirm-modal .bg-red-50 { background-color: #fef2f2 !important; }
#hp-confirm-modal .bg-red-500 { background-color: #ef4444 !important; }

#hp-checkout-page .border, #hp-thankyou-page .border, #hp-sepay-modal .border, #hp-vouchers-modal .border, #hp-confirm-modal .border { border: 1px solid var(--hp-slate-200) !important; }
#hp-checkout-page .border-slate-100, #hp-thankyou-page .border-slate-100, #hp-sepay-modal .border-slate-100, #hp-vouchers-modal .border-slate-100 { border-color: var(--hp-slate-100) !important; }
#hp-checkout-page .border-slate-100\/50, #hp-sepay-modal .border-slate-100\/50 { border-color: rgba(241, 245, 249, 0.5) !important; }
#hp-confirm-modal .border-slate-100\/80 { border-color: rgba(241, 245, 249, 0.8) !important; }
#hp-checkout-page .border-slate-200, #hp-thankyou-page .border-slate-200, #hp-sepay-modal .border-slate-200, #hp-vouchers-modal .border-slate-200, #hp-confirm-modal .border-slate-200 { border-color: var(--hp-slate-200) !important; }
#hp-checkout-page .border-slate-200\/60, #hp-sepay-modal .border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6) !important; }
#hp-sepay-modal .border-sky-100\/50 { border-color: rgba(224, 242, 254, 0.5) !important; }
#hp-checkout-page .border-red-100 { border-color: #fee2e2 !important; }
#hp-checkout-page .border-b, #hp-thankyou-page .border-b { border-bottom: 1px solid var(--hp-slate-200) !important; }
#hp-checkout-page .border-b-0, #hp-thankyou-page .border-b-0 { border-bottom: 0 !important; }
#hp-checkout-page .border-t, #hp-thankyou-page .border-t { border-top: 1px solid var(--hp-slate-200) !important; }
#hp-thankyou-page .border-l-2 { border-left: 2px solid var(--hp-slate-100) !important; }
#hp-checkout-page .border-0, #hp-thankyou-page .border-0, #hp-confirm-modal .border-0 { border: 0 !important; }
#hp-thankyou-page .border-4 { border-width: 4px !important; }
#hp-thankyou-page .border-white { border-color: #ffffff !important; }

#hp-checkout-page .rounded-lg, #hp-thankyou-page .rounded-lg, #hp-sepay-modal .rounded-lg, #hp-vouchers-modal .rounded-lg, #hp-confirm-modal .rounded-lg { border-radius: 0.5rem !important; }
#hp-checkout-page .rounded-xl, #hp-thankyou-page .rounded-xl, #hp-sepay-modal .rounded-xl, #hp-vouchers-modal .rounded-xl, #hp-confirm-modal .rounded-xl { border-radius: 0.75rem !important; }
#hp-checkout-page .rounded-2xl, #hp-thankyou-page .rounded-2xl, #hp-sepay-modal .rounded-2xl, #hp-vouchers-modal .rounded-2xl, #hp-confirm-modal .rounded-2xl { border-radius: 1rem !important; }
#hp-checkout-page .rounded-3xl, #hp-thankyou-page .rounded-3xl, #hp-sepay-modal .rounded-3xl, #hp-vouchers-modal .rounded-3xl { border-radius: 1.5rem !important; }
#hp-checkout-page .rounded-full, #hp-thankyou-page .rounded-full, #hp-sepay-modal .rounded-full, #hp-vouchers-modal .rounded-full, #hp-confirm-modal .rounded-full { border-radius: 9999px !important; }

#hp-checkout-page .shadow-sm, #hp-thankyou-page .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; }
#hp-checkout-page .shadow-md, #hp-thankyou-page .shadow-md, #hp-sepay-modal .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; }
#hp-sepay-modal .shadow-2xl, #hp-vouchers-modal .shadow-2xl, #hp-confirm-modal .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }

/* Typography values mapping */
#hp-checkout-page .text-xs, #hp-thankyou-page .text-xs, #hp-sepay-modal .text-xs, #hp-vouchers-modal .text-xs, #hp-confirm-modal .text-xs { font-size: 0.75rem !important; }
#hp-checkout-page .text-sm, #hp-thankyou-page .text-sm, #hp-sepay-modal .text-sm, #hp-vouchers-modal .text-sm, #hp-confirm-modal .text-sm { font-size: 0.875rem !important; }
#hp-checkout-page .text-base, #hp-thankyou-page .text-base, #hp-sepay-modal .text-base, #hp-vouchers-modal .text-base { font-size: 1rem !important; }
#hp-checkout-page .text-lg, #hp-thankyou-page .text-lg, #hp-confirm-modal .text-lg { font-size: 1.125rem !important; }
#hp-checkout-page .text-xl, #hp-thankyou-page .text-xl { font-size: 1.25rem !important; }
#hp-checkout-page .text-2xl, #hp-thankyou-page .text-2xl { font-size: 1.5rem !important; }
#hp-thankyou-page .text-3xl { font-size: 1.875rem !important; }
#hp-checkout-page .text-\[9px\], #hp-thankyou-page .text-\[9px\], #hp-sepay-modal .text-\[9px\], #hp-vouchers-modal .text-\[9px\] { font-size: 9px !important; }
#hp-checkout-page .text-\[10px\], #hp-thankyou-page .text-\[10px\], #hp-sepay-modal .text-\[10px\], #hp-vouchers-modal .text-\[10px\] { font-size: 10px !important; }
#hp-checkout-page .text-\[11px\], #hp-thankyou-page .text-\[11px\], #hp-sepay-modal .text-\[11px\], #hp-vouchers-modal .text-\[11px\] { font-size: 11px !important; }

#hp-checkout-page .font-bold, #hp-thankyou-page .font-bold, #hp-sepay-modal .font-bold, #hp-vouchers-modal .font-bold { font-weight: 700 !important; }
#hp-checkout-page .font-semibold, #hp-thankyou-page .font-semibold, #hp-sepay-modal .font-semibold, #hp-vouchers-modal .font-semibold { font-weight: 600 !important; }
#hp-checkout-page .font-extrabold, #hp-thankyou-page .font-extrabold, #hp-sepay-modal .font-extrabold, #hp-vouchers-modal .font-extrabold, #hp-confirm-modal .font-extrabold { font-weight: 800 !important; }
#hp-checkout-page .font-black, #hp-thankyou-page .font-black, #hp-sepay-modal .font-black, #hp-vouchers-modal .font-black, #hp-confirm-modal .font-black { font-weight: 900 !important; }
#hp-checkout-page .font-medium, #hp-thankyou-page .font-medium, #hp-sepay-modal .font-medium, #hp-vouchers-modal .font-medium { font-weight: 500 !important; }

#hp-checkout-page .text-slate-300, #hp-thankyou-page .text-slate-300 { color: var(--hp-slate-300) !important; }
#hp-checkout-page .text-slate-400, #hp-thankyou-page .text-slate-400, #hp-sepay-modal .text-slate-400, #hp-vouchers-modal .text-slate-400 { color: var(--hp-slate-400) !important; }
#hp-checkout-page .text-slate-500, #hp-thankyou-page .text-slate-500, #hp-sepay-modal .text-slate-500, #hp-confirm-modal .text-slate-500 { color: var(--hp-slate-500) !important; }
#hp-checkout-page .text-slate-600, #hp-thankyou-page .text-slate-600, #hp-sepay-modal .text-slate-600 { color: var(--hp-slate-650) !important; }
#hp-checkout-page .text-slate-700, #hp-thankyou-page .text-slate-700, #hp-sepay-modal .text-slate-700, #hp-confirm-modal .text-slate-700 { color: var(--hp-slate-650) !important; }
#hp-checkout-page .text-slate-800, #hp-thankyou-page .text-slate-800, #hp-sepay-modal .text-slate-800, #hp-vouchers-modal .text-slate-800, #hp-confirm-modal .text-slate-800 { color: var(--hp-slate-800) !important; }
#hp-checkout-page .text-slate-900, #hp-thankyou-page .text-slate-900, #hp-sepay-modal .text-slate-900, #hp-confirm-modal .text-slate-900 { color: var(--hp-slate-900) !important; }
#hp-checkout-page .text-primary-blue, #hp-thankyou-page .text-primary-blue, #hp-sepay-modal .text-primary-blue, #hp-vouchers-modal .text-primary-blue { color: var(--hp-primary) !important; }
#hp-checkout-page .text-orange-500, #hp-thankyou-page .text-orange-500, #hp-sepay-modal .text-orange-500 { color: var(--hp-warning) !important; }
#hp-checkout-page .text-emerald-500, #hp-thankyou-page .text-emerald-500, #hp-sepay-modal .text-emerald-500 { color: var(--hp-success) !important; }
#hp-checkout-page .text-red-500, #hp-thankyou-page .text-red-500, #hp-sepay-modal .text-red-500, #hp-confirm-modal .text-red-500 { color: var(--hp-danger) !important; }
#hp-checkout-page .text-white, #hp-thankyou-page .text-white, #hp-sepay-modal .text-white, #hp-vouchers-modal .text-white, #hp-confirm-modal .text-white { color: #ffffff !important; }

#hp-checkout-page .uppercase, #hp-thankyou-page .uppercase, #hp-sepay-modal .uppercase, #hp-vouchers-modal .uppercase { text-transform: uppercase !important; }
#hp-checkout-page .tracking-wider, #hp-thankyou-page .tracking-wider, #hp-sepay-modal .tracking-wider, #hp-vouchers-modal .tracking-wider { letter-spacing: 0.05em !important; }
#hp-checkout-page .tracking-widest, #hp-thankyou-page .tracking-widest, #hp-sepay-modal .tracking-widest { letter-spacing: 0.1em !important; }
#hp-checkout-page .text-center, #hp-thankyou-page .text-center, #hp-sepay-modal .text-center { text-align: center !important; }
#hp-checkout-page .text-left, #hp-thankyou-page .text-left, #hp-sepay-modal .text-left { text-align: left !important; }
#hp-checkout-page .text-right, #hp-thankyou-page .text-right, #hp-sepay-modal .text-right { text-align: right !important; }

#hp-checkout-page .leading-none, #hp-thankyou-page .leading-none, #hp-sepay-modal .leading-none { line-height: 1 !important; }
#hp-checkout-page .leading-snug, #hp-thankyou-page .leading-snug, #hp-confirm-modal .leading-snug { line-height: 1.375 !important; }
#hp-checkout-page .leading-relaxed, #hp-thankyou-page .leading-relaxed, #hp-confirm-modal .leading-relaxed { line-height: 1.625 !important; }
#hp-checkout-page .leading-normal, #hp-thankyou-page .leading-normal, #hp-sepay-modal .leading-normal { line-height: 1.5 !important; }

#hp-checkout-page .truncate, 
#hp-thankyou-page .truncate,
#hp-checkout-page .truncate a,
#hp-thankyou-page .truncate a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the product details wrapper has a flexible width constraint for truncation to work */
#hp-checkout-page #hp-checkout-summary-list .hp-cart-item-details {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  width: 0 !important;
  min-width: 0 !important;
}
#hp-checkout-page #hp-checkout-summary-list h3 {
  margin: 0 !important;
  padding: 0 !important;
}
#hp-checkout-page .line-clamp-2, #hp-thankyou-page .line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;  
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
}
#hp-checkout-page .line-through, #hp-thankyou-page .line-through { text-decoration: line-through !important; }

/* Voucher, Shipping, and Payment select trigger button layout elements to prevent wrapping/stretching issues */
#hp-checkout-page #hp-open-vouchers-modal-btn,
#hp-checkout-page #hp-open-shipping-modal-btn,
#hp-checkout-page #hp-open-payment-modal-btn,
#hp-checkout-page #hp-open-invoice-modal-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}

#hp-checkout-page #hp-open-vouchers-modal-btn > span,
#hp-checkout-page #hp-open-shipping-modal-btn > span,
#hp-checkout-page #hp-open-payment-modal-btn > span,
#hp-checkout-page #hp-open-invoice-modal-btn > span {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#hp-checkout-page #hp-open-vouchers-modal-btn svg,
#hp-checkout-page #hp-open-shipping-modal-btn svg,
#hp-checkout-page #hp-open-payment-modal-btn svg,
#hp-checkout-page #hp-open-invoice-modal-btn svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
}

#hp-checkout-page #hp-open-vouchers-modal-btn svg:first-of-type,
#hp-checkout-page #hp-open-shipping-modal-btn svg:first-of-type,
#hp-checkout-page #hp-open-payment-modal-btn svg:first-of-type,
#hp-checkout-page #hp-open-invoice-modal-btn svg:first-of-type {
  width: 1.125rem !important; /* w-4.5 */
  height: 1.125rem !important; /* h-4.5 */
}

#hp-checkout-page #hp-open-vouchers-modal-btn svg.text-slate-400,
#hp-checkout-page #hp-open-shipping-modal-btn svg.text-slate-400,
#hp-checkout-page #hp-open-payment-modal-btn svg.text-slate-400 {
  width: 1rem !important; /* w-4 */
  height: 1rem !important; /* h-4 */
}

/* Positioning & Layout Details */
.hp-modal-backdrop.fixed, #hp-sepay-modal.fixed, #hp-confirm-modal.fixed { position: fixed !important; }
#hp-checkout-page .absolute, #hp-thankyou-page .absolute, #hp-sepay-modal .absolute, #hp-confirm-modal .absolute { position: absolute !important; }
#hp-checkout-page .relative, #hp-thankyou-page .relative, #hp-sepay-modal .relative, #hp-confirm-modal .relative { position: relative !important; }
.hp-modal-backdrop.inset-0, #hp-sepay-modal.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
#hp-confirm-modal.inset-0, #hp-confirm-modal .inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }

.hp-modal-backdrop.z-\[9999\], #hp-sepay-modal.z-\[9999\], #hp-confirm-modal.z-\[9999\] { z-index: 9999 !important; }
#hp-thankyou-page .z-10 { z-index: 10 !important; }
#hp-thankyou-page .-z-10 { z-index: -1 !important; }

.hp-modal-backdrop.pointer-events-none, #hp-sepay-modal.pointer-events-none, #hp-confirm-modal.pointer-events-none { pointer-events: none !important; }
.hp-modal-backdrop.pointer-events-auto, #hp-sepay-modal.pointer-events-auto, #hp-confirm-modal.pointer-events-auto { pointer-events: auto !important; }

.hp-modal-backdrop.opacity-0, #hp-sepay-modal.opacity-0, #hp-confirm-modal.opacity-0 { opacity: 0 !important; }
#hp-vouchers-modal .opacity-50 { opacity: 0.5 !important; }
.hp-modal-backdrop.opacity-75 { opacity: 0.75 !important; }
.hp-modal-backdrop.opacity-100, #hp-sepay-modal.opacity-100, #hp-confirm-modal.opacity-100 { opacity: 1 !important; }

.hp-modal-container.scale-95, #hp-sepay-modal-content.scale-95, #hp-confirm-modal .scale-95 { transform: scale(0.95) !important; }
.hp-modal-container.scale-100, #hp-sepay-modal-content.scale-100, #hp-confirm-modal .scale-100 { transform: scale(1) !important; }

.hp-modal-backdrop.ease-out, #hp-sepay-modal.ease-out, #hp-confirm-modal.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.hp-modal-backdrop.duration-150, #hp-sepay-modal.duration-150, #hp-confirm-modal.duration-150 { transition-duration: 150ms !important; }

/* Sizes & Dimensions */
#hp-thankyou-page .w-2 { width: 0.5rem !important; }
#hp-checkout-page .w-2.5 { width: 0.625rem !important; }
#hp-checkout-page .w-3, #hp-thankyou-page .w-3 { width: 0.75rem !important; }
#hp-checkout-page .w-3.5, #hp-thankyou-page .w-3.5 { width: 0.875rem !important; }
#hp-checkout-page .w-4, #hp-thankyou-page .w-4 { width: 1rem !important; }
#hp-checkout-page .w-4.5 { width: 1.125rem !important; }
#hp-checkout-page .w-5, #hp-thankyou-page .w-5 { width: 1.25rem !important; }
#hp-checkout-page .w-6, #hp-thankyou-page .w-6 { width: 1.5rem !important; }
#hp-checkout-page .w-7, #hp-thankyou-page .w-7 { width: 1.75rem !important; }
#hp-checkout-page .w-8, #hp-thankyou-page .w-8 { width: 2rem !important; }
#hp-checkout-page .w-9, #hp-thankyou-page .w-9 { width: 2.25rem !important; }
#hp-checkout-page .w-10, #hp-thankyou-page .w-10 { width: 2.5rem !important; }
#hp-checkout-page .w-12, #hp-confirm-modal .w-12 { width: 3rem !important; }
#hp-checkout-page .w-14 { width: 3.5rem !important; }
#hp-checkout-page .w-16, #hp-thankyou-page .w-16 { width: 4rem !important; }
#hp-checkout-page .w-20, #hp-thankyou-page .w-20 { width: 5rem !important; }
#hp-checkout-page .w-44, #hp-sepay-modal .w-44 { width: 11rem !important; }
#hp-thankyou-page .w-64 { width: 16rem !important; }
#hp-checkout-page .w-max, #hp-thankyou-page .w-max { width: max-content !important; }
#hp-checkout-page .w-full, #hp-thankyou-page .w-full, #hp-sepay-modal .w-full, #hp-vouchers-modal .w-full, #hp-confirm-modal .w-full { width: 100% !important; }

#hp-thankyou-page .h-2 { height: 0.5rem !important; }
#hp-checkout-page .h-3, #hp-thankyou-page .h-3 { height: 0.75rem !important; }
#hp-checkout-page .h-3.5, #hp-thankyou-page .h-3.5 { height: 0.875rem !important; }
#hp-checkout-page .h-4 { height: 1rem !important; }
#hp-checkout-page .h-4.5 { height: 1.125rem !important; }
#hp-checkout-page .h-5 { height: 1.25rem !important; }
#hp-checkout-page .h-6, #hp-confirm-modal .h-6 { height: 1.5rem !important; }
#hp-checkout-page .h-7 { height: 1.75rem !important; }
#hp-checkout-page .h-8, #hp-thankyou-page .h-8 { height: 2rem !important; }
#hp-checkout-page .h-9 { height: 2.25rem !important; }
#hp-sepay-modal .h-10 { height: 2.5rem !important; }
#hp-confirm-modal .h-12 { height: 3rem !important; }
#hp-checkout-page .h-16, #hp-thankyou-page .h-16 { height: 4rem !important; }
#hp-checkout-page .h-20, #hp-thankyou-page .h-20 { height: 5rem !important; }
#hp-sepay-modal .h-44 { height: 11rem !important; }
#hp-thankyou-page .h-64 { height: 16rem !important; }
#hp-thankyou-page .h-0\.5 { height: 2px !important; }
#hp-checkout-page .h-px, #hp-thankyou-page .h-px { height: 1px !important; }

#hp-checkout-page .max-w-2xl { max-width: 42rem !important; }
#hp-thankyou-page .max-w-3xl { max-width: 48rem !important; }
#hp-thankyou-page .max-w-6xl { max-width: 72rem !important; }
#hp-sepay-modal .max-w-md, #hp-vouchers-modal .max-w-md, #hp-confirm-modal .max-w-\[520px\] { max-width: 520px !important; }
#hp-sepay-modal .max-w-\[340px\] { max-width: 340px !important; }

#hp-checkout-page .mx-auto, #hp-thankyou-page .mx-auto, #hp-sepay-modal .mx-auto { margin-left: auto !important; margin-right: auto !important; }
#hp-checkout-page .aspect-square, #hp-thankyou-page .aspect-square { aspect-ratio: 1 / 1 !important; }
#hp-checkout-page .object-cover, #hp-thankyou-page .object-cover { object-fit: cover !important; }
#hp-checkout-page .object-contain, #hp-sepay-modal .object-contain { object-fit: contain !important; }

#hp-sepay-modal .backdrop-blur-sm, #hp-vouchers-modal .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#hp-thankyou-page .border-2 { border-width: 2px !important; }
#hp-thankyou-page .border-3 { border-width: 3px !important; }
#hp-thankyou-page .border-4 { border-width: 4px !important; }
#hp-thankyou-page .border-white { border-color: #ffffff !important; }

#hp-confirm-modal .bg-slate-955\/30 { background-color: rgba(2, 6, 23, 0.3) !important; }

/* ==========================================================================
   3. Scoped Interactive Input & Select Elements Overrides
   ========================================================================== */
#hp-checkout-page input[type="text"],
#hp-checkout-page input[type="tel"],
#hp-checkout-page input[type="email"],
#hp-vouchers-modal input[type="text"] {
  width: 100% !important;
  height: 3rem !important;
  padding: 0 1rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  color: #1e293b !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#hp-checkout-page input[type="text"]:focus,
#hp-checkout-page input[type="tel"]:focus,
#hp-checkout-page input[type="email"]:focus,
#hp-vouchers-modal input[type="text"]:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #009EE3 !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
}

#hp-checkout-page input[type="text"]::placeholder,
#hp-checkout-page input[type="tel"]::placeholder,
#hp-checkout-page input[type="email"]::placeholder,
#hp-vouchers-modal input[type="text"]::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* textarea overrides */
#hp-checkout-page textarea {
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  height: 5rem !important;
}

#hp-checkout-page textarea:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #009EE3 !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
}

#hp-checkout-page textarea::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* select inputs (native fallback) */
#hp-checkout-page select#billing_state,
#hp-checkout-page select#billing_city,
#hp-checkout-page select#hp_checkout_address_selector {
  width: 100% !important;
  height: 3rem !important;
  padding: 0 3rem 0 1rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  color: #1e293b !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background-image: none !important;
}

#hp-checkout-page select#billing_state:focus,
#hp-checkout-page select#billing_city:focus,
#hp-checkout-page select#hp_checkout_address_selector:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #009EE3 !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
}

/* Custom Select Wrapper & Chevron styles */
#hp-checkout-page .hp-select-wrapper {
  position: relative !important;
  width: 100% !important;
}

#hp-checkout-page .hp-select-wrapper::after {
  content: "" !important;
  position: absolute !important;
  right: 1.25rem !important;
  top: 50% !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-right: 2px solid #94a3b8 !important;
  border-bottom: 2px solid #94a3b8 !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  transition: all 0.2s ease-in-out !important;
  z-index: 10 !important;
}

#hp-checkout-page .hp-select-wrapper:focus-within::after {
  border-color: #009EE3 !important;
}

/* Style active chevron when select2 is open */
#hp-checkout-page .hp-select-wrapper:has(.select2-container--open)::after {
  transform: translateY(-30%) rotate(225deg) !important;
  border-color: #009EE3 !important;
}

/* Select2 container overrides */
html body #hp-checkout-page .hp-select-wrapper .select2-container {
  width: 100% !important;
  height: 3rem !important;
}

html body #hp-checkout-page .hp-select-wrapper .select2-container--default .select2-selection--single {
  height: 3rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 1rem !important;
  outline: none !important;
  transition: all 0.2s ease-in-out !important;
  background-image: none !important;
}

html body #hp-checkout-page .hp-select-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
html body #hp-checkout-page .hp-select-wrapper .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #009EE3 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
  border-radius: 0.5rem !important;
}

html body #hp-checkout-page .hp-select-wrapper .select2-container--default .select2-selection--single:focus,
html body #hp-checkout-page .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  padding-left: 0.25rem !important;
  padding-right: 2.5rem !important;
}

/* Style Select2 placeholder text color (options containing '-- Chọn') */
html body #hp-checkout-page .hp-select-wrapper .select2-selection__rendered[title^="-- Chọn"] {
  color: #94a3b8 !important;
}

html body #hp-checkout-page .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: 0.75rem !important;
  background-image: none !important;
}

/* Hide Select2 default solid triangle arrow and all pseudo-element/background arrows */
html body #hp-checkout-page .hp-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b,
html body .select2-selection--single::after,
html body .select2-selection--single::before,
html body .select2-selection__arrow::after,
html body .select2-selection__arrow::before,
html body .select2-container::after,
html body .select2-container::before {
  display: none !important;
  content: none !important;
}

/* Select2 Dropdown Options List Panel */
html body .select2-dropdown {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  z-index: 99999 !important;
  padding: 0.25rem !important;
}

/* Dropdown positions */
html body > .select2-container--open {
  height: 48px !important;
}
html body > .select2-container--open .select2-dropdown--below {
  top: 0 !important;
  margin-top: 48px !important;
}
html body > .select2-container--open .select2-dropdown--above {
  top: 0 !important;
  margin-top: -6px !important;
}

html body #hp-checkout-page .hp-select-wrapper .select2-dropdown--below {
  top: 100% !important;
  margin-top: 6px !important;
}
html body #hp-checkout-page .hp-select-wrapper .select2-dropdown--above {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

html body .select2-container--default .select2-results__option {
  padding: 0.5rem 0.75rem !important;
  margin: 0 0 2px 0 !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  text-align: left !important;
  transition: all 0.15s ease-in-out !important;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html body .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #e6f4ff !important;
  color: #009EE3 !important;
  font-weight: 600 !important;
}

html body .select2-container--default .select2-search--dropdown {
  padding: 0.5rem !important;
}

html body .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  outline: none !important;
}

html body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #009EE3 !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
}

/* ==========================================================================
   4. Custom Form Components (Payment Radios, Quantity Selectors, Modals)
   ========================================================================== */
#hp-checkout-page .payment-method-lbl {
  border: 1px solid var(--hp-slate-200);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#hp-checkout-page .payment-method-lbl:hover {
  background-color: var(--hp-slate-50);
}

#hp-checkout-page .payment-method-lbl input[type="radio"]:checked + div + span,
#hp-checkout-page .payment-method-lbl input[type="radio"]:checked ~ div span {
  color: var(--hp-primary);
}

#hp-checkout-page .payment-method-lbl input[type="radio"] {
  margin-top: 0.125rem;
  accent-color: var(--hp-primary);
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}

#hp-checkout-page #hp-place-order-btn,
.hp-modal-submit-btn,
#hp-vouchers-modal #hp-modal-submit-btn,
#hp-sepay-modal #hp-modal-complete-btn {
  background-color: var(--hp-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1rem 2.5rem !important;
  border-radius: 9999px !important; /* Premium rounded-full */
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
  text-shadow: none !important;
}

#hp-checkout-page #hp-place-order-btn:hover,
#hp-vouchers-modal #hp-modal-submit-btn:hover,
#hp-sepay-modal #hp-modal-complete-btn:hover {
  background-color: var(--hp-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px var(--hp-primary-glow) !important;
}

#hp-checkout-page #hp-place-order-btn svg.animate-spin,
#hp-place-order-btn svg.animate-spin {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

#hp-checkout-page input.cart-qty-input,
.woocommerce-checkout input.cart-qty-input,
input.cart-qty-input {
  width: 1.75rem !important;
  max-width: 1.75rem !important;
  height: 1.625rem !important;
  min-height: 1.625rem !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--hp-slate-800) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

#hp-checkout-page input.cart-qty-input:focus,
input.cart-qty-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#hp-checkout-page input.cart-qty-input::-webkit-outer-spin-button,
#hp-checkout-page input.cart-qty-input::-webkit-inner-spin-button,
input.cart-qty-input::-webkit-outer-spin-button,
input.cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* SePay QR Code Loader Spinners */
.border-3 { border-width: 3px; }
.border-t-primary-blue { border-top-color: var(--hp-primary); }
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Vouchers items structure inside modal */
.hp-modal-voucher-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.hp-modal-voucher-item {
  position: relative !important;
  display: flex !important;
  border: 1px solid var(--hp-slate-200) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  overflow: visible !important;
  min-height: 84px !important;
  box-sizing: border-box !important;
}
.hp-modal-voucher-item:hover {
  border-color: var(--hp-slate-300) !important;
}
.hp-modal-voucher-item::before,
.hp-modal-voucher-item::after {
  content: '' !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #ffffff !important; /* matches container background */
  border: 1px solid var(--hp-slate-200) !important;
  border-radius: 50% !important;
  left: 83px !important; /* 90px left width - 7px radius */
  z-index: 2 !important;
  box-sizing: border-box !important;
}
.hp-modal-voucher-item::before {
  top: -8px !important;
  clip-path: inset(50% 0 0 0) !important;
}
.hp-modal-voucher-item::after {
  bottom: -8px !important;
  clip-path: inset(0 0 50% 0) !important;
}

/* Active State */
.hp-modal-voucher-item.active {
  border-color: var(--hp-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 158, 227, 0.06) !important;
}
.hp-modal-voucher-item.active::before,
.hp-modal-voucher-item.active::after {
  border-color: var(--hp-primary) !important;
}
.hp-modal-voucher-item.active .hp-modal-voucher-left span {
  color: var(--hp-primary) !important;
}

/* Disabled State */
.hp-modal-voucher-item.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background-color: #fafafa !important;
}
.hp-modal-voucher-item.disabled .hp-modal-voucher-left span {
  color: var(--hp-slate-400) !important;
}

/* Left Badge Panel */
.hp-modal-voucher-left {
  width: 90px !important;
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-right: 1px dashed var(--hp-slate-200) !important;
  flex-shrink: 0 !important;
}

/* Right Details Panel */
.hp-modal-voucher-right {
  flex: 1 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Radio Circle Selector */
.hp-voucher-radio {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid var(--hp-slate-300) !important;
  position: relative !important;
  background-color: #ffffff !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.hp-modal-voucher-item.active .hp-voucher-radio {
  border-color: var(--hp-primary) !important;
}
.hp-modal-voucher-item.active .hp-voucher-radio::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: var(--hp-primary) !important;
  border-radius: 50% !important;
}
.hp-modal-voucher-item.disabled .hp-voucher-radio {
  border-color: var(--hp-slate-200) !important;
  background-color: var(--hp-slate-50) !important;
}

/* Alternative coupon entry wrap in modal */
.hp-nested-coupon-wrapper {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
}
.hp-nested-coupon-wrapper input {
  height: 48px !important;
  padding: 12px 100px 12px 16px !important;
  border: 1px solid var(--hp-slate-200) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  background-color: #ffffff !important;
  outline: none !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
}
.hp-nested-coupon-wrapper input:focus {
  border-color: var(--hp-primary) !important;
}
.hp-nested-coupon-wrapper button {
  position: absolute !important;
  right: 4px !important;
  top: 4px !important;
  bottom: 4px !important;
  margin: 0 !important;
  height: auto !important;
  background-color: var(--hp-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0 20px !important;
  border-radius: 9999px !important; /* Premium rounded pill */
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hp-nested-coupon-wrapper button:hover {
  background-color: var(--hp-primary-hover) !important;
  transform: translateY(-0.5px) !important;
}

/* Electronic invoice request modal */
#hp-checkout-page .hp-invoice-help {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 1px solid var(--hp-slate-300) !important;
  border-radius: 9999px !important;
  color: var(--hp-slate-500) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-left: 0.5rem !important;
}

#hp-invoice-modal .hp-invoice-modal-container {
  max-width: 540px !important;
}

#hp-invoice-modal .hp-invoice-modal-container > .flex {
  padding: 1rem 1.25rem !important;
}

#hp-invoice-modal .hp-invoice-modal-container > .border-t {
  padding: 1rem 1.25rem !important;
}

#hp-invoice-modal .hp-invoice-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.25rem !important;
  background-color: #fff7e6 !important;
  color: #1f2937 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

#hp-invoice-modal .hp-invoice-note-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background-color: #f59e0b !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

#hp-invoice-modal .hp-invoice-modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
}

#hp-invoice-modal .hp-invoice-field-row {
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

#hp-invoice-modal .hp-invoice-field-row-top {
  align-items: start !important;
}

#hp-invoice-modal .hp-invoice-field-row label {
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#hp-invoice-modal .hp-invoice-field-control {
  min-width: 0 !important;
}

#hp-invoice-modal input[type="text"],
#hp-invoice-modal input[type="email"],
#hp-invoice-modal textarea {
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  transition: all 0.2s ease-in-out !important;
  box-sizing: border-box !important;
}

#hp-invoice-modal input[type="text"],
#hp-invoice-modal input[type="email"] {
  height: 3rem !important;
  padding: 0 1rem !important;
}

#hp-invoice-modal textarea {
  min-height: 4.5rem !important;
  height: 4.5rem !important;
  padding: 0.5rem 1rem !important;
  resize: vertical !important;
}

#hp-invoice-modal input::placeholder,
#hp-invoice-modal textarea::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

#hp-invoice-modal input:focus,
#hp-invoice-modal textarea:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #009EE3 !important;
  box-shadow: 0 0 0 1px #009EE3 !important;
}

#hp-invoice-modal .hp-invoice-help-text {
  color: var(--hp-slate-500) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0.375rem 0 0 !important;
}

#hp-invoice-modal .hp-invoice-save-default {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  margin-left: 142px !important;
  color: var(--hp-slate-700) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

#hp-invoice-modal .hp-invoice-save-default input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  margin: 0.0625rem 0 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#hp-invoice-modal .hp-invoice-save-default input[type="checkbox"]:checked {
  border-color: var(--hp-primary) !important;
  background-color: var(--hp-primary) !important;
}

#hp-invoice-modal .hp-invoice-save-default input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 0.375rem !important;
  top: 0.1875rem !important;
  width: 0.375rem !important;
  height: 0.6875rem !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

#hp-invoice-modal .hp-invoice-disclaimer {
  background-color: var(--hp-slate-50) !important;
  border-radius: 0.5rem !important;
  padding: 0.875rem 1rem !important;
  margin-top: 0.75rem !important;
  border: 1px solid var(--hp-slate-100) !important;
}

#hp-invoice-modal .hp-invoice-disclaimer-title {
  color: var(--hp-slate-700) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.375rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

#hp-invoice-modal .hp-invoice-disclaimer-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
}

#hp-invoice-modal .hp-invoice-disclaimer-list li {
  position: relative !important;
  padding-left: 0.75rem !important;
  color: #1e293b !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

#hp-invoice-modal .hp-invoice-disclaimer-list li::before {
  content: "–" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #1e293b !important;
}

#hp-invoice-modal #hp-invoice-modal-submit-btn {
  background-color: var(--hp-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 900 !important;
  padding: 0.75rem 1.75rem !important;
  box-shadow: none !important;
}

#hp-invoice-modal #hp-invoice-modal-submit-btn:hover {
  background-color: var(--hp-primary-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 639px) {
  #hp-invoice-modal .hp-invoice-field-row {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  #hp-invoice-modal .hp-invoice-save-default {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   5. Thankyou Page details (Order confirmed tracking & copy widgets)
   ========================================================================== */
#hp-thankyou-page nav a {
  text-decoration: none;
}

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.875rem;
}
.woocommerce-table--order-details thead th {
  background-color: var(--hp-slate-50);
  color: var(--hp-slate-500);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hp-slate-100);
}
.woocommerce-table--order-details tbody td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--hp-slate-100);
  color: var(--hp-slate-700);
  font-weight: 600;
}
.woocommerce-table--order-details tfoot th {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hp-slate-100);
  color: var(--hp-slate-500);
  font-weight: 700;
  text-align: left;
}
.woocommerce-table--order-details tfoot td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hp-slate-100);
  color: var(--hp-slate-800);
  font-weight: 800;
}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}
.woocommerce-table--order-details tfoot tr:last-child td .woocommerce-Price-amount {
  color: var(--hp-primary);
  font-size: 1.125rem;
  font-weight: 900;
}

/* ==========================================================================
   5a. WooCommerce Order Received (Thank You) styling overrides
   ========================================================================== */

/* Hide default Flatsome checkout page title / steps header on checkout and thank you pages */
.checkout-page-title.page-title {
  display: none !important;
}

/* Fix massive SVG chevron inside breadcrumbs */
#hp-thankyou-page nav svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Positioning, Translation, & Z-Index Utilities */
#hp-thankyou-page .absolute.left-0.right-0.top-1\/2 {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#hp-thankyou-page .absolute.left-0.top-1\/2 {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#hp-thankyou-page .absolute.-left-\[45px\] {
  left: -45px !important;
}
#hp-thankyou-page .absolute.top-0\.5 {
  top: 0.125rem !important;
}
#hp-thankyou-page .inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Background utilities */
#hp-thankyou-page .bg-transparent {
  background-color: transparent !important;
}
#hp-thankyou-page .bg-slate-100 {
  background-color: var(--hp-slate-100) !important;
}

/* Borders & Dividers */
#hp-thankyou-page .border-slate-100\/80 {
  border-color: rgba(241, 245, 249, 0.8) !important;
}
#hp-thankyou-page .border-slate-200\/50 {
  border-color: rgba(226, 232, 240, 0.5) !important;
}
#hp-thankyou-page .border-primary-blue {
  border-color: var(--hp-primary) !important;
}
#hp-thankyou-page .divide-y.divide-slate-100 > * + * {
  border-top: 1px solid var(--hp-slate-100) !important;
}

/* Spacing utilities */
#hp-thankyou-page .mb-8 {
  margin-bottom: 2rem !important;
}
#hp-thankyou-page .ml-4 {
  margin-left: 1rem !important;
}
#hp-thankyou-page .pl-1 {
  padding-left: 0.25rem !important;
}

/* Layout utilities */
#hp-thankyou-page .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#hp-thankyou-page .flex-1 {
  flex: 1 1 0% !important;
}
#hp-thankyou-page .overflow-hidden {
  overflow: hidden !important;
}
#hp-thankyou-page .max-w-xs {
  max-width: 20rem !important;
}
#hp-thankyou-page .max-w-\[340px\] {
  max-width: 340px !important;
}
#hp-thankyou-page .w-full {
  width: 100% !important;
}
#hp-thankyou-page .h-full {
  height: 100% !important;
}
#hp-thankyou-page .object-contain {
  object-fit: contain !important;
}

/* Interactive & Transitions */
#hp-thankyou-page .cursor-pointer {
  cursor: pointer !important;
}
#hp-thankyou-page a.hover\:text-primary-blue:hover {
  color: var(--hp-primary) !important;
}
#hp-thankyou-page .hover\:bg-slate-100:hover {
  background-color: var(--hp-slate-100) !important;
}
#hp-thankyou-page .active\:scale-95:active {
  transform: scale(0.95) !important;
}
#hp-thankyou-page .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
#hp-thankyou-page .transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
#hp-thankyou-page .duration-500 {
  transition-duration: 500ms !important;
}
#hp-thankyou-page .duration-300 {
  transition-duration: 300ms !important;
}

/* Custom ring shadow */
#hp-thankyou-page .ring-4.ring-sky-blue {
  box-shadow: 0 0 0 4px var(--hp-primary-light) !important;
}

/* SVG current stroke override */
#hp-thankyou-page .stroke-current {
  stroke: currentColor !important;
}
#hp-thankyou-page .fill-none {
  fill: none !important;
}

/* Shadow details */
#hp-thankyou-page .shadow-emerald-500\/20 {
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2), 0 2px 4px -2px rgba(16, 185, 129, 0.2) !important;
}

/* Animations */
#hp-thankyou-page #hp-ty-main-icon-container.bg-sky-blue {
  animation: hpClockPulse 2s infinite ease-in-out !important;
}
@keyframes hpClockPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 158, 227, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(0, 158, 227, 0);
  }
}

/* Direct input focus helper and validation animations */
.hp-validation-error {
  border-color: var(--hp-danger) !important;
  background-color: var(--hp-danger-light) !important;
  animation: hpInputShake 400ms ease-in-out !important;
}
@keyframes hpInputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* ==========================================================================
   6. Other WooCommerce Notice Customizations
   ========================================================================== */
.woocommerce-error a,
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
  color: var(--hp-primary) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.woocommerce-error a:hover,
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover {
  text-decoration: underline !important;
}
.woocommerce-message a.button.wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  float: right !important;
  margin-top: -3px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.woocommerce-message a.button.wc-forward:hover {
  background-color: #047857 !important;
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  animation: hpAlertSlideDown 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hpAlertSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }

}

#hp-checkout-page #hp-checkout-summary-list [data-cart-item-row] {
  position: relative !important;
}

#hp-checkout-page .cart-remove-btn,
.cart-remove-btn {
  position: absolute !important;
  top: 1.5rem !important; /* Align with content top (py-6 is padding-top 1.5rem) */
  right: -0.5rem !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  color: #94a3b8 !important; /* slate-400 */
  border-radius: 9999px !important; /* Circle shape */
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

#hp-checkout-page #hp-checkout-summary-list [data-cart-item-row]:first-child .cart-remove-btn {
  top: 0 !important; /* First row has first:pt-0 so padding-top is 0 */
}

#hp-checkout-page .cart-remove-btn:hover,
.cart-remove-btn:hover {
  background-color: #fee2e2 !important; /* red-100 */
  color: #ef4444 !important; /* red-500 */
}

#hp-checkout-page .cart-remove-btn svg,
.cart-remove-btn svg {
  width: 12px !important;
  height: 12px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  display: block !important;
}

/* ==========================================================================
   8. Quantity Adjust Buttons Customizations (Single Product Design Clone)
   ========================================================================== */
#hp-checkout-page .hp-qty-input-box,
.hp-qty-input-box {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important; /* Pill shape */
  overflow: hidden !important;
  padding: 2px !important; /* Create space for buttons */
  background-color: #ffffff !important; /* Premium clean white background */
  width: max-content !important;
  height: 1.875rem !important; /* Sleek 30px height */
}

#hp-checkout-page .hp-qty-adjust,
.hp-qty-adjust {
  width: 1.625rem !important;
  height: 1.625rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.625rem !important;
  color: #475569 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  border-radius: 9999px !important; /* Circle shape button */
  transition: all 150ms ease !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

#hp-checkout-page .hp-qty-adjust:hover,
.hp-qty-adjust:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(1.05) !important;
}

#hp-checkout-page .hp-qty-adjust:active,
.hp-qty-adjust:active {
  transform: scale(0.92) !important;
}

/* ==========================================================================
   9. Vouchers & General Modal Customizations (Viewport Overlay & Bottom-sheet)
   ========================================================================== */
.hp-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  background-color: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: none !important; /* Hidden by default */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0;
  transition: opacity 300ms ease-in-out !important;
}

/* Phủ màu nền tối 60% và làm mờ 4px cho lớp nền Confirm Modal */
#hp-confirm-modal > .absolute.inset-0 {
  background-color: rgba(15, 23, 42, 0.6) !important; /* Phủ tối sang trọng */
  backdrop-filter: blur(4px) !important;               /* Hiệu ứng Blur */
  -webkit-backdrop-filter: blur(4px) !important;       /* Hỗ trợ Safari */
}

.hp-modal-backdrop.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.hp-modal-container {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
  width: 100% !important;
  max-width: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 85vh !important;
  transform: scale(0.95) !important;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.hp-modal-backdrop.active .hp-modal-container {
  transform: scale(1) !important;
}

/* Modal Header & Elements */
.hp-modal-container h3 {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--hp-slate-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
}
.hp-modal-container h3 svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--hp-primary) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
#hp-close-vouchers-modal-btn {
  width: 32px !important;
  height: 32px !important;
  background-color: #f1f5f9 !important;
  color: var(--hp-slate-400) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}
#hp-close-vouchers-modal-btn:hover {
  background-color: var(--hp-slate-200) !important;
  color: var(--hp-slate-800) !important;
}
#hp-close-vouchers-modal-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.5 !important;
}

.hp-modal-body {
  overflow-y: auto !important;
  padding: 24px !important;
}

/* Modal Footer & Buttons */
.hp-modal-container .px-6.py-5.border-t {
  background-color: #f8fafc !important;
  border-top: 1px solid var(--hp-slate-100) !important;
}
#hp-vouchers-modal #hp-modal-submit-btn {
  background-color: var(--hp-primary) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important; /* Premium rounded pill */
  padding: 12px 24px !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
  text-shadow: none !important;
}
#hp-vouchers-modal #hp-modal-submit-btn:hover {
  background-color: var(--hp-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px var(--hp-primary-glow) !important;
}

/* Mobile responsive bottom-sheet layout */
@media (max-width: 639px) {
  .hp-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .hp-modal-container {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    transform: translateY(100%) !important;
    max-height: 85vh !important;
    max-width: 100% !important;
  }
  .hp-modal-backdrop.active .hp-modal-container {
    transform: translateY(0) !important;
  }
  .hp-modal-container .px-6.py-5.border-t {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact order summary list on mobile */
  #hp-checkout-summary-list [data-cart-item-row] {
    padding-top: 0.75rem !important; /* py-3 */
    padding-bottom: 0.75rem !important; /* py-3 */
    gap: 0.75rem !important; /* gap-3 */
  }
  #hp-checkout-summary-list [data-cart-item-row] .aspect-square {
    width: 3.5rem !important; /* w-14 (56px) */
    height: 3.5rem !important;
  }
  #hp-checkout-summary-list .hp-cart-item-details {
    min-height: 3.5rem !important; /* 56px */
    padding-right: 1.5rem !important; /* pr-6 */
  }
  #hp-checkout-summary-list .hp-cart-item-details h3 {
    font-size: 0.75rem !important; /* text-xs (12px) */
    line-height: 1.25 !important;
  }
  #hp-checkout-summary-list .hp-cart-item-details .text-\[10px\] {
    font-size: 9px !important;
  }
  #hp-checkout-summary-list .hp-qty-input-box {
    height: 1.625rem !important; /* 26px */
  }
  #hp-checkout-summary-list .hp-qty-adjust {
    width: 1.375rem !important; /* 22px */
    height: 1.375rem !important;
    font-size: 0.55rem !important;
  }
  #hp-checkout-summary-list input.cart-qty-input {
    font-size: 11px !important;
    width: 1.5rem !important;
    max-width: 1.5rem !important;
    height: 1.375rem !important;
    min-height: 1.375rem !important;
  }
  #hp-checkout-summary-list .hp-cart-item-details .font-extrabold.text-slate-900.text-sm {
    font-size: 0.75rem !important; /* Price: text-xs */
  }
  #hp-checkout-summary-list .hp-cart-item-details .line-through {
    font-size: 9px !important;
  }
  #hp-checkout-summary-list .cart-remove-btn {
    top: 0.5rem !important;
    right: -1.25rem !important;
  }
  #hp-checkout-summary-list .cart-remove-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Tối ưu hóa Confirm Modal xác nhận xóa trên Mobile */
  #hp-confirm-modal .relative.bg-white {
    padding: 1.25rem !important; /* Giảm padding p-7 -> p-5 */
    gap: 1.25rem !important;     /* Giảm gap từ 20px -> 16px */
    margin: 1rem !important;     /* Tạo khoảng cách lề ngoài */
    max-width: calc(100% - 2rem) !important;
  }
  #hp-confirm-modal h4 {
    font-size: 1rem !important;  /* text-base (16px) */
  }
  #hp-confirm-modal p {
    font-size: 0.75rem !important; /* text-xs (12px) */
    line-height: 1.5 !important;
  }
  #hp-confirm-modal .flex.items-center.justify-end {
    flex-direction: column-reverse !important; /* Xếp dọc: Xác nhận ở trên, Hủy ở dưới */
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  #hp-confirm-modal #hp-modal-cancel,
  #hp-confirm-modal #hp-modal-confirm {
    width: 100% !important;       /* Kéo dài full-width trên mobile */
    text-align: center !important;
    justify-content: center !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* ==========================================================================
   10. Empty Cart State Customizations
   ========================================================================== */
#hp-cart-empty-state {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4rem 2rem !important;
  background-color: #ffffff !important;
  border: 1px solid var(--hp-slate-100) !important;
  border-radius: 1rem !important;
  max-width: 42rem !important;
  margin: 3rem auto !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

#hp-cart-empty-state div.rounded-full {
  width: 5rem !important;
  height: 5rem !important;
  background-color: var(--hp-primary-light) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#hp-cart-empty-state svg {
  width: 2.5rem !important;
  height: 2.5rem !important;
  color: var(--hp-primary) !important;
}

#hp-cart-empty-state h2 {
  display: block !important;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.75rem 0 !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--hp-slate-800) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
}

#hp-cart-empty-state h2::after,
#hp-cart-empty-state h2::before {
  display: none !important;
  content: none !important;
}

#hp-cart-empty-state p {
  display: block !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  color: var(--hp-slate-500) !important;
  max-width: 28rem !important;
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#hp-cart-empty-state a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 2.5rem !important;
  background-color: var(--hp-primary) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px var(--hp-primary-glow) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-shadow: none !important;
  width: auto !important;
  height: auto !important;
}

#hp-cart-empty-state a:hover {
  background-color: var(--hp-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px var(--hp-primary-glow) !important;
}

/* ==========================================================================
   10. Bank Selection Bottom Sheet (Vanilla CSS)
   ========================================================================== */
#hp-bank-sheet-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    opacity: 0;
    transition: opacity 300ms ease-in-out !important;
}

#hp-bank-sheet-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#hp-bank-bottom-sheet {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
    width: 100% !important;
    max-width: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    transform: scale(0.95) !important;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

#hp-bank-sheet-overlay.active #hp-bank-bottom-sheet {
    transform: scale(1) !important;
}

/* Header, X Close button, Title */
.hp-bank-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 24px 12px 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.hp-bank-drag-handle {
    width: 48px !important;
    height: 5px !important;
    background-color: #cbd5e1 !important;
    border-radius: 99px !important;
    margin: 0 auto 16px auto !important;
    display: none !important; /* hidden on desktop */
}

.hp-bank-close-x {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #f8fafc !important;
    color: #94a3b8 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.hp-bank-close-x:hover {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.hp-bank-header-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
}

.hp-bank-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-align: left !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.5 !important;
}

/* Body / Container */
.hp-bank-body {
    overflow-y: auto !important;
    padding: 12px 24px !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

/* Search bar style */
.hp-bank-search-wrapper {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}

.hp-bank-search-input {
    width: 100% !important;
    padding: 12px 16px 12px 40px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0 !important;
}

.hp-bank-search-input::placeholder {
    color: #94a3b8 !important;
}

.hp-bank-search-input:focus {
    border-color: #009EE3 !important;
}

.hp-bank-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}

/* Tab filter chips */
.hp-bank-tabs-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    gap: 8px !important;
}

.hp-bank-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important; /* Firefox */
}

.hp-bank-tabs::-webkit-scrollbar {
    display: none !important; /* Safari/Chrome */
}

.hp-bank-tab {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.hp-bank-tab.active {
    background-color: #eff6ff !important;
    color: #009EE3 !important;
}

.hp-bank-layout-toggle {
    width: 36px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.hp-bank-layout-toggle:hover {
    background-color: #f8fafc !important;
    color: #475569 !important;
}

/* Vertical List Layout */
#hp-bank-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hp-bank-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 14px 8px !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    user-select: none !important;
    gap: 14px !important;
}

.hp-bank-item:last-child {
    border-bottom: none !important;
}

.hp-bank-item:hover {
    background-color: #f8fafc !important;
}

.hp-bank-item:active {
    transform: scale(0.99) !important;
}

.hp-bank-item img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.hp-bank-text-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 !important;
    gap: 3px !important;
}

.hp-bank-app-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

.hp-bank-full-name {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* Loader */
#hp-bank-loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 32px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.hp-bank-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e2e8f0 !important;
    border-top-color: #009EE3 !important;
    border-radius: 50% !important;
    animation: hp-spin 0.8s linear infinite !important;
}

@keyframes hp-spin {
    to { transform: rotate(360deg); }
}

/* No results message */
.hp-bank-no-results {
    text-align: center !important;
    padding: 32px 16px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}


/* Footer & Cancel Button */
.hp-bank-footer {
    padding: 0 24px 24px 24px !important;
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-top: none !important;
}

.hp-bank-cancel-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.hp-bank-cancel-btn:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.hp-bank-cancel-btn:active {
    transform: scale(0.97) !important;
}

/* Mobile Bottom Sheet Layout */
@media (max-width: 767px) {
    #hp-bank-sheet-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    
    #hp-bank-bottom-sheet {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        max-height: 80vh !important;
        transform: translateY(100%) !important;
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    #hp-bank-sheet-overlay.active #hp-bank-bottom-sheet {
        transform: translateY(0) !important;
    }

    .hp-bank-drag-handle {
        display: block !important;
    }

    .hp-bank-header {
        padding: 16px 20px 12px 20px !important;
    }

    .hp-bank-close-x {
        top: 24px !important;
        right: 20px !important;
    }

    .hp-bank-body {
        padding: 12px 20px !important;
    }

    .hp-bank-footer {
        padding: 0 20px 20px 20px !important;
    }
    
    #hp-bank-grid {
        gap: 8px !important;
    }
    
    .hp-bank-item {
        padding: 10px 4px !important;
        border-radius: 0 !important;
        gap: 10px !important;
    }
    
    .hp-bank-item img {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        margin-bottom: 0 !important;
    }
    
    .hp-bank-app-name {
        font-size: 13px !important;
    }
    
    .hp-bank-full-name {
        font-size: 10px !important;
    }

    /* Parent container full-bleed on mobile to allow custom margins */
    html body.woocommerce-checkout .container,
    html body.woocommerce-checkout .cart-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Outer checkout container side margins: 10px to match Homepage */
    #hp-checkout-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Restore card borders/shadows/radius on mobile */
    #hp-checkout-page .bg-white.shadow-sm:not(#hp-checkout-empty-state) {
        border: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    }

    /* Inner card panels padding on mobile */
    #hp-checkout-page .p-6,
    #hp-checkout-page .p-8 {
        padding: 16px !important;
    }
}

/* Premium error notice styles (billing & invoice validation notices) */
#hp-invoice-err,
#hp-billing-err {
  display: flex !important;
  align-items: center !important;
  background-color: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  color: #991b1b !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#hp-invoice-err {
  margin-bottom: 1.25rem !important;
}

#hp-billing-err {
  margin-top: 1rem !important;
}

#hp-invoice-err.hidden,
#hp-billing-err.hidden {
  display: none !important;
}

#hp-invoice-err::before,
#hp-billing-err::before {
  content: "!" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border-radius: 9999px !important;
  margin-right: 0.75rem !important;
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}