/* ===========================
   COMPONENTS CSS - Product Cards, Filter, Price Table, etc.
=========================== */

/* ===== PRODUCT CARD ===== */
.product-card {
   display: block;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   overflow: hidden;
   transition: all .5s
}

.product-card:hover {
   box-shadow: 0 10px 40px var(--shadow);
   transform: translateY(-4px)
}

.product-card__img-wrap {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/3;
   background: linear-gradient(135deg, #f9fafb, #f3f4f6)
}

.product-card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .7s ease-out
}

.product-card:hover .product-card__img {
   transform: scale(1.1)
}

.product-card__hover {
   position: absolute;
   inset: 0;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .3s
}

.product-card:hover .product-card__hover {
   background: rgba(0, 0, 0, .2)
}

.product-card__eye {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .9);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(.75);
   transition: all .3s
}

.product-card:hover .product-card__eye {
   opacity: 1;
   transform: scale(1)
}

.product-card__eye svg {
   color: var(--red)
}

.product-card__badges {
   position: absolute;
   top: 12px;
   left: 12px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.badge {
   font-size: 10px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 8px;
   text-transform: uppercase;
   letter-spacing: .05em
}

.badge--new {
   background: var(--red-dark);
   color: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.badge--hot {
   background: linear-gradient(to right, #f59e0b, #f97316);
   color: #fff;
   box-shadow: 0 4px 12px rgba(245, 158, 11, .3)
}

.badge--sale {
   position: absolute;
   top: 12px;
   right: 12px;
   background: #10b981;
   color: #fff;
   box-shadow: 0 4px 12px rgba(16, 185, 129, .3)
}

.product-card__body {
   padding: 16px
}

.product-card__sub {
   font-size: 11px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: 6px
}

.product-card__name {
   font-size: 15px;
   font-weight: 600;
   transition: color .2s;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 2.5em
}

.product-card:hover .product-card__name {
   color: var(--red)
}

.product-card__price-row {
   margin-top: 12px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding-top: 12px;
   border-top: 1px solid var(--border)
}

.product-card__price {
   color: var(--red-dark);
   font-weight: 800;
   font-size: 16px;
   letter-spacing: -.02em
}

.product-card__price-old {
   color: var(--text-muted);
   text-decoration: line-through;
   font-size: 12px
}

/* ===== PRODUCTS GRID ===== */
.products-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px
}

@media(min-width:768px) {
   .products-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(min-width:1024px) {
   .products-grid--4 {
      grid-template-columns: repeat(4, 1fr)
   }
}

/* ===== FILTER PAGE LAYOUT ===== */
.filter-page {
   padding: 32px 0
}

.filter-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   gap: 12px
}

.filter-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   font-size: 13px;
   font-weight: 600;
   transition: border-color .2s;
   background: #fff
}

.filter-toggle:hover {
   border-color: rgba(220, 20, 60, .3)
}

.filter-toggle__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--red);
   display: none
}

.filter-toggle__dot.show {
   display: block
}

@media(min-width:1024px) {
   .filter-toggle {
      display: none
   }
}

.filter-bar__right {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-left: auto
}

.filter-bar__count {
   font-size: 13px;
   color: var(--text-muted);
   display: none
}

@media(min-width:640px) {
   .filter-bar__count {
      display: inline
   }
}

.filter-bar__sort {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 10px 32px 10px 16px;
   font-size: 13px;
   appearance: none;
   cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center
}

.filter-bar__sort:focus {
   border-color: var(--red)
}

.filter-layout {
   display: flex;
   gap: 32px
}

.filter-content {
   flex: 1;
   min-width: 0
}

/* Sidebar */
.sidebar {
   display: none;
   width: 260px;
   flex-shrink: 0
}

@media(min-width:1024px) {
   .sidebar {
      display: block
   }
}

.sidebar__inner {
   position: sticky;
   top: 120px;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   padding: 20px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .03)
}

.sidebar__header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 20px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--border)
}

.sidebar__header svg {
   color: var(--red)
}

.sidebar__header-text {
   font-size: 14px;
   font-weight: 700
}

.sidebar__section {
   margin-bottom: 24px
}

.sidebar__section-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--text-muted);
   margin-bottom: 12px;
   cursor: pointer;
   padding: 2px 0
}

.sidebar__section-toggle svg {
   transition: transform .2s
}

.sidebar__section-toggle.collapsed svg {
   transform: rotate(0)
}

.sidebar__section-toggle:not(.collapsed) svg {
   transform: rotate(180deg)
}

.sidebar__section-body {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.sidebar__section-body.hidden {
   display: none
}

.sidebar__search {
   position: relative;
   margin-bottom: 24px
}

.sidebar__search svg {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted)
}

.sidebar__search input {
   width: 100%;
   background: rgba(245, 245, 247, .5);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 10px 16px 10px 40px;
   font-size: 13px;
   transition: all .2s
}

.sidebar__search input:focus {
   border-color: var(--red);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-light) 20%, transparent);
}

.filter-btn {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
   border-radius: var(--radius);
   font-size: 13px;
   transition: all .2s;
   cursor: pointer;
   background: none;
   text-align: left
}

.filter-btn:hover {
   background: rgba(245, 245, 247, .7)
}

.filter-btn.active {
   background: var(--red);
   color: #fff;
   font-weight: 600;
   box-shadow: 0 4px 12px rgba(220, 20, 60, .15)
}

.filter-btn.active .filter-btn__count {
   color: rgba(255, 255, 255, .7)
}

.filter-btn__count {
   font-size: 11px;
   color: var(--text-muted)
}

.radio-btn {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border-radius: var(--radius);
   font-size: 13px;
   transition: all .2s;
   cursor: pointer;
   background: none;
   text-align: left
}

.radio-btn:hover {
   background: rgba(245, 245, 247, .7)
}

.radio-btn.active {
   background: var(--red);
   color: #fff;
   font-weight: 600;
   box-shadow: 0 4px 12px rgba(220, 20, 60, .15)
}

.radio-circle {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.radio-btn.active .radio-circle {
   border-color: #fff
}

.radio-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #fff;
   display: none
}

.radio-btn.active .radio-dot {
   display: block
}

.check-btn {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border-radius: var(--radius);
   font-size: 13px;
   transition: all .2s;
   cursor: pointer;
   background: none;
   text-align: left
}

.check-btn:hover {
   background: rgba(245, 245, 247, .7)
}

.check-btn.active {
   background: rgba(220, 20, 60, .1);
   color: var(--red);
   font-weight: 600
}

.check-box {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   border: 2px solid rgba(0, 0, 0, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.check-btn.active .check-box {
   background: var(--red);
   border-color: var(--red)
}

.clear-filters {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
   transition: all .2s;
   background: none;
   cursor: pointer
}

.clear-filters:hover {
   color: var(--red);
   border-color: rgba(220, 20, 60, .2)
}

/* No results */
.no-results {
   text-align: center;
   padding: 80px 0;
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border)
}

.no-results__icon {
   width: 64px;
   height: 64px;
   border-radius: var(--radius-lg);
   background: var(--bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px
}

.no-results__title {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px
}

.no-results__desc {
   font-size: 13px;
   color: var(--text-muted);
   margin-bottom: 16px
}

.no-results__clear {
   font-size: 13px;
   font-weight: 600;
   color: var(--red);
   cursor: pointer;
   background: none;
   border: none
}

.no-results__clear:hover {
   text-decoration: underline
}

/* Mobile filter drawer */
.filter-drawer-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .4);
   z-index: 200
}

.filter-drawer-overlay.open {
   display: block
}

.filter-drawer {
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   width: 320px;
   max-width: 85vw;
   background: #fff;
   z-index: 201;
   overflow-y: auto;
   transform: translateX(-100%);
   transition: transform .3s ease
}

.filter-drawer.open {
   transform: translateX(0)
}

.filter-drawer__inner {
   padding: 20px
}

.filter-drawer__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px
}

.filter-drawer__title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   font-weight: 700
}

.filter-drawer__close {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s;
   cursor: pointer;
   background: none;
   border: none
}

.filter-drawer__close:hover {
   background: var(--bg-secondary)
}

.filter-drawer__submit {
   margin-top: 24px;
   padding-top: 16px;
   border-top: 1px solid var(--border)
}

.filter-drawer__submit button {
   width: 100%;
   padding: 12px;
   border-radius: var(--radius);
   font-weight: 600;
   font-size: 14px
}

@media(min-width:1024px) {

   .filter-drawer-overlay,
   .filter-drawer {
      display: none !important
   }
}

/* ===== PRICE TABLE ===== */
.price-table-wrap {
   overflow-x: auto;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   box-shadow: 0 4px 20px rgba(0, 0, 0, .03)
}

.price-table {
   width: 100%;
   font-size: 14px;
   border-collapse: collapse
}

.price-table thead tr {
   background: linear-gradient(to right, var(--dark), var(--dark2));
   color: #fff
}

.price-table th {
   padding: 16px 20px;
   font-weight: 600;
   font-size: 13px;
   text-align: left
}

.price-table th:last-child {
   text-align: right
}

.price-table th.text-center {
   text-align: center
}

.price-table td {
   padding: 14px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, .03)
}

.price-table tbody tr:nth-child(even) {
   background: rgba(249, 250, 251, .5)
}

.price-table tbody tr:hover {
   background: rgba(220, 20, 60, .02)
}

.price-table td:last-child {
   text-align: right;
   color: var(--red);
   font-weight: 700
}

.price-table td.text-normal {
   text-align: left;
   color: var(--text);
   font-weight: 400
}

.status-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 600;
   color: #059669;
   background: #ecfdf5;
   padding: 4px 10px;
   border-radius: 999px
}

.status-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #10b981;
   display: inline-block
}

.new-badge {
   background: var(--red-dark);
   color: #fff;
   font-size: 9px;
   font-weight: 700;
   padding: 2px 6px;
   border-radius: 4px;
   text-transform: uppercase;
   margin-left: 8px;
   vertical-align: middle
}

.price-table a {
   font-weight: 600;
   transition: color .2s;
   color: var(--text)
}

.price-table a:hover {
   color: var(--red)
}

.price-note {
   font-size: 13px;
   color: var(--text-muted);
   font-style: italic;
   background: rgba(245, 245, 247, .5);
   padding: 16px;
   border-radius: var(--radius);
   border: 1px solid rgba(0, 0, 0, .03);
   margin-top: 32px
}

.price-more {
   text-align: center;
   margin-top: 24px
}

.price-more a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--red);
   font-size: 14px;
   font-weight: 600;
   transition: gap .3s
}

.price-more a:hover {
   gap: 12px
}

/* ===== MODAL POPUP ===== */
.hvh-modal {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.hvh-modal.is-open {
   opacity: 1;
   visibility: visible;
}

.hvh-modal__overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
}

.hvh-modal__content {
   position: relative;
   background: #fff;
   width: 90%;
   max-width: 800px;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   transform: translateY(20px);
   transition: all 0.3s ease;
   max-height: 90vh;
   overflow-y: auto;
}

.hvh-modal.is-open .hvh-modal__content {
   transform: translateY(0);
}

.hvh-modal__close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #f3f4f6;
   color: #374151;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   line-height: 1;
   border: none;
   cursor: pointer;
   z-index: 10;
   transition: all 0.2s;
}

.hvh-modal__close:hover {
   background: var(--red);
   color: #fff;
}

.hvh-modal__grid {
   display: flex;
   flex-direction: column;
}

@media(min-width: 768px) {
   .hvh-modal__grid {
      flex-direction: row;
   }
}

.hvh-modal__img {
   flex: 1;
   background: #f9fafb;
}

.hvh-modal__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   min-height: 200px;
}

.hvh-modal__form {
   flex: 1;
   padding: 40px 32px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.hvh-modal__form-inner {
   width: 100%;
}

.hvh-modal__form-inner .fluentform {
   margin: 0;
}

/* ========================================================
   GLOBAL FLUENT FORM OVERRIDES (Popup & Contact Page)
======================================================== */
.hvh-fluent-form-styled .fluentform {
   margin: 0 !important;
}

.hvh-fluent-form-styled .ff-el-group {
   margin-bottom: 16px !important;
}

.hvh-fluent-form-styled .ff-el-form-control {
   width: 100% !important;
   background: rgba(245, 245, 247, 0.5) !important;
   border: 1.5px solid var(--border) !important;
   border-radius: var(--radius) !important;
   padding: 12px 16px !important;
   font-size: 14px !important;
   font-family: inherit !important;
   transition: all 0.2s !important;
   color: var(--text) !important;
   box-shadow: none !important;
   outline: none !important;
   height: auto !important;
   min-height: 48px !important;
   line-height: 1.5 !important;
}

.hvh-fluent-form-styled textarea.ff-el-form-control {
   resize: vertical !important;
}

.hvh-fluent-form-styled select.ff-el-form-control {
   appearance: none !important;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
   background-repeat: no-repeat !important;
   background-position: right 14px center !important;
   padding-right: 36px !important;
   color: #6b7280 !important;
   /* Lighter color to match placeholders */
}

.hvh-fluent-form-styled select.ff-el-form-control option {
   color: var(--text) !important;
}

.hvh-fluent-form-styled .ff-el-form-control::placeholder {
   color: #9ca3af !important;
   opacity: 1 !important;
}

.hvh-fluent-form-styled .ff-el-form-control:focus {
   border-color: var(--red) !important;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-light) 20%, transparent) !important;
   background: #fff !important;
}

.hvh-fluent-form-styled .ff-el-input--label {
   display: block !important;
   font-size: 13px !important;
   font-weight: 600 !important;
   font-family: inherit !important;
   margin-bottom: 6px !important;
   color: var(--text) !important;
}

.hvh-fluent-form-styled .ff-el-is-required {
   color: var(--red) !important;
}

.hvh-fluent-form-styled .ff-btn-submit {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
   background: var(--red) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--radius) !important;
   padding: 16px 32px !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   font-family: inherit !important;
   cursor: pointer !important;
   transition: all 0.3s !important;
   gap: 8px !important;
}

.hvh-fluent-form-styled .ff-btn-submit::before {
   content: "";
   display: inline-block;
   width: 20px;
   height: 20px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.hvh-fluent-form-styled .ff-btn-submit:hover {
   background: var(--red-dark) !important;
   box-shadow: 0 4px 12px rgba(220, 20, 60, 0.2) !important;
}

/* Fix row columns */
.hvh-fluent-form-styled .ff-t-container {
   margin-bottom: 16px !important;
   margin-left: -8px !important;
   margin-right: -8px !important;
}

.hvh-fluent-form-styled .ff-t-cell {
   padding-left: 8px !important;
   padding-right: 8px !important;
}

.hvh-fluent-form-styled .ff-t-cell .ff-el-group {
   margin-bottom: 0 !important;
}

/* Fluent Form Message Overrides */
.hvh-fluent-form-styled .ff-message-success {
   display: block !important;
   width: 100% !important;
   background: rgba(16, 185, 129, 0.1) !important;
   color: #10b981 !important;
   border: 1px solid rgba(16, 185, 129, 0.2) !important;
   border-radius: var(--radius) !important;
   padding: 16px !important;
   font-size: 15px !important;
   text-align: center !important;
   margin: 0 !important;
   font-weight: 500 !important;
}

.hvh-fluent-form-styled .ff-message-success * {
   background: transparent !important;
   color: inherit !important;
}

.hvh-fluent-form-styled .ff-errors-in-stack {
   color: var(--red) !important;
   font-size: 13px !important;
}

/* ========================================================
   INSTALLMENT ESTIMATION PAGE
======================================================== */
.installment-page {
   padding: 60px 0 80px;
}

.installment-page__title {
   text-align: center;
   font-size: 24px;
   font-weight: 800;
   margin-bottom: 40px;
   text-transform: uppercase;
}

.installment-form-wrap {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
   margin-bottom: 40px;
}

.installment-form__heading {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 8px;
   text-transform: uppercase;
}

.installment-form__desc {
   color: var(--text-muted);
   font-size: 14px;
   margin-bottom: 32px;
   line-height: 1.6;
}

/* Form fields */
.installment-form .form-label {
   display: block;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 8px;
   color: var(--text);
}

.installment-form .form-input,
.installment-form .form-select {
   width: 100%;
   background: #f9fafb;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 12px 16px;
   font-size: 14px;
   font-family: inherit;
   transition: all 0.2s;
   color: var(--text);
   outline: none;
   min-height: 48px;
}

.installment-form .form-select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   padding-right: 36px;
}

.installment-form .form-input:focus,
.installment-form .form-select:focus {
   border-color: var(--red);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-light) 20%, transparent);
   background: #fff;
}

.installment-form .form-input:disabled,
.installment-form .form-select:disabled {
   background: #f3f4f6;
   cursor: not-allowed;
   opacity: 0.7;
}

.text-red {
   color: var(--red) !important;
}

.installment-form .form-row--2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin-bottom: 24px;
}

@media(max-width: 768px) {
   .installment-form .form-row--2 {
      grid-template-columns: 1fr;
      gap: 16px;
   }
}

.installment-form .align-end {
   align-items: flex-end;
}

.mt-2 {
   margin-top: 8px !important;
}

.radio-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
}

.radio-label input {
   display: none;
}

.radio-custom {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
}

.radio-custom::after {
   content: '';
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--red);
   opacity: 0;
   transform: scale(0.5);
   transition: all 0.2s;
}

.radio-label input:checked~.radio-custom {
   border-color: var(--red);
}

.radio-label input:checked~.radio-custom::after {
   opacity: 1;
   transform: scale(1);
}

.installment-form__submit {
   text-align: center;
   margin-top: 32px;
   padding-top: 32px;
   border-top: 1px solid var(--border);
}

.installment-results {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
   margin-bottom: 40px;
}

.installment-results.hidden {
   display: none;
}

.installment-results__heading {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 32px;
}

.red-bar {
   width: 4px;
   height: 24px;
   background: var(--red);
   border-radius: 2px;
}

.installment-results__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px;
   margin-bottom: 40px;
}

@media(min-width: 768px) {
   .installment-results__grid {
      grid-template-columns: 1fr 1.5fr;
      align-items: center;
   }
}

.installment-results__img {
   text-align: center;
}

.installment-results__img img {
   max-width: 100%;
   height: auto;
   margin-bottom: 16px;
}

.installment-results__data {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.res-row {
   display: flex;
   justify-content: space-between;
   font-size: 15px;
   padding-bottom: 8px;
   border-bottom: 1px dashed var(--border);
}

.res-row:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.res-label {
   color: var(--text-muted);
}

.res-val {
   font-weight: 600;
   text-align: right;
}

.installment-results__action {
   text-align: center;
   margin-bottom: 32px;
}

.installment-table-wrap {
   overflow-x: auto;
}

.installment-table-wrap.hidden {
   display: none;
}

.installment-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
}

.installment-table th,
.installment-table td {
   padding: 16px;
   text-align: right;
   border-bottom: 1px solid var(--border);
}

.installment-table th:first-child,
.installment-table td:first-child {
   text-align: center;
}

.installment-table th {
   font-weight: 700;
   background: #f9fafb;
}

.installment-table tfoot td {
   font-weight: 700;
   background: #f9fafb;
}

/* Adjust button colors for toggle */
.btn--red {
   background: var(--red) !important;
   color: #fff !important;
   padding: 12px 28px !important;
}

.btn--red:hover {
   background: var(--red-dark) !important;
}

@media(max-width: 768px) {

   .installment-form-wrap,
   .installment-results {
      padding: 20px;
   }

   .installment-page {
      padding: 40px 0;
   }

   .res-row {
      flex-direction: column;
      text-align: left;
      gap: 4px;
   }

   .res-val {
      text-align: left;
   }
}

/* ========================================================
   COMPARE PAGE
======================================================== */
.compare-page {
   padding: 60px 0 80px;
}

.compare-page__title {
   text-align: center;
   font-weight: 700;
   font-size: 24px;
   text-transform: uppercase;
   margin-bottom: 40px;
}

.compare-header-box {
   margin-bottom: 32px;
}

.compare-page__subtitle {
   font-size: 24px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 12px;
}

@media(min-width: 768px) {
   .compare-page__subtitle {
      font-size: 32px;
   }
}

.compare-page__subtitle::before {
   content: '';
   display: inline-block;
   width: 4px;
   height: 0.9em;
   background: var(--red-dark);
   border-radius: 2px;
}

.compare-page__desc {
   color: #6b7280;
   margin-top: 4px;
   padding-left: 16px;
   font-size: 14px;
}

.compare-slots {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 24px;
   margin-bottom: 32px;
}

@media (min-width: 768px) {
   .compare-slots {
      grid-template-columns: repeat(3, 1fr);
   }
}

.compare-action {
   text-align: center;
   margin-bottom: 48px;
}

.compare-btn {
   padding: 12px 40px;
   border-radius: 99px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.compare-results__heading {
   font-size: 20px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px;
   text-transform: uppercase;
}

@media(min-width: 768px) {
   .compare-results__heading {
      font-size: 32px;
   }
}

.compare-results__heading::before {
   content: '';
   display: inline-block;
   width: 4px;
   height: 0.9em;
   background: var(--red-dark);
   border-radius: 2px;
}

.compare-modal__title {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 24px;
}

.compare-modal__select {
   width: 100%;
   padding: 12px;
   border: 1px solid #d1d5db;
   border-radius: var(--radius);
   background: #f9fafb;
}

.compare-modal__action {
   text-align: center;
}

.compare-modal__btn {
   padding: 12px 40px;
   border-radius: 99px;
}

.compare-slot__change {
   margin-top: 16px;
   color: #000;
   border: 1px solid #d1d5db;
}

.compare-slot__change:hover {
   background: #f3f4f6;
}

.compare-slot {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   height: 250px;
   position: relative;
   border: 1px dashed #d1d5db;
}

.compare-slot__empty {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background: #fff;
   transition: all 0.2s;
}

.compare-slot__empty:hover {
   border-color: var(--red);
   background: #fef2f2;
}

.compare-slot__add {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 500;
   color: #4b5563;
}

.compare-slot__add svg {
   color: #111;
}

.compare-slot__filled {
   width: 100%;
   height: 100%;
   background: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
   position: relative;
}

.compare-slot__img {
   max-height: 120px;
   object-fit: contain;
   margin-bottom: 16px;
}

.compare-slot__name {
   font-weight: 700;
   font-size: 16px;
   text-align: center;
}

.compare-slot__remove {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.1);
   color: #333;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   cursor: pointer;
   transition: all 0.2s;
   border: none;
}

.compare-slot__remove:hover {
   background: var(--red);
   color: #fff;
}

.compare-table-wrap {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1px solid #e5e7eb;
   overflow-x: auto;
}

.compare-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 800px;
}

.compare-table th,
.compare-table td {
   padding: 16px 20px;
   border-bottom: 1px solid #e5e7eb;
   border-right: 1px solid #e5e7eb;
   vertical-align: top;
   font-size: 14px;
}

.compare-table th:last-child,
.compare-table td:last-child {
   border-right: none;
}

.compare-table th {
   background: #f9fafb;
   font-weight: 700;
   text-align: left;
}

.compare-table td {
   line-height: 1.6;
}

.compare-table tbody tr:last-child td {
   border-bottom: none;
}

/* Modal */
.compare-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
}

.compare-modal.hidden {
   display: none;
}

.compare-modal__overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
}

.compare-modal__content {
   position: relative;
   background: #fff;
   width: 90%;
   max-width: 500px;
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.compare-modal__close {
   position: absolute;
   top: -15px;
   right: -15px;
   background: var(--red);
   color: #fff;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   cursor: pointer;
   border: none;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#btnCompare:disabled {
   background: #fca5a5 !important;
   cursor: not-allowed;
   box-shadow: none;
   opacity: 0.8;
}