/* ==========================================================================
   Skarmio — Inner Pages Stylesheet
   Extends assets/css/index.css. Reuses the same CSS variables/tokens:
   --primary-color / --secondary-color / --button-color / --hero-banner-color
   --cards-bg-color / --paragraph-color / --border-color / --star-color
   ========================================================================== */

/* ---------- Page header / breadcrumb ---------- */
.page-header-section{
   background-color: var(--hero-banner-color);
   padding: 28px 0 20px 0;
}

.breadcrumb-list{
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   padding: 0;
   margin: 0 0 6px 0;
}

.breadcrumb-list li{
   font-size: 13px;
   font-weight: 500;
   color: var(--paragraph-color);
}

.breadcrumb-list li a{
   color: var(--paragraph-color);
   text-decoration: none;
}

.breadcrumb-list li a:hover{
   color: var(--button-color);
}

.breadcrumb-list li:not(:last-child)::after{
   content: "/";
   margin: 0 8px;
   color: var(--paragraph-color);
   opacity: .5;
}

.breadcrumb-list li:last-child{
   color: var(--secondary-color);
}

.page-title-01{
   color: var(--secondary-color);
   font-size: 26px;
   font-weight: 600;
}

.page-subtitle-01{
   color: var(--paragraph-color);
   font-size: 15px;
   font-weight: 500;
   margin-top: 4px;
}

/* ---------- Shop / listing page ---------- */
.filter-card{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 18px;
}

.filter-card-title{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border-color);
}

.filter-group{
   margin-bottom: 18px;
}

.filter-group-label{
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .4px;
   text-transform: uppercase;
   color: var(--paragraph-color);
   margin-bottom: 10px;
}

.filter-check{
   display: flex;
   align-items: center;
   margin-bottom: 9px;
}

.filter-check input[type="checkbox"]{
   width: 16px;
   height: 16px;
   margin-right: 9px;
   accent-color: var(--button-color);
   flex-shrink: 0;
}

.filter-check label{
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
   cursor: pointer;
}

.filter-check .filter-count{
   color: var(--paragraph-color);
   font-size: 13px;
   margin-left: auto;
}

.filter-clear-btn{
   background: transparent;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   color: var(--secondary-color);
   font-size: 13px;
   font-weight: 600;
   width: 100%;
   height: 38px;
}

.shop-toolbar{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 12px 16px;
}

.result-count-text{
   font-size: 14px;
   font-weight: 500;
   color: var(--paragraph-color);
}

.sort-select{
   border: 1px solid var(--border-color);
   font-weight: 500;
   font-size: 14px;
   height: 38px;
   border-radius: 8px;
   min-width: 200px;
}

.mobile-filter-btn{
   background-color: var(--primary-color);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 38px;
   font-weight: 600;
   font-size: 14px;
   color: var(--secondary-color);
}

.pagination-list{
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 8px;
   padding: 0;
   margin: 30px 0 0 0;
}

.pagination-list a{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   color: var(--secondary-color);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
}

.pagination-list a.active{
   background-color: var(--button-color);
   border-color: var(--button-color);
   color: var(--primary-color);
}

.pagination-list a:hover:not(.active){
   border-color: var(--button-color);
   color: var(--button-color);
}

/* ---------- Product detail page ---------- */
.gallery-main{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   overflow: hidden;
}

.gallery-main img{
   width: 100%;
   display: block;
}

.thumbnail-row{
   display: flex;
   gap: 10px;
   margin-top: 12px;
}

.thumbnail-item{
   width: 70px;
   height: 70px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   background-color: var(--cards-bg-color);
   overflow: hidden;
   cursor: pointer;
   flex-shrink: 0;
}

.thumbnail-item.active{
   border: 2px solid var(--button-color);
}

.thumbnail-item img{
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.stock-badge{
   display: inline-flex;
   align-items: center;
   background-color: #EAF7EE;
   color: #1E8A3B;
   font-size: 13px;
   font-weight: 600;
   border-radius: 30px;
   padding: 5px 12px;
}

.product-detail-title{
   color: var(--secondary-color);
   font-size: 26px;
   font-weight: 600;
   line-height: 34px;
   margin-top: 10px;
}

.product-detail-price{
   color: var(--secondary-color);
   font-size: 28px;
   font-weight: 700;
}

.product-detail-price .old-price{
   color: var(--paragraph-color);
   font-size: 17px;
   font-weight: 500;
   text-decoration: line-through;
   margin-left: 10px;
}

.option-group{
   margin: 18px 0;
}

.option-group-label{
   font-size: 14px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 10px;
}

.variant-pill{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 70px;
   height: 40px;
   padding: 0 14px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   background-color: var(--primary-color);
   color: var(--secondary-color);
   font-size: 14px;
   font-weight: 500;
   margin-right: 10px;
   margin-bottom: 10px;
   cursor: pointer;
}

.variant-pill.active{
   border-color: var(--button-color);
   background-color: var(--button-color);
   color: var(--primary-color);
}

.qty-stepper{
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   width: 130px;
   height: 44px;
   overflow: hidden;
}

.qty-stepper button{
   width: 40px;
   height: 100%;
   border: 0;
   background: var(--cards-bg-color);
   color: var(--secondary-color);
   font-size: 16px;
   font-weight: 600;
}

.qty-stepper input{
   flex: 1;
   border: 0;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
   width: 40px;
}

.qty-stepper input:focus{
   outline: none;
}

.add-to-cart-btn{
   background-color: var(--button-color);
   border: 0;
   height: 48px;
   border-radius: 10px;
   color: var(--primary-color);
   font-weight: 600;
   font-size: 15px;
}

.buy-now-btn{
   background-color: var(--primary-color);
   border: 1px solid var(--secondary-color);
   height: 48px;
   border-radius: 10px;
   color: var(--secondary-color);
   font-weight: 600;
   font-size: 15px;
}

.wishlist-icon-btn{
   width: 48px;
   height: 48px;
   border-radius: 10px;
   border: 1px solid var(--border-color);
   background: var(--primary-color);
   color: var(--secondary-color);
   flex-shrink: 0;
}

.delivery-info-box{
   background-color: var(--hero-banner-color);
   border-radius: 10px;
   padding: 14px 16px;
   margin-top: 20px;
}

.delivery-info-row{
   display: flex;
   align-items: flex-start;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
   margin-bottom: 8px;
}

.delivery-info-row:last-child{ margin-bottom: 0; }

.delivery-info-row i{
   color: var(--button-color);
   margin-right: 10px;
   margin-top: 3px;
}

.product-tabs{
   border-bottom: 1px solid var(--border-color);
   display: flex;
   gap: 10px;
   margin-top: 40px;
}

.product-tab-btn{
   background: transparent;
   border: 0;
   padding: 12px 6px;
   font-size: 15px;
   font-weight: 600;
   color: var(--paragraph-color);
   border-bottom: 2px solid transparent;
   margin-right: 20px;
}

.product-tab-btn.active{
   color: var(--secondary-color);
   border-bottom-color: var(--button-color);
}

.product-tab-panel{
   padding-top: 22px;
   color: var(--paragraph-color);
   font-size: 15px;
   line-height: 27px;
   font-weight: 500;
}

.product-tab-panel.d-none{ display: none; }

.review-summary-box{
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
}

.review-score{
   font-size: 44px;
   font-weight: 700;
   color: var(--secondary-color);
}

.review-bar-row{
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--paragraph-color);
   margin-bottom: 4px;
}

.review-bar-track{
   flex: 1;
   height: 6px;
   border-radius: 6px;
   background: var(--border-color);
   overflow: hidden;
}

.review-bar-fill{
   height: 100%;
   background: var(--star-color);
}

/* ---------- Cart page ---------- */
.cart-table-wrap{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   overflow: hidden;
}

.cart-table-header{
   display: flex;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-color);
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .4px;
   color: var(--paragraph-color);
}

.cart-row{
   display: flex;
   align-items: center;
   padding: 18px 20px;
   border-bottom: 1px solid var(--border-color);
   flex-wrap: wrap;
}

.cart-row:last-child{ border-bottom: 0; }

.cart-col-product{ flex: 1 1 320px; display: flex; align-items: center; }
.cart-col-qty{ width: 140px; }
.cart-col-price{ width: 110px; text-align: right; }
.cart-col-total{ width: 110px; text-align: right; }
.cart-col-remove{ width: 44px; text-align: right; }

.cart-item-image{
   width: 70px;
   height: 70px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   margin-right: 14px;
   object-fit: contain;
   background: var(--primary-color);
   flex-shrink: 0;
}

.cart-item-name{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
}

.cart-item-variant{
   font-size: 13px;
   color: var(--paragraph-color);
   margin-top: 2px;
}

.cart-remove-btn{
   background: transparent;
   border: 0;
   color: var(--paragraph-color);
   font-size: 16px;
}

.cart-remove-btn:hover{ color: #d94848; }

.summary-box{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 22px;
}

.summary-title{
   font-size: 17px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 16px;
}

.summary-row{
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   font-weight: 500;
   color: var(--paragraph-color);
   margin-bottom: 12px;
}

.summary-row span:last-child{
   color: var(--secondary-color);
   font-weight: 600;
}

.summary-divider{
   background-color: var(--border-color);
   height: 1px;
   width: 100%;
   margin: 14px 0;
}

.summary-total-row{
   display: flex;
   justify-content: space-between;
   font-size: 18px;
   font-weight: 700;
   color: var(--secondary-color);
   margin-bottom: 18px;
}

.promo-input-group{
   display: flex;
   gap: 8px;
   margin-bottom: 18px;
}

.promo-input{
   flex: 1;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 42px;
   padding: 0 12px;
   font-size: 14px;
}

.promo-apply-btn{
   background: var(--primary-color);
   border: 1px solid var(--secondary-color);
   border-radius: 8px;
   height: 42px;
   padding: 0 16px;
   font-size: 13px;
   font-weight: 600;
   color: var(--secondary-color);
}

.trust-row{
   display: flex;
   align-items: center;
   font-size: 13px;
   color: var(--paragraph-color);
   margin-top: 14px;
}

.trust-row i{
   color: var(--button-color);
   margin-right: 8px;
}

.empty-state-box{
   text-align: center;
   padding: 60px 20px;
}

.empty-state-icon{
   font-size: 46px;
   color: var(--border-color);
   margin-bottom: 16px;
}

/* ---------- Checkout page ---------- */
.checkout-stepper{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 34px;
}

.checkout-step{
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   color: var(--paragraph-color);
}

.checkout-step-circle{
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background-color: var(--border-color);
   color: var(--secondary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
   margin-right: 10px;
   flex-shrink: 0;
}

.checkout-step.completed .checkout-step-circle{
   background-color: var(--button-color);
   color: var(--primary-color);
}

.checkout-step.completed .checkout-step-circle::after{
   content: "\2713";
}

.checkout-step.completed .checkout-step-circle span{ display: none; }

.checkout-step.active .checkout-step-circle{
   background-color: var(--button-color);
   color: var(--primary-color);
}

.checkout-step.active{
   color: var(--secondary-color);
}

.checkout-step-connector{
   width: 60px;
   height: 2px;
   background-color: var(--border-color);
   margin: 0 14px;
}

.checkout-step-connector.completed{
   background-color: var(--button-color);
}

.checkout-panel{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 24px;
   margin-bottom: 20px;
}

.checkout-panel-title{
   font-size: 17px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 18px;
   display: flex;
   align-items: center;
}

.checkout-panel-title .label-container{ margin-bottom: 0; }

.form-label-01{
   font-size: 13px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 6px;
   display: block;
}

.form-input-01{
   border: 1px solid var(--border-color);
   border-radius: 8px;
   height: 44px;
   width: 100%;
   padding: 0 14px;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
}

.form-input-01:focus, .form-select-01:focus{
   outline: none;
   border-color: var(--button-color);
   box-shadow: 0 0 0 3px rgba(9,58,116,0.08);
}

textarea.form-input-01{
   height: auto;
   padding: 12px 14px;
   resize: vertical;
}

.shipping-option, .payment-option{
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 14px 16px;
   margin-bottom: 12px;
   cursor: pointer;
}

.shipping-option.selected, .payment-option.selected{
   border-color: var(--button-color);
   background-color: var(--hero-banner-color);
}

.shipping-option input, .payment-option input{
   width: 18px;
   height: 18px;
   margin-right: 14px;
   accent-color: var(--button-color);
   flex-shrink: 0;
}

.shipping-option-name, .payment-option-name{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
}

.shipping-option-desc, .payment-option-desc{
   font-size: 13px;
   color: var(--paragraph-color);
   font-weight: 500;
}

.shipping-option-price{
   margin-left: auto;
   font-size: 15px;
   font-weight: 700;
   color: var(--secondary-color);
}

.payment-option img{
   height: 22px;
   margin-left: auto;
}

.checkout-nav-row{
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
}

.checkout-back-btn{
   background: var(--primary-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   height: 46px;
   padding: 0 22px;
   font-weight: 600;
   font-size: 14px;
   color: var(--secondary-color);
}

.checkout-next-btn{
   background: var(--button-color);
   border: 0;
   border-radius: 10px;
   height: 46px;
   padding: 0 28px;
   font-weight: 600;
   font-size: 14px;
   color: var(--primary-color);
}

.mini-cart-item{
   display: flex;
   align-items: center;
   margin-bottom: 14px;
}

.mini-cart-item img{
   width: 52px;
   height: 52px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   margin-right: 12px;
   object-fit: contain;
   background: var(--primary-color);
}

.mini-cart-item-name{
   font-size: 13.5px;
   font-weight: 600;
   color: var(--secondary-color);
   line-height: 18px;
}

.mini-cart-item-qty{
   font-size: 12px;
   color: var(--paragraph-color);
}

.mini-cart-item-price{
   margin-left: auto;
   font-size: 14px;
   font-weight: 600;
   color: var(--secondary-color);
}

.secure-note{
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: var(--paragraph-color);
   margin-top: 16px;
}

.secure-note i{
   color: #1E8A3B;
   margin-right: 8px;
}

/* ---------- Order confirmation ---------- */
.confirmation-box{
   text-align: center;
   padding: 40px 20px 20px 20px;
}

.confirmation-icon{
   width: 78px;
   height: 78px;
   border-radius: 50%;
   background-color: #EAF7EE;
   color: #1E8A3B;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   margin: 0 auto 20px auto;
}

.order-number-chip{
   display: inline-block;
   background-color: var(--hero-banner-color);
   border-radius: 30px;
   padding: 8px 18px;
   font-size: 14px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-top: 8px;
}

.order-detail-card{
   background-color: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 10px;
   padding: 22px;
}

.order-detail-heading{
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border-color);
}

.timeline-track{
   display: flex;
   justify-content: space-between;
   position: relative;
   margin: 30px 0 10px 0;
}

.timeline-track::before{
   content: "";
   position: absolute;
   top: 15px;
   left: 5%;
   right: 5%;
   height: 2px;
   background: var(--border-color);
   z-index: 0;
}

.timeline-point{
   position: relative;
   z-index: 1;
   text-align: center;
   flex: 1;
}

.timeline-dot{
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--button-color);
   color: var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 8px auto;
   font-size: 13px;
}

.timeline-point.pending .timeline-dot{
   background: var(--border-color);
   color: var(--paragraph-color);
}

.timeline-label{
   font-size: 12px;
   font-weight: 600;
   color: var(--secondary-color);
}

/* ---------- Auth pages (login / register) ---------- */
.auth-section{
   background-color: var(--hero-banner-color);
   padding: 60px 0;
}

.auth-card{
   background-color: var(--primary-color);
   border: 1px solid var(--border-color);
   border-radius: 14px;
   padding: 36px;
   max-width: 460px;
   margin: 0 auto;
   box-shadow: 0 3px 14px rgba(0,0,0,0.05);
}

.auth-logo{
   display: block;
   width: 130px;
   margin: 0 auto 22px auto;
}

.auth-title{
   text-align: center;
   font-size: 22px;
   font-weight: 600;
   color: var(--secondary-color);
}

.auth-subtitle{
   text-align: center;
   font-size: 14px;
   font-weight: 500;
   color: var(--paragraph-color);
   margin-bottom: 26px;
}

.auth-input-group{
   position: relative;
   margin-bottom: 16px;
}

.auth-input-group i{
   position: absolute;
   left: 14px;
   top: 15px;
   color: var(--paragraph-color);
   font-size: 14px;
}

.auth-input-group input{
   padding-left: 40px;
}

.auth-toggle-password{
   position: absolute;
   right: 14px;
   top: 15px;
   color: var(--paragraph-color);
   font-size: 14px;
   cursor: pointer;
   background: none;
   border: 0;
}

.auth-row-between{
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13.5px;
   margin-bottom: 20px;
}

.auth-row-between a{
   color: var(--button-color);
   text-decoration: none;
   font-weight: 600;
}

.auth-checkbox-row{
   display: flex;
   align-items: flex-start;
   font-size: 13px;
   color: var(--paragraph-color);
   margin-bottom: 18px;
}

.auth-checkbox-row input{
   margin-right: 10px;
   margin-top: 3px;
   accent-color: var(--button-color);
}

.auth-checkbox-row a{
   color: var(--button-color);
   text-decoration: none;
   font-weight: 600;
}

.auth-submit-btn{
   background-color: var(--button-color);
   border: 0;
   width: 100%;
   height: 46px;
   border-radius: 10px;
   color: var(--primary-color);
   font-weight: 600;
   font-size: 15px;
}

.auth-divider{
   display: flex;
   align-items: center;
   text-align: center;
   font-size: 12.5px;
   color: var(--paragraph-color);
   margin: 22px 0;
}

.auth-divider::before, .auth-divider::after{
   content: "";
   flex: 1;
   height: 1px;
   background-color: var(--border-color);
}

.auth-divider span{ padding: 0 12px; }

.social-auth-btn{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 44px;
   border-radius: 10px;
   border: 1px solid var(--border-color);
   background-color: var(--primary-color);
   color: var(--secondary-color);
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 10px;
}

.social-auth-btn i{ margin-right: 10px; }

.auth-footer-text{
   text-align: center;
   font-size: 14px;
   color: var(--paragraph-color);
   margin-top: 22px;
}

.auth-footer-text a{
   color: var(--button-color);
   font-weight: 600;
   text-decoration: none;
}

.password-strength-track{
   display: flex;
   gap: 5px;
   margin-top: 8px;
   margin-bottom: 16px;
}

.password-strength-track span{
   height: 4px;
   flex: 1;
   border-radius: 4px;
   background-color: var(--border-color);
}

/* ---------- Shared small helpers ---------- */
.section-pad{ padding: 40px 0; }

@media (max-width: 992px){
   .checkout-step-connector{ width: 26px; margin: 0 6px; }
   .checkout-step span.step-text{ display: none; }
   .cart-col-price{ display: none; }
   .review-score{ font-size: 34px; }
   .auth-card{ padding: 26px; }
   .page-title-01{ font-size: 21px; }
}

/* ==========================================================================
   Custom Case Designer
   ========================================================================== */
.designer-promo-section{
   background: linear-gradient(120deg, var(--secondary-color) 0%, #12183a 100%);
   border-radius: 18px;
   overflow: hidden;
   position: relative;
}

.designer-promo-inner{
   padding: 46px 40px;
   position: relative;
   z-index: 2;
}

.designer-promo-eyebrow{
   display: inline-flex;
   align-items: center;
   background: rgba(255,255,255,0.1);
   color: #fff;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .5px;
   padding: 6px 14px;
   border-radius: 30px;
   margin-bottom: 16px;
}

.designer-promo-eyebrow i{ margin-right: 8px; color: var(--star-color); }

.designer-promo-title{
   color: #fff;
   font-size: 30px;
   font-weight: 700;
   line-height: 40px;
}

.designer-promo-text{
   color: #c7cbe0;
   font-size: 15.5px;
   font-weight: 500;
   line-height: 26px;
   margin: 14px 0 22px 0;
   max-width: 460px;
}

.designer-promo-btn{
   background-color: var(--primary-color);
   color: var(--secondary-color);
   border: 0;
   height: 48px;
   padding: 0 28px;
   border-radius: 10px;
   font-weight: 600;
   font-size: 15px;
   display: inline-flex;
   align-items: center;
   text-decoration: none;
}

.designer-promo-btn i{ margin-left: 10px; }

.designer-promo-features{
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 26px;
}

.designer-promo-feature{
   display: flex;
   align-items: center;
   color: #e4e6f2;
   font-size: 13.5px;
   font-weight: 500;
}

.designer-promo-feature i{
   color: var(--star-color);
   margin-right: 8px;
}

.designer-promo-image-wrap{
   position: relative;
   height: 100%;
   min-height: 320px;
}

.designer-promo-image-wrap img{
   position: absolute;
   width: 260px;
   border-radius: 20px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.35);
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) rotate(-4deg);
}

/* ---------- Designer page ---------- */
.designer-hero{
   background-color: var(--hero-banner-color);
   padding: 34px 0;
}

.designer-steps-row{
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 20px;
}

.designer-step-chip{
   display: flex;
   align-items: center;
   background: var(--primary-color);
   border: 1px solid var(--border-color);
   border-radius: 30px;
   padding: 8px 16px 8px 8px;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--secondary-color);
}

.designer-step-chip .step-num{
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--button-color);
   color: #fff;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 8px;
}

.designer-step-chip.done .step-num{
   background: #1E8A3B;
}

/* Case mockup / live preview */
.designer-preview-col{
   position: sticky;
   top: 20px;
}

.case-mockup-stage{
   background: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 14px;
   padding: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 460px;
}

.case-mockup{
   position: relative;
   width: 230px;
   aspect-ratio: 230 / 470;
   border-radius: 42px;
   background-color: #e9ebf1;
   background-size: cover;
   background-position: center;
   box-shadow:
      0 25px 45px rgba(9,13,32,0.22),
      inset 0 0 0 2px rgba(255,255,255,0.35);
   overflow: hidden;
   border: 6px solid #14172a;
}

.case-mockup-empty-label{
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 20px;
   color: #9298b5;
}

.case-mockup-empty-label i{
   font-size: 30px;
   margin-bottom: 10px;
}

.case-mockup-empty-label p{
   font-size: 13px;
   font-weight: 600;
   margin: 0;
}

.case-camera-module{
   position: absolute;
   top: 18px;
   left: 18px;
   width: 88px;
   height: 88px;
   background: rgba(10,13,32,0.82);
   border-radius: 20px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   padding: 10px;
}

.case-camera-lens{
   background: radial-gradient(circle at 35% 35%, #4a5170, #14172a 70%);
   border-radius: 50%;
   box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}

.case-brand-notch{
   position: absolute;
   bottom: 26px;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 30px;
   opacity: .18;
}

.upload-dropzone{
   border: 2px dashed var(--border-color);
   border-radius: 12px;
   background: var(--primary-color);
   text-align: center;
   padding: 26px 16px;
   margin-top: 18px;
   cursor: pointer;
   transition: border-color .2s ease, background-color .2s ease;
}

.upload-dropzone.dragover{
   border-color: var(--button-color);
   background-color: var(--hero-banner-color);
}

.upload-dropzone i{
   font-size: 26px;
   color: var(--button-color);
   margin-bottom: 8px;
}

.upload-dropzone-title{
   font-size: 14.5px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 2px;
}

.upload-dropzone-sub{
   font-size: 12.5px;
   color: var(--paragraph-color);
}

.upload-file-input{ display: none; }

.mockup-action-row{
   display: flex;
   gap: 10px;
   margin-top: 14px;
}

.mockup-action-btn{
   flex: 1;
   height: 40px;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   background: var(--primary-color);
   color: var(--secondary-color);
   font-size: 13px;
   font-weight: 600;
}

.mockup-action-btn.primary{
   background: var(--secondary-color);
   border-color: var(--secondary-color);
   color: #fff;
}

.mockup-range-row{
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 14px;
}

.mockup-range-row i{ color: var(--paragraph-color); font-size: 13px; }

.mockup-range-row input[type="range"]{
   flex: 1;
   accent-color: var(--button-color);
}

/* Config panel */
.designer-config-panel{
   background: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 14px;
   padding: 26px;
   margin-bottom: 20px;
}

.designer-config-title{
   font-size: 16px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
}

.designer-config-title .label-container{ margin-bottom: 0; }

.model-thumb{
   border: 1px solid var(--border-color);
   border-radius: 10px;
   background: var(--primary-color);
   padding: 14px 8px 10px 8px;
   text-align: center;
   cursor: pointer;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.model-thumb:hover{
   border-color: var(--button-color);
}

.model-thumb span{
   font-size: 11px;
   font-weight: 600;
   color: var(--secondary-color);
   display: block;
   line-height: 14px;
}

.model-thumb.selected{
   border-color: var(--button-color);
   background: var(--hero-banner-color);
   box-shadow: 0 0 0 1px var(--button-color);
}

.designer-price-box{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 4px;
}

.designer-price{
   font-size: 26px;
   font-weight: 700;
   color: var(--secondary-color);
}

.designer-price .old-price{
   font-size: 15px;
   color: var(--paragraph-color);
   text-decoration: line-through;
   font-weight: 500;
   margin-left: 8px;
}

.idea-card{
   background: var(--cards-bg-color);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 22px;
   text-align: center;
   height: 100%;
}

.idea-card-icon{
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: var(--hero-banner-color);
   color: var(--button-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin: 0 auto 14px auto;
}

@media (max-width: 992px){
   .designer-promo-image-wrap{ display: none; }
   .designer-preview-col{ position: static; margin-bottom: 24px; }
   .model-select-grid{ grid-template-columns: repeat(3, 1fr); }
}

.nav-new-badge{
   display: inline-block;
   background-color: var(--button-color);
   color: #fff;
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .3px;
   padding: 2px 6px;
   border-radius: 20px;
   margin-left: 4px;
   vertical-align: middle;
   position: relative;
   top: -1px;
}

/* ---------- Model search + brand filter ---------- */
.model-search-input-wrap{
   position: relative;
   margin-bottom: 14px;
}

.model-search-input-wrap i{
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--paragraph-color);
   font-size: 14px;
}

.model-search-input-wrap input{
   width: 100%;
   height: 42px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 0 14px 0 38px;
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary-color);
}

.model-search-input-wrap input:focus{
   outline: none;
   border-color: var(--button-color);
   box-shadow: 0 0 0 3px rgba(9,58,116,0.08);
}

.brand-filter-row{
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 10px;
   margin-bottom: 6px;
   scrollbar-width: thin;
}

.brand-filter-pill{
   display: flex;
   align-items: center;
   flex-shrink: 0;
   gap: 6px;
   border: 1px solid var(--border-color);
   background: var(--primary-color);
   border-radius: 30px;
   padding: 6px 14px 6px 8px;
   font-size: 13px;
   font-weight: 600;
   color: var(--secondary-color);
   cursor: pointer;
   white-space: nowrap;
}

.brand-filter-pill img{
   width: 18px;
   height: 18px;
   object-fit: contain;
}

.brand-filter-pill.active{
   border-color: var(--button-color);
   background: var(--button-color);
   color: #fff;
}

.model-select-grid{
   /* No internal scroll by design - the grid just grows with the page. */
   padding-right: 0;
}

.model-select-grid-inner{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
}

@media (max-width: 992px){
   .model-select-grid-inner{ grid-template-columns: repeat(3, 1fr); }
}

.model-thumb-photo-area{
   width: 100%;
   height: 84px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 8px;
}

/* One consistent illustrated "mini phone" for every card, so nothing in
   the grid looks mismatched. The camera-dot arrangement still reflects
   each model's real layout (see phone-models-data.js) via the same
   [data-layout] approach as the big live-preview mockup, just re-scaled
   for a small card. */
.model-mini-mockup{
   width: 42px;
   height: 78px;
   border-radius: 10px;
   margin: 0 auto;
   position: relative;
   background: linear-gradient(150deg, #f1f2f6, #dde0e8);
   border: 2px solid #171b30;
   box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.model-mini-cam{
   position: absolute;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 2px;
   padding: 3px;
   top: 5px;
   left: 5px;
   width: 20px;
   height: 20px;
   border-radius: 6px;
   background: rgba(10,13,32,.85);
}

.model-mini-lens{
   background: #4a5170;
   border-radius: 50%;
}

.model-mini-cam .model-mini-lens:nth-child(n+5){ display:none; }

/* iPhone standard - 2 lenses, diagonal */
.model-mini-mockup[data-layout="iphone-diagonal-2"] .model-mini-lens:nth-child(1){ grid-column:1; grid-row:1; }
.model-mini-mockup[data-layout="iphone-diagonal-2"] .model-mini-lens:nth-child(2){ grid-column:2; grid-row:2; }
.model-mini-mockup[data-layout="iphone-diagonal-2"] .model-mini-lens:nth-child(3),
.model-mini-mockup[data-layout="iphone-diagonal-2"] .model-mini-lens:nth-child(4){ display:none; }

/* iPhone Pro - 3 lenses, triangular */
.model-mini-mockup[data-layout="iphone-triangle-3"] .model-mini-lens:nth-child(1){ grid-column:1; grid-row:1; }
.model-mini-mockup[data-layout="iphone-triangle-3"] .model-mini-lens:nth-child(2){ grid-column:2; grid-row:1; }
.model-mini-mockup[data-layout="iphone-triangle-3"] .model-mini-lens:nth-child(3){ grid-column:1; grid-row:2; }
.model-mini-mockup[data-layout="iphone-triangle-3"] .model-mini-lens:nth-child(4){ display:none; }

/* Single lens - entry level / iPad */
.model-mini-mockup[data-layout="single-1"] .model-mini-cam{ width:15px; height:15px; border-radius:5px; }
.model-mini-mockup[data-layout="single-1"] .model-mini-lens:nth-child(1){ grid-column:1/3; grid-row:1/3; }
.model-mini-mockup[data-layout="single-1"] .model-mini-lens:nth-child(n+2){ display:none; }

/* Budget Android - 2 lenses, small vertical pill */
.model-mini-mockup[data-layout="dual-stack-2"] .model-mini-cam{ width:12px; height:26px; border-radius:5px; grid-template-columns:1fr; grid-template-rows:1fr 1fr; padding:3px 2px; }
.model-mini-mockup[data-layout="dual-stack-2"] .model-mini-lens:nth-child(1){ grid-column:1; grid-row:1; }
.model-mini-mockup[data-layout="dual-stack-2"] .model-mini-lens:nth-child(2){ grid-column:1; grid-row:2; }
.model-mini-mockup[data-layout="dual-stack-2"] .model-mini-lens:nth-child(n+3){ display:none; }

/* Samsung Galaxy S/A - 3 lenses, vertical column */
.model-mini-mockup[data-layout="samsung-column-3"] .model-mini-cam{ width:11px; height:34px; border-radius:5px; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); padding:3px 2px; gap:2px; }
.model-mini-mockup[data-layout="samsung-column-3"] .model-mini-lens:nth-child(1){ grid-row:1; }
.model-mini-mockup[data-layout="samsung-column-3"] .model-mini-lens:nth-child(2){ grid-row:2; }
.model-mini-mockup[data-layout="samsung-column-3"] .model-mini-lens:nth-child(3){ grid-row:3; }
.model-mini-mockup[data-layout="samsung-column-3"] .model-mini-lens:nth-child(4){ display:none; }

/* Samsung Galaxy S Ultra - 4 lenses, vertical column */
.model-mini-mockup[data-layout="samsung-column-4"] .model-mini-cam{ width:11px; height:44px; border-radius:5px; grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); padding:2px; gap:2px; }
.model-mini-mockup[data-layout="samsung-column-4"] .model-mini-lens:nth-child(1){ grid-row:1; }
.model-mini-mockup[data-layout="samsung-column-4"] .model-mini-lens:nth-child(2){ grid-row:2; }
.model-mini-mockup[data-layout="samsung-column-4"] .model-mini-lens:nth-child(3){ grid-row:3; }
.model-mini-mockup[data-layout="samsung-column-4"] .model-mini-lens:nth-child(4){ grid-row:4; }

/* Google Pixel - signature horizontal camera bar */
.model-mini-mockup[data-layout="pixel-bar-3"] .model-mini-cam{ width:calc(100% - 10px); height:16px; left:5px; top:5px; border-radius:5px; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr; padding:3px 5px; gap:3px; align-items:center; }
.model-mini-mockup[data-layout="pixel-bar-3"] .model-mini-lens:nth-child(1){ grid-column:1; grid-row:1; }
.model-mini-mockup[data-layout="pixel-bar-3"] .model-mini-lens:nth-child(2){ grid-column:2; grid-row:1; }
.model-mini-mockup[data-layout="pixel-bar-3"] .model-mini-lens:nth-child(3){ grid-column:3; grid-row:1; }
.model-mini-mockup[data-layout="pixel-bar-3"] .model-mini-lens:nth-child(4){ display:none; }

/* Huawei / premium Android - circular camera island */
.model-mini-mockup[data-layout="huawei-circle-3"] .model-mini-cam{ width:34px; height:34px; border-radius:50%; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); padding:5px; gap:2px; }
.model-mini-mockup[data-layout="huawei-circle-3"] .model-mini-lens:nth-child(1){ grid-column:1; grid-row:1; }
.model-mini-mockup[data-layout="huawei-circle-3"] .model-mini-lens:nth-child(2){ grid-column:2; grid-row:1; }
.model-mini-mockup[data-layout="huawei-circle-3"] .model-mini-lens:nth-child(3){ grid-column:1; grid-row:2; }
.model-mini-mockup[data-layout="huawei-circle-3"] .model-mini-lens:nth-child(4){ display:none; }

.model-no-results{
   text-align: center;
   padding: 30px 10px;
}

.selected-model-chip{
   display: inline-flex;
   align-items: center;
   background: var(--hero-banner-color);
   border-radius: 30px;
   padding: 5px 12px;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--secondary-color);
   margin-top: 10px;
}

.selected-model-chip i{
   color: var(--button-color);
   margin-right: 6px;
}

/* ==========================================================================
   Camera module layouts - see phone-models-data.js for the "layout" key
   assigned to each phone model. JS just swaps the [data-layout] attribute
   on #caseCameraModule; everything else is these CSS rules.
   ========================================================================== */
.case-camera-module{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 6px;
   padding: 10px;
   transition: all .2s ease;
}

.case-camera-module .case-camera-lens:nth-child(n+5){
   display: none;
}

/* iPhone standard - 2 lenses, diagonal */
.case-mockup[data-layout="iphone-diagonal-2"] .case-camera-lens:nth-child(1){ grid-column:1; grid-row:1; }
.case-mockup[data-layout="iphone-diagonal-2"] .case-camera-lens:nth-child(2){ grid-column:2; grid-row:2; }
.case-mockup[data-layout="iphone-diagonal-2"] .case-camera-lens:nth-child(3),
.case-mockup[data-layout="iphone-diagonal-2"] .case-camera-lens:nth-child(4){ display:none; }

/* iPhone Pro - 3 lenses, triangular */
.case-mockup[data-layout="iphone-triangle-3"] .case-camera-lens:nth-child(1){ grid-column:1; grid-row:1; }
.case-mockup[data-layout="iphone-triangle-3"] .case-camera-lens:nth-child(2){ grid-column:2; grid-row:1; }
.case-mockup[data-layout="iphone-triangle-3"] .case-camera-lens:nth-child(3){ grid-column:1; grid-row:2; }
.case-mockup[data-layout="iphone-triangle-3"] .case-camera-lens:nth-child(4){ opacity:.35; grid-column:2; grid-row:2; transform:scale(.5); }

/* Single lens - entry level / iPad */
.case-mockup[data-layout="single-1"] .case-camera-module{ width:52px; height:52px; border-radius:16px; }
.case-mockup[data-layout="single-1"] .case-camera-lens:nth-child(1){ grid-column:1/3; grid-row:1/3; }
.case-mockup[data-layout="single-1"] .case-camera-lens:nth-child(n+2){ display:none; }

/* Budget Android - 2 lenses, small vertical pill */
.case-mockup[data-layout="dual-stack-2"] .case-camera-module{ width:38px; height:76px; border-radius:16px; grid-template-columns:1fr; grid-template-rows:1fr 1fr; padding:8px 6px; }
.case-mockup[data-layout="dual-stack-2"] .case-camera-lens:nth-child(1){ grid-column:1; grid-row:1; }
.case-mockup[data-layout="dual-stack-2"] .case-camera-lens:nth-child(2){ grid-column:1; grid-row:2; }
.case-mockup[data-layout="dual-stack-2"] .case-camera-lens:nth-child(n+3){ display:none; }

/* Samsung Galaxy S/A - 3 lenses, vertical column */
.case-mockup[data-layout="samsung-column-3"] .case-camera-module{ width:34px; height:120px; border-radius:17px; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); padding:8px 6px; gap:8px; }
.case-mockup[data-layout="samsung-column-3"] .case-camera-lens:nth-child(1){ grid-row:1; }
.case-mockup[data-layout="samsung-column-3"] .case-camera-lens:nth-child(2){ grid-row:2; }
.case-mockup[data-layout="samsung-column-3"] .case-camera-lens:nth-child(3){ grid-row:3; }
.case-mockup[data-layout="samsung-column-3"] .case-camera-lens:nth-child(4){ display:none; }

/* Samsung Galaxy S Ultra - 4 lenses, vertical column */
.case-mockup[data-layout="samsung-column-4"] .case-camera-module{ width:34px; height:154px; border-radius:17px; grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); padding:8px 6px; gap:6px; }
.case-mockup[data-layout="samsung-column-4"] .case-camera-lens:nth-child(1){ grid-row:1; }
.case-mockup[data-layout="samsung-column-4"] .case-camera-lens:nth-child(2){ grid-row:2; }
.case-mockup[data-layout="samsung-column-4"] .case-camera-lens:nth-child(3){ grid-row:3; }
.case-mockup[data-layout="samsung-column-4"] .case-camera-lens:nth-child(4){ grid-row:4; }

/* Google Pixel - signature horizontal camera bar */
.case-mockup[data-layout="pixel-bar-3"] .case-camera-module{ width:calc(100% - 32px); height:52px; left:16px; top:16px; border-radius:16px; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr; padding:8px 14px; gap:10px; align-items:center; }
.case-mockup[data-layout="pixel-bar-3"] .case-camera-lens:nth-child(1){ grid-column:1; grid-row:1; }
.case-mockup[data-layout="pixel-bar-3"] .case-camera-lens:nth-child(2){ grid-column:2; grid-row:1; transform:scale(1.15); }
.case-mockup[data-layout="pixel-bar-3"] .case-camera-lens:nth-child(3){ grid-column:3; grid-row:1; }
.case-mockup[data-layout="pixel-bar-3"] .case-camera-lens:nth-child(4){ display:none; }

/* Huawei / premium Android - circular camera island */
.case-mockup[data-layout="huawei-circle-3"] .case-camera-module{ width:96px; height:96px; border-radius:50%; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); padding:14px; gap:6px; }
.case-mockup[data-layout="huawei-circle-3"] .case-camera-lens:nth-child(1){ grid-column:1; grid-row:1; }
.case-mockup[data-layout="huawei-circle-3"] .case-camera-lens:nth-child(2){ grid-column:2; grid-row:1; }
.case-mockup[data-layout="huawei-circle-3"] .case-camera-lens:nth-child(3){ grid-column:1; grid-row:2; }
.case-mockup[data-layout="huawei-circle-3"] .case-camera-lens:nth-child(4){ display:none; }