/*
Theme Name: Heathrow Car Parking
Author: shailendra
Description: Make your journey easier with convenient Heathrow car parking options designed for a smooth and stress-free airport experience. Compare parking options near Heathrow Airport, choose the service that suits your trip, and enjoy easy access to your terminal.
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

.elementor-29 .elementor-element.elementor-element-5f8c666f img {
    width: 195px !important; 
}


.btn-amber {
    transition: background 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
				
}

.btn-amber:hover {
    background: #f2b352;
	border-radius: 10px !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(233, 166, 60, 0.9);
}

/* =========================================
   Heathrow Runway Indicator
   ========================================= */
.runway {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 24px 0 30px;
}
.runway span {
    display: block;
    width: 32px;
    height: 7px;
    border-radius: 999px;
    /* Dim state */
    background: rgba(233, 166, 60, 0.28);
    /* Smooth illumination */
    animation: runwayIlluminate 2.5s ease-in-out infinite;
}
/* Each runway light activates one after another */
.runway span:nth-child(1) {
    animation-delay: 0s;
}
.runway span:nth-child(2) {
    animation-delay: 0.2s;
}
.runway span:nth-child(3) {
    animation-delay: 0.4s;
}
.runway span:nth-child(4) {
    animation-delay: 0.6s;
}
.runway span:nth-child(5) {
    animation-delay: 0.8s;
}
/* Illumination animation */
@keyframes runwayIlluminate {

    0% {
        background: rgba(233, 166, 60, 0.28);
        box-shadow: none;
    }
    15% {
        background: #E9A63C;
        box-shadow: 0 0 10px rgba(233, 166, 60, 0.55);
    }
    30% {
        background: #E9A63C;
        box-shadow: 0 0 10px rgba(233, 166, 60, 0.55);
    }
    45% {
        background: rgba(233, 166, 60, 0.28);
        box-shadow: none;
    }
    100% {
        background: rgba(233, 166, 60, 0.28);
        box-shadow: none;
    }
}
/* Respect reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .runway span {
        animation: none;
        background: #E9A63C;
        box-shadow: none;
    }
}

.elementor-element-67c250b .elementskit-section-subtitle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px; 
    letter-spacing: 0.16em !important;
   
    color: #E9A63C !important;
    line-height: 1.4;
}

.elementor-element-67c250b .elementskit-section-subtitle::before,
.elementor-element-67c250b .elementskit-section-subtitle::after {
    content: "" !important;
    display: block !important;
    width: 25px;
    height: 2px;
    background: #E9A63C !important;
    border-radius: 999px;
    flex-shrink: 0;
}



/* Search Form - Heathrow Parking Comparison */
.search{
  background:#FFFFFF;
  border-radius:16px;
  box-shadow:0 18px 50px -24px rgba(12,37,48,.45);
  padding:16px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
  text-align:left;
  max-width:1040px !important;
  margin:32px auto;
}
.search .sf label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#5B6E74;
  margin-bottom:5px;
}
.search .sf select,
.search .sf input{
  width:100% !important;
  padding:12px;
  border:1.5px solid #DDE3E1;
  border-radius:10px;
  font-family:inherit;
  font-size:14.5px;
  color:#123039;
  background:#fff;
  height:auto;
  appearance:none;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search .sf select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%235B6E74' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.search .sf select:focus,
.search .sf input:focus{
  border-color:#E9A63C;
  box-shadow:0 0 0 3px rgba(233,166,60,.18);
}
.search .btn-amber{
  height:46px;
  justify-content:center;
  padding:0 22px;
  white-space:nowrap;
}
.search .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  border:none;
  font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.search .btn-amber{
  background:#E9A63C;
  color:#3B2606;
}
.search .btn-amber:hover{
  background:#f2b352;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(233,166,60,.9);
}

/* Tablet */
@media (max-width:1024px){
  .search{
    grid-template-columns:1fr 1fr;
    max-width:100% !important;
    width:100% !important;
  }
  .search .btn-amber{
    grid-column:1 / -1;
    width:100% !important;
    height:48px !important;
  }
}

/* Mobile */
@media (max-width:640px){
  .search{
    grid-template-columns:1fr;
    max-width:100% !important;
    width:100% !important;
    padding:14px;
    gap:12px;
  }
  .search .btn-amber{
    grid-column:1;
  }
}



/* Reusable dash-before eyebrow utility */
.dash-eyebrow .elementskit-section-subtitle,
.dash-eyebrow.sec-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dash-eyebrow .elementskit-section-subtitle::before,
.dash-eyebrow.sec-eyebrow::before{
  content:"";
  width:22px;
  height:3px;
  background:#E9A63C;
  flex-shrink:0;
}

/* Optional: dono taraf dash chahiye ho to */
.dash-eyebrow.dash-both .elementskit-section-subtitle::after,
.dash-eyebrow.dash-both.sec-eyebrow::after{
  content:"";
  width:22px;
  height:2px;
  background:#E9A63C;
  flex-shrink:0;
}


/* Reusable hover-lift utility */
.hover-lift{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px -24px rgba(12,37,48,.45);
}











/* ============================================
   OPERATOR COMPARISON SECTION - FULL CSS
   Scoped to widget wrapper for max specificity
   ============================================ */

.elementor-element-df2853a .sample-tag{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#B87A16 !important;
  background:rgba(233,166,60,.14);
  border:1px solid rgba(233,166,60,.35);
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:16px;
}

/* Filter chips - force reset all states */
.elementor-element-df2853a .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}
.elementor-element-df2853a .chip,
.elementor-element-df2853a .chip:link,
.elementor-element-df2853a .chip:visited,
.elementor-element-df2853a .chip:hover,
.elementor-element-df2853a .chip:focus,
.elementor-element-df2853a .chip:active{
  font-size:13.5px !important;
  font-weight:600 !important;
  border:1.5px solid #DDE3E1 !important;
  background:#fff !important;
  border-radius:20px !important;
  padding:8px 14px !important;
  cursor:pointer;
  color:#5B6E74 !important;
  text-decoration:none !important;
  outline:none !important;
  -webkit-tap-highlight-color:transparent;
  box-shadow:none !important;
}
.elementor-element-df2853a .chip.on,
.elementor-element-df2853a .chip.on:hover,
.elementor-element-df2853a .chip.on:focus{
  background:#0C2530 !important;
  color:#fff !important;
  border-color:#0C2530 !important;
}
.elementor-element-df2853a .filters .sort{
  margin-left:auto;
  font-size:13.5px;
  color:#5B6E74;
}

/* Results grid */
.elementor-element-df2853a .results{
  display:grid;
  gap:14px;
}

/* Operator card */
.elementor-element-df2853a .opcard{
  background:#FFFFFF;
  border:1px solid #DDE3E1;
  border-radius:14px;
  padding:20px 22px;
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:20px;
  align-items:center;
  transition:box-shadow .15s ease, transform .15s ease;
}
.elementor-element-df2853a .opcard:hover{
  box-shadow:0 18px 50px -24px rgba(12,37,48,.45);
  transform:translateY(-2px);
}
.elementor-element-df2853a .opcard.best{
  border-color:#E9A63C;
  box-shadow:0 0 0 1px #E9A63C inset;
}

.elementor-element-df2853a .oplogo{
  width:60px;
  height:60px;
  border-radius:12px;
  background:#F1F4F3;
  display:grid;
  place-items:center;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;
  color:#0C2530;
  font-size:20px;
}

.elementor-element-df2853a .opmid .opname{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.elementor-element-df2853a .opmid .flag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#3B2606;
  background:#E9A63C;
  padding:2px 8px;
  border-radius:5px;
}
.elementor-element-df2853a .opcard.best .flag.trans{
  background:#2E8B6A;
  color:#fff;
}

.elementor-element-df2853a .oprate{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:#5B6E74;
  margin:4px 0 8px;
}
.elementor-element-df2853a .oprate .stars{
  color:#E9A63C;
  letter-spacing:1px;
}

.elementor-element-df2853a .opmeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:12.5px;
  color:#5B6E74;
  margin:2px 0 8px;
}
.elementor-element-df2853a .opmeta span{
  display:flex;
  align-items:center;
  gap:5px;
}
.elementor-element-df2853a .opmeta svg{
  width:14px;
  height:14px;
  color:#B87A16;
}

.elementor-element-df2853a .opchips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.elementor-element-df2853a .opchips span{
  font-size:11.5px;
  font-weight:600;
  color:#2E8B6A;
  background:rgba(46,139,106,.1);
  border:1px solid rgba(46,139,106,.3);
  padding:3px 9px;
  border-radius:20px;
}
.elementor-element-df2853a .opchips span.svc{
  color:#0C2530;
  background:#F1F4F3;
  border-color:#DDE3E1;
}

/* Price block */
.elementor-element-df2853a .opprice{
  text-align:right;
}
.elementor-element-df2853a .opprice .amt{
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:26px;
}
.elementor-element-df2853a .opprice .per{
  font-size:12px;
  color:#5B6E74;
  margin-bottom:8px;
}

/* View deal buttons - FORCE reset every state */
.elementor-element-df2853a .opprice .btn,
.elementor-element-df2853a .opprice .btn:link,
.elementor-element-df2853a .opprice .btn:visited,
.elementor-element-df2853a .opprice .btn:hover,
.elementor-element-df2853a .opprice .btn:focus,
.elementor-element-df2853a .opprice .btn:active{
  width:100% !important;
  justify-content:center !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-weight:600 !important;
  border-radius:10px !important;
  padding:12px 20px !important;
  cursor:pointer;
  font-size:15px !important;
  -webkit-tap-highlight-color:transparent;
  box-shadow:none;
}
.elementor-element-df2853a .opprice .btn-ghost,
.elementor-element-df2853a .opprice .btn-ghost:link,
.elementor-element-df2853a .opprice .btn-ghost:visited{
  background:transparent !important;
  border:1.5px solid #DDE3E1 !important;
  color:#123039 !important;
}
.elementor-element-df2853a .opprice .btn-ghost:hover,
.elementor-element-df2853a .opprice .btn-ghost:focus{
  border-color:#0C2530 !important;
  color:#123039 !important;
  background:transparent !important;
}
.elementor-element-df2853a .opprice .btn-amber,
.elementor-element-df2853a .opprice .btn-amber:link,
.elementor-element-df2853a .opprice .btn-amber:visited{
  background:#E9A63C !important;
  color:#3B2606 !important;
  border:none !important;
}
.elementor-element-df2853a .opprice .btn-amber:hover,
.elementor-element-df2853a .opprice .btn-amber:focus{
  background:#f2b352 !important;
  color:#3B2606 !important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(233,166,60,.9) !important;
}

.elementor-element-df2853a .results-more{
  text-align:center;
  margin-top:24px;
  color:#5B6E74;
  font-size:14.5px;
}

/* ============================================
   TABLET
   ============================================ */
@media (max-width:1024px){
  .elementor-element-df2853a .opcard{
    grid-template-columns:56px 1fr auto;
    gap:16px;
    padding:18px;
  }
  .elementor-element-df2853a .opprice .amt{
    font-size:22px;
  }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width:640px){
  .elementor-element-df2853a .filters{
    gap:8px;
  }
  .elementor-element-df2853a .filters .sort{
    margin-left:0;
    width:100%;
    order:99;
    margin-top:6px;
  }
  .elementor-element-df2853a .opcard{
    grid-template-columns:1fr;
    text-align:left;
    padding:16px;
  }
  .elementor-element-df2853a .oplogo{
    width:48px;
    height:48px;
    font-size:16px;
  }
  .elementor-element-df2853a .opprice{
    text-align:left;
  }
  .elementor-element-df2853a .opprice .btn{
    width:auto !important;
  }
  .elementor-element-df2853a .opname{
    font-size:16px;
  }
}




/* Steps section */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.step .num{
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:14px;
  color:#B87A16;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.step .num:after{
  content:"";
  flex:1;
  height:1px;
  background:#DDE3E1;
}
.step h3{
	font-family:"Bricolage Grotesque",sans-serif;
  font-size:20px;
  font-weight:600;
  margin-bottom:9px;
  color:#123039;
}
.step p{
	font-family:"Hanken Grotesk",sans-serif;
  color:#5B6E74;
  font-size:15px;
}

/* Tablet */
@media (max-width:1024px){
  .steps{
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
}

/* Mobile */
@media (max-width:640px){
  .steps{
    grid-template-columns:1fr;
    gap:24px;
  }
}



/* Terminal cards */
.termcards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.termcard{
  background:#FFFFFF;
  border:1px solid #DDE3E1;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.termcard:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 50px -24px rgba(12,37,48,.45);
}
.termcard .tt{
  background:#0C2530;
  color:#fff;
  padding:16px 20px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;
  font-size:18px;
}
.termcard .tt span{
  display:block;
  font-family:"Space Mono",monospace;
  font-size:12px;
  letter-spacing: 0.09em;
  color:#E9A63C;
  font-weight:700;
  margin-bottom:4px;
}
.termcard .tb{
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.termcard .tb p{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:13.5px;
  color:#5B6E74;
  margin-bottom:14px;
  flex:1;
}

/* BASE BUTTON STYLES - ye missing tha */
.termcard .tb .btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:8px;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:600 !important;
  font-size:14.5px;
  border-radius:10px;
  padding:12px 18px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none !important;
}
.termcard .tb .btn-ghost,
.termcard .tb .btn-ghost:link,
.termcard .tb .btn-ghost:visited{
  background:transparent !important;
  border:1.5px solid #DDE3E1 !important;
  color:#123039 !important;
  text-decoration:none !important;
}
.termcard .tb .btn-ghost:hover,
.termcard .tb .btn-ghost:focus{
  border-color:#0C2530 !important;
  color:#123039 !important;
  background:transparent !important;
  text-decoration:none !important;
}

/* Tablet */
@media (max-width:1000px){
  .termcards{
    grid-template-columns:1fr 1fr;
  }
}

/* Mobile */
@media (max-width:640px){
  .termcards{
    grid-template-columns:1fr;
  }
}

/* ============================================
   COMPARISON TABLE SECTION - FULL CSS
   ============================================ */

.cmp-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cmp-table{
  width:100%;
  min-width:600px;
  border-collapse:separate;
  border-spacing:0;
  background:#FFFFFF;
  border:1px solid #DDE3E1;
  border-radius:14px;
  overflow:hidden;
  font-size:15px;
  box-shadow:0 1px 0 #DDE3E1;
}
.cmp-table th,
.cmp-table td{
  padding:15px 18px;
  text-align:left;
  border-bottom:1px solid #DDE3E1;
}
.cmp-table thead th{
  background:#0C2530;
  color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;
  font-size:15.5px;
}
.cmp-table thead th:first-child{
  background:#123543;
}
.cmp-table tbody tr:last-child td{
  border-bottom:1px solid #DDE3E1;
}
.cmp-table td:first-child{
  font-weight:600;
  color:#123039;
  background:#F1F4F3;
}
.cmp-table td{
  color:#5B6E74;
  font-family:"Hanken Grotesk",sans-serif;
}

/* Tablet */
@media (max-width:1024px){
  .cmp-table{
    font-size:14px;
  }
  .cmp-table th,
  .cmp-table td{
    padding:13px 15px;
  }
}

/* Mobile */
@media (max-width:640px){
  .cmp-table{
    font-size:13.5px;
    min-width:520px;
  }
  .cmp-table th,
  .cmp-table td{
    padding:11px 12px;
  }
}



.go,
.go:link,
.go:visited{
  font-weight:600;
  font-size:14px;
  color:#b87a16 !important;
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-decoration:none !important;
}
.go:hover,
.go:focus{
  color: #b87a16 !important;
  text-decoration:none !important;
  gap:9px;
}
.go svg{
  width:15px;
  height:15px;
  transition:transform .15s ease;
}
.go:hover svg{
  transform:translateX(3px);
}


.score{
  display:flex;
  align-items:center;
  gap:16px;
}
.score .big{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;
  font-size:50px;
  line-height:1;
  color:#123039;
}
.score .stars-lg{
  color:#E9A63C;
  font-size:20px;
  letter-spacing:3px;
}
.score small{
  display:block;
  color:#123039;
  font-size:13.5px;
  font-family:"Hanken Grotesk",sans-serif;
  margin-top:2px;
}

/* Tablet */
@media (max-width:1024px){
  .score .big{
    font-size:44px;
  }
}

/* Mobile */
@media (max-width:640px){
  .score{
    gap:12px;
  }
  .score .big{
    font-size:38px;
  }
  .score .stars-lg{
    font-size:17px;
    letter-spacing:2px;
  }
  .score small{
    font-size:12.5px;
  }
}





.faq-wrap{
  max-width:840px;
}
.faq{
  border-bottom:1px solid var(--line);
}
.faq button,
.faq button:hover,
.faq button:focus,
.faq button:active,
.faq button:visited{
  width:100%;
  text-align:left;
  background:none !important;
  border:none;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;
  font-size:18px;
  color:var(--text) !important;
  text-decoration:none !important;
}
.faq .ans{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq .ans p{
  padding-bottom:20px;
  color:var(--muted) !important;
  font-size:15.5px;
  font-family:"Hanken Grotesk",sans-serif;
}
.faq .chev{
  flex:none;
  width:22px;
  height:22px;
  transition:transform .3s ease;
  color:var(--amber-deep) !important;
}
.faq[open-state="1"] .chev{
  transform:rotate(45deg);
}
.faq button:focus-visible{
  outline:3px solid rgba(233,166,60,.55);
  outline-offset:2px;
}

/* Mobile */
@media (max-width:640px){
  .faq button{
    font-size:16px;
    padding:16px 0;
    gap:14px;
  }
  .faq .ans p{
    font-size:14.5px;
    padding-bottom:16px;
  }
  .faq .chev{
    width:19px;
    height:19px;
  }
}

:root{
  --line: #DDE3E1;
  --text: #123039;
  --muted: #5B6E74;
  --amber-deep: #B87A16;
}



.site-footer .footer-inner .copyright p {
    margin: 0;
    display: none;
}


.elementor-593 .elementor-element.elementor-element-74bbd81a img {
    width: 75% !important;
    filter: brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(400%) hue-rotate(145deg) brightness(90%) contrast(88%);
}








/* =========================================================
   HEATHROW CAR PARKING
   MASTER REUSABLE UI SYSTEM
   =========================================================

   PURPOSE:
   - Reusable components for multiple website sections
   - HTML can change without repeatedly editing CSS
   - Scoped under .hpc-ui to prevent theme/Elementor conflicts

   MAIN COMPONENTS:
   .hpc-filters
   .hpc-chip
   .hpc-card
   .hpc-logo
   .hpc-content
   .hpc-title
   .hpc-badge
   .hpc-rating
   .hpc-meta
   .hpc-tags
   .hpc-price
   .hpc-btn
   .hpc-note

   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

.hpc-ui {

  /* ---------- Brand Colors ---------- */

  --hpc-navy: #0C2530;
  --hpc-navy-light: #123039;

  --hpc-text: #123039;
  --hpc-text-muted: #5B6E74;

  --hpc-border: #DDE3E1;
  --hpc-surface: #FFFFFF;
  --hpc-surface-soft: #F1F4F3;

  --hpc-amber: #E9A63C;
  --hpc-amber-hover: #F2B352;
  --hpc-amber-dark: #3B2606;

  --hpc-green: #2E8B6A;

  /* ---------- Typography ---------- */

  --hpc-font-heading: "Bricolage Grotesque", sans-serif;
  --hpc-font-body: "Hanken Grotesk", sans-serif;
  --hpc-font-number: "Space Mono", monospace;

  /* ---------- Radius ---------- */

  --hpc-radius-sm: 5px;
  --hpc-radius-md: 10px;
  --hpc-radius-lg: 12px;
  --hpc-radius-xl: 14px;
  --hpc-radius-pill: 999px;

  /* ---------- Shadows ---------- */

  --hpc-shadow-card:
    0 18px 50px -24px rgba(12, 37, 48, .45);

  --hpc-shadow-amber:
    0 10px 24px -12px rgba(233, 166, 60, .9);

  /* ---------- Motion ---------- */

  --hpc-transition:
    box-shadow .15s ease,
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;

}


/* =========================================================
   02. BASE RESET
   ========================================================= */

.hpc-ui *,
.hpc-ui *::before,
.hpc-ui *::after {
  box-sizing: border-box;
}

.hpc-ui button,
.hpc-ui input,
.hpc-ui select,
.hpc-ui textarea {
  font: inherit;
}

.hpc-ui a {
  text-decoration: none;
}

.hpc-ui img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   03. FILTER SYSTEM
   ========================================================= */

.hpc-ui .hpc-filters {

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 10px;

  margin-bottom: 20px;
}


/* Filter / Pill */

.hpc-ui .hpc-chip {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;

  padding: 8px 14px;

  border: 1.5px solid var(--hpc-border);
  border-radius: var(--hpc-radius-pill);

  background: #fff;

  color: var(--hpc-text-muted);

  font-family: var(--hpc-font-body);
  font-size: 13.5px;
  font-weight: 600;

  line-height: 1.2;

  cursor: pointer;

  text-decoration: none;
  outline: none;

  box-shadow: none;

  transition: var(--hpc-transition);

  -webkit-tap-highlight-color: transparent;
}


/* Hover */

.hpc-ui .hpc-chip:hover {
  border-color: var(--hpc-navy);
  color: var(--hpc-navy);
}


/* Active */

.hpc-ui .hpc-chip.is-active,
.hpc-ui .hpc-chip.is-active:hover,
.hpc-ui .hpc-chip.is-active:focus {

  background: var(--hpc-navy);

  border-color: var(--hpc-navy);

  color: #fff;

}


/* Sort */

.hpc-ui .hpc-sort {

  margin-left: auto;

  color: var(--hpc-text-muted);

  font-family: var(--hpc-font-body);
  font-size: 13.5px;
  line-height: 1.4;
}

.hpc-ui .hpc-sort strong {
  color: var(--hpc-text);
  font-weight: 700;
}


/* =========================================================
   04. RESULTS / CARD GRID
   ========================================================= */

.hpc-ui .hpc-results {

  display: grid;

  grid-template-columns: 1fr;

  gap: 14px;
}


/* =========================================================
   05. UNIVERSAL CARD
   ========================================================= */

.hpc-ui .hpc-card {

  position: relative;

  display: grid;

  grid-template-columns: 60px minmax(0, 1fr) auto;

  align-items: center;

  gap: 20px;

  width: 100%;

  padding: 20px 22px;

  background: var(--hpc-surface);

  border: 1px solid var(--hpc-border);

  border-radius: var(--hpc-radius-xl);

  transition: var(--hpc-transition);
}


/* Card hover */

.hpc-ui .hpc-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--hpc-shadow-card);
}


/* Featured / Best Card */

.hpc-ui .hpc-card.is-featured {

  border-color: var(--hpc-amber);

  box-shadow:
    0 0 0 1px var(--hpc-amber) inset;
}


/* =========================================================
   06. CARD LOGO / ICON BOX
   ========================================================= */

.hpc-ui .hpc-logo {

  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  background: var(--hpc-surface-soft);

  border-radius: var(--hpc-radius-lg);

  color: var(--hpc-navy);

  font-family: var(--hpc-font-heading);

  font-size: 20px;
  font-weight: 700;

  line-height: 1;
}


/* Optional image inside logo */

.hpc-ui .hpc-logo img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  border-radius: inherit;
}


/* =========================================================
   07. CARD CONTENT
   ========================================================= */

.hpc-ui .hpc-content {

  min-width: 0;
}


/* Main title */

.hpc-ui .hpc-title {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin: 0;

  color: var(--hpc-text);

  font-family: var(--hpc-font-heading);

  font-size: 18px;
  font-weight: 600;

  line-height: 1.25;
}


/* =========================================================
   08. BADGES
   ========================================================= */

.hpc-ui .hpc-badge {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 2px 8px;

  border-radius: var(--hpc-radius-sm);

  background: var(--hpc-amber);

  color: var(--hpc-amber-dark);

  font-family: var(--hpc-font-body);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .05em;

  line-height: 1.4;

  text-transform: uppercase;
}


/* Green badge */

.hpc-ui .hpc-badge.is-green {

  background: var(--hpc-green);

  color: #fff;
}


/* Dark badge */

.hpc-ui .hpc-badge.is-dark {

  background: var(--hpc-navy);

  color: #fff;
}


/* =========================================================
   09. RATING
   ========================================================= */

.hpc-ui .hpc-rating {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 4px 0 8px;

  color: var(--hpc-text-muted);

  font-family: var(--hpc-font-body);

  font-size: 13.5px;

  line-height: 1.4;
}


.hpc-ui .hpc-stars {

  color: var(--hpc-amber);

  font-size: 14px;

  letter-spacing: 1px;

  white-space: nowrap;
}


/* =========================================================
   10. META INFORMATION
   ========================================================= */

.hpc-ui .hpc-meta {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px 16px;

  margin: 2px 0 8px;

  color: #123039;

  font-family: "Hanken Grotesk", system-ui, sans-serif;

  font-size: 13.5px;

  line-height: 1.5;
}


.hpc-ui .hpc-meta-item {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;
}


.hpc-ui .hpc-meta svg {

  width: 14px;
  height: 14px;

  flex-shrink: 0;

  color: #B87A16;
}


/* =========================================================
   11. TAG / SERVICE CHIPS
   ========================================================= */

.hpc-ui .hpc-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.hpc-ui .hpc-tag {

  display: inline-flex;

  align-items: center;

  padding: 3px 9px;

  border: 1px solid rgba(46, 139, 106, .3);

  border-radius: var(--hpc-radius-pill);

  background: rgba(46, 139, 106, .1);

  color: var(--hpc-green);

  font-family: var(--hpc-font-body);

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.4;
}


/* Service tag */

.hpc-ui .hpc-tag.is-service {

  background: var(--hpc-surface-soft);

  border-color: var(--hpc-border);

  color: var(--hpc-navy);
}


/* Amber tag */

.hpc-ui .hpc-tag.is-amber {

  background: rgba(233, 166, 60, .12);

  border-color: rgba(233, 166, 60, .3);

  color: var(--hpc-amber-dark);
}


/* Dark tag */

.hpc-ui .hpc-tag.is-dark {

  background: var(--hpc-navy);

  border-color: var(--hpc-navy);

  color: #fff;
}


/* =========================================================
   12. PRICE BLOCK
   ========================================================= */

.hpc-ui .hpc-price {

  text-align: right;

  min-width: 125px;
}


/* Amount */

.hpc-ui .hpc-amount {

  margin: 0;

  color: var(--hpc-text);

  font-family: var(--hpc-font-number);

  font-size: 26px;
  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;
}


/* Price description */

.hpc-ui .hpc-price-meta {

  margin-bottom: 8px;

  color: #5B6E74;

  font-family: "Hanken Grotesk", system-ui, sans-serif;

  font-size: 13.5px;

  line-height: 1.4;
}


/* =========================================================
   13. UNIVERSAL BUTTON SYSTEM
   ========================================================= */

.hpc-ui .hpc-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 12px 20px;

  border: 1.5px solid transparent;

  border-radius: var(--hpc-radius-md);

  font-family: var(--hpc-font-body);

  font-size: 15px;
  font-weight: 600;

  line-height: 1.2;

  text-align: center;

  text-decoration: none;

  cursor: pointer;

  outline: none;

  box-shadow: none;

  transition: var(--hpc-transition);

  -webkit-tap-highlight-color: transparent;
}


/* Full width button */

.hpc-ui .hpc-btn.is-full {

  width: 100%;
}


/* Primary / Amber */

.hpc-ui .hpc-btn.is-primary {

  background: var(--hpc-amber);

  border-color: var(--hpc-amber);

  color: var(--hpc-amber-dark);
}


.hpc-ui .hpc-btn.is-primary:hover,
.hpc-ui .hpc-btn.is-primary:focus {

  background: var(--hpc-amber-hover);

  border-color: var(--hpc-amber-hover);

  color: var(--hpc-amber-dark);

  transform: translateY(-1px);

  box-shadow: var(--hpc-shadow-amber);
}


/* Ghost */

.hpc-ui .hpc-btn.is-ghost {

  background: transparent;

  border-color: var(--hpc-border);

  color: var(--hpc-navy-light);
}


.hpc-ui .hpc-btn.is-ghost:hover,
.hpc-ui .hpc-btn.is-ghost:focus {

  background: transparent;

  border-color: var(--hpc-navy);

  color: var(--hpc-navy);
}


/* Dark */

.hpc-ui .hpc-btn.is-dark {

  background: var(--hpc-navy);

  border-color: var(--hpc-navy);

  color: #fff;
}


.hpc-ui .hpc-btn.is-dark:hover,
.hpc-ui .hpc-btn.is-dark:focus {

  background: var(--hpc-navy-light);

  border-color: var(--hpc-navy-light);

  color: #fff;
}


/* =========================================================
   14. RESULT NOTE
   ========================================================= */

.hpc-ui .hpc-note {

  margin-top: 24px;

  color: var(--hpc-text-muted);

  font-family: var(--hpc-font-body);

  font-size: 14.5px;

  line-height: 1.6;

  text-align: center;
}


.hpc-ui .hpc-note strong {

  color: var(--hpc-text);

  font-weight: 700;
}


/* =========================================================
   15. SMALL LABEL / EYEBROW
   ========================================================= */

.hpc-ui .hpc-eyebrow {

  display: inline-block;

  margin-bottom: 16px;

  padding: 4px 10px;

  border: 1px solid rgba(233, 166, 60, .35);

  border-radius: 6px;

  background: rgba(233, 166, 60, .14);

  color: #B87A16;

  font-family: var(--hpc-font-body);

  font-size: 12px;
  font-weight: 600;

  letter-spacing: .06em;

  line-height: 1.4;

  text-transform: uppercase;
}


/* =========================================================
   16. OPTIONAL DIVIDER
   ========================================================= */

.hpc-ui .hpc-divider {

  width: 100%;
  height: 1px;

  margin: 20px 0;

  background: var(--hpc-border);
}


/* =========================================================
   17. OPTIONAL TWO-COLUMN CONTENT
   ========================================================= */

.hpc-ui .hpc-grid-2 {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* =========================================================
   18. OPTIONAL THREE-COLUMN CONTENT
   ========================================================= */

.hpc-ui .hpc-grid-3 {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;
}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .hpc-ui .hpc-card {

    grid-template-columns: 56px minmax(0, 1fr) auto;

    gap: 16px;

    padding: 18px;
  }


  .hpc-ui .hpc-logo {

    width: 56px;
    height: 56px;
  }


  .hpc-ui .hpc-amount {

    font-size: 22px;
  }


  .hpc-ui .hpc-grid-3 {

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 640px) {

  /* ---------- Filters ---------- */

  .hpc-ui .hpc-filters {

    gap: 8px;
  }


  .hpc-ui .hpc-sort {

    width: 100%;

    margin-left: 0;

    margin-top: 6px;

    order: 99;
  }


  /* ---------- Card ---------- */

  .hpc-ui .hpc-card {

    grid-template-columns: 1fr;

    gap: 12px;

    padding: 16px;

    text-align: left;
  }


  /* ---------- Logo ---------- */

  .hpc-ui .hpc-logo {

    width: 48px;
    height: 48px;

    font-size: 16px;
  }


  /* ---------- Title ---------- */

  .hpc-ui .hpc-title {

    font-size: 16px;
  }


  /* ---------- Price ---------- */

  .hpc-ui .hpc-price {

    min-width: 0;

    text-align: left;
  }


  .hpc-ui .hpc-amount {

    font-size: 22px;
  }


  /* ---------- Buttons ---------- */

  .hpc-ui .hpc-price .hpc-btn {

    width: auto;
  }


  /* ---------- Grids ---------- */

  .hpc-ui .hpc-grid-2,
  .hpc-ui .hpc-grid-3 {

    grid-template-columns: 1fr;

  }

}


/* =========================================================
   21. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

  .hpc-ui .hpc-chip {

    padding: 7px 11px;

    font-size: 12.5px;
  }


  .hpc-ui .hpc-meta {

    gap: 6px 10px;

    font-size: 12px;
  }


  .hpc-ui .hpc-tags {

    gap: 5px;
  }


  .hpc-ui .hpc-tag {

    font-size: 11px;

    padding: 3px 8px;
  }

}

/* =========================================================
   End Of this Section this is maine section 
   ========================================================= */


.sticky-left {
    position: sticky !important;
    top: 30px !important;
    align-self: flex-start !important;
    height: fit-content !important;
}







/* =========================================================
   TERMINAL LINK CARDS
   ========================================================= */

.hpc-terminal-links {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  width: 100%;

}


.hpc-terminal-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 60px;

  padding: 0 22px;

  background: #FFFFFF;

  border: 1px solid #DDE3E1;

  border-radius: 15px;

  color: var(--hpc-text);

  font-family: var(--hpc-font-body);

  font-size: 14px;

  font-weight: 500;

  line-height: 1.3;

  text-decoration: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease,
    color .15s ease,
    background-color .15s ease;

}


.hpc-terminal-link svg {

  width: 19px;

  height: 19px;

  flex-shrink: 0;

  color: #B87A16;

  transition:
    transform .15s ease,
    color .15s ease;

}


.hpc-terminal-link:hover {

  border-color: #E9A63C;

  color: var(--hpc-navy);

  box-shadow: 0 10px 30px -20px rgba(12, 37, 48, .45);

  transform: translateY(-1px);

}


.hpc-terminal-link:hover svg {

  transform: translateX(3px);

  color: #E9A63C;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .hpc-terminal-links {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .hpc-terminal-links {

    grid-template-columns: 1fr;

    gap: 10px;

  }


  .hpc-terminal-link {

    min-height: 62px;

    padding: 0 18px;

    font-size: 16px;

    border-radius: var(--hpc-radius-lg);

  }


  .hpc-terminal-link svg {

    width: 18px;

    height: 18px;

  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

  .hpc-terminal-link {

    min-height: 58px;

    padding: 0 16px;

    font-size: 15px;

  }

}