/* Category Selection Container - Match other sections */

.category-selection-container {

    margin: 40px 0;

    background: #F5F5F7;

    border-radius: 15px;

    padding: 10px 20px 7px 20px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    text-align: center;

}



.category-selection-container h1,

#pageTitle {

    margin-bottom: 0 !important;

    margin-top: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding: 0 !important;

    font-size: 21px !important;

    font-weight: 700;

    color: #0071E3;

    text-align: center !important;

    display: block;

    width: 100%;

}



.category-subtitle {

    margin: 1px 0 6px 0;

    padding: 0;

    font-size: 16px;

    color: #1d1d1f;

    text-align: center;

}



/* Category Grid */

.category-selection-container #categoryGrid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 20px;

    padding: 0;

    margin: 0;

}



/* Category Cards */

.category-selection-container .device-card {

    background: white;

    border-radius: 15px;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    min-height: 160px;

    width: 100%;

}



.category-selection-container .device-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

}



.category-selection-container .device-card img {

    width: 80px;

    height: 80px;

    object-fit: contain;

    margin-bottom: 15px;

}



.category-selection-container .device-card span {

    font-size: 16px;

    font-weight: 600;

    color: #1d1d1f;

    text-align: center;

    line-height: 1.4;

}



/* Mobile/Phone Responsive */

@media (max-width: 768px) {

    .category-selection-container {

        padding: 20px 15px;

    }

    

    .category-selection-container h1,

    #pageTitle {

        font-size: 19px !important;

    }

    

    .category-subtitle {

        font-size: 11px;

        margin-bottom: 20px;

    }

    

    .category-selection-container #categoryGrid {

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

        gap: 15px;

    }

    

    .category-selection-container .device-card {

        padding: 25px 15px;

        min-height: 140px;

        max-width: 100%;

    }

    

    .category-selection-container .device-card img {

        width: 70px;

        height: 70px;

        margin-bottom: 12px;

    }

    

    .category-selection-container .device-card span {

        font-size: 14px;

    }

}



/* Recently Added Devices for Sale Section */

.inventory-sale-container {

    margin: 40px 0;

    background: #F5F5F7;

    border-radius: 15px;

    padding: 5px 30px 30px 30px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.inventory-sale-container h2 {

    margin-bottom: 5px;

    margin-top: 10px;

    font-size: 16px;

    font-weight: 700;

    color: #0071E3;

}



.inventory-slider-wrapper {

    position: relative;

    overflow: hidden;

    padding: 7px;

}



.inventory-devices-slider {

    display: flex;

    gap: 5px;

    overflow: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none; /* Firefox */

}



.inventory-devices-slider::-webkit-scrollbar {

    display: none; /* Chrome, Safari, Opera */

}



/* Inventory Box - Main Container */

.inventory-box {

    text-decoration: none;

    display: inline-block;

    flex-shrink: 0;

    transition: transform 0.3s ease;

    /* Default (PC): 5 cards - (100% - 4 gaps of 5px) / 5 */

    width: calc((100% - 4 * 5px) / 5);

}



.inventory-box:hover {

    transform: translateY(-5px);

}



/* Box Wrapper */

.box-wrapper {

    width: 100%;

    height: 0;

    padding-bottom: 145%;

    position: relative;

    margin-bottom: 4px;

    overflow: hidden;

}



/* Background Layer */

.box-background {

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    position: absolute;

    background: white;

    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);

    border-radius: 8px;

    border: 1px #E0E0E0 solid;

}



/* Category Tag at Top */

.category-tag {

    width: 100%;

    height: 7%;

    left: 0;

    top: 0;

    position: absolute;

    background: #00567C;

    border-top-right-radius: 8px;

    border-top-left-radius: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 10px;

    z-index: 2;

}



.category-text {

    color: white;

    font-size: 13px;

    font-family: ABeeZee, sans-serif;

    font-weight: 400;

    line-height: 18px;

}



.brand-text {

    color: #FFCC00;

    font-size: 13px;

    font-family: ABeeZee, sans-serif;

    font-weight: 400;

    line-height: 18px;

}



/* Device Image */

.device-image {

    width: calc(100% - 10px);

    height: 50%;

    left: 5px;

    top: 10%;

    position: absolute;

    object-fit: contain;

    z-index: 1;

}



/* Hot Deal and Discount Badge Styles */

.hot-deal-badge,

.discount-badge {

    position: absolute;

    top: 22%;

    left: -7px;

    width: 35%;

    max-width: 90px;

    height: auto;

    z-index: 10;

    pointer-events: none;

    border-radius: 4px;

    transition: opacity 1s ease-in-out;

}



/* Animation keyframes for fade effect */

@keyframes badgeFade {

    0% { opacity: 1; }

    50% { opacity: 0.3; }

    100% { opacity: 1; }

}



.badge-animating {

    animation: badgeFade 2s ease-in-out;

}



/* If both badges exist, show discount on top */

.box-wrapper .hot-deal-badge {

    z-index: 9;

}



.box-wrapper .discount-badge {

    z-index: 10;

}



/* Device Title */

.device-title {

    left: 5%;

    top: 62%;

    position: absolute;

    text-align: center;

    color: #000000;

    font-size: clamp(14px, 1.4vw, 17px);

    font-family: Alexandria, sans-serif;

    font-weight: 700;

    line-height: 1.3;

    word-wrap: break-word;

    margin: 0;

    width: 90%;

    z-index: 2;

}



/* Device Specs (Storage and Color) */

.device-specs {

    left: 5%;

    top: 68%;

    position: absolute;

    text-align: center;

    color: #000000;

    font-size: clamp(11px, 1.1vw, 13px);

    font-family: Alexandria, sans-serif;

    font-weight: 400;

    line-height: 1.2;

    word-wrap: break-word;

    margin: 0;

    width: 90%;

    z-index: 2;

}



/* COMPLETELY REMOVE old styles */

.divider-line,

.info-tags,

.box-bottom-section {

    display: none !important;

}



/* Badge Container */

.info-tags-badges {

    position: absolute;

    top: 73.5%;

    left: 50%;

    transform: translateX(-50%);

    width: auto;

    display: flex !important;

    align-items: center;

    justify-content: center;

    gap: 8px;

    z-index: 10;

}



/* Individual Badges */

.badge-carrier,

.badge-condition {

    background-color: #1A1A1A;

    color: #FFFFFF;

    padding: 7px 12px;

    border-radius: 18px;

    font-size: 12px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

    gap: 5px;

}



.badge-carrier svg,

.badge-condition svg {

    width: 12px;

    height: 12px;

    fill: white;

}



/* Smaller badges on mobile */

@media (max-width: 768px) {

    .badge-carrier,

    .badge-condition {

        padding: 5px 9px;

        border-radius: 14px;

        font-size: 10px;

        gap: 3px;

    }

    

    .badge-carrier svg,

    .badge-condition svg {

        width: 10px;

        height: 10px;

    }

}



/* Price */

.price {

    position: absolute;

    left: 0;

    top: 84%;

    width: 100%;

    text-align: center;

    color: #000000;

    font-size: clamp(20px, 2.2vw, 26px);

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    font-weight: 600;

    line-height: 1;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



/* Original price (crossed out) */

.original-price {

    display: inline-block;

    color: #000000;

    font-size: clamp(14px, 1.6vw, 18px);

    font-weight: 500;

    text-decoration: line-through;

}



/* Discounted price (highlighted) */

.discounted-price {

    display: inline-block;

    color: #000000;

    font-size: clamp(20px, 2.2vw, 26px);

    font-weight: 600;

}



/* Hot Deal price color - Gold with stroke */

.hot-deal-price {

    color: #FF0000 !important;

    text-shadow: 

        -1px -1px 0 #c9aa41,

        1px -1px 0 #c9aa41,

        -1px 1px 0 #c9aa41,

        1px 1px 0 #c9aa41;

}



.hot-deal-price .discounted-price {

    color: #FF0000 !important;

    text-shadow: 

        -1px -1px 0 #c9aa41,

        1px -1px 0 #c9aa41,

        -1px 1px 0 #c9aa41,

        1px 1px 0 #c9aa41;

}



/* Discounted price color - Gold with stroke */

.discounted-price-color {

    color: #FF0000 !important;

    text-shadow: 

        -1px -1px 0 #c9aa41,

        1px -1px 0 #c9aa41,

        -1px 1px 0 #c9aa41,

        1px 1px 0 #c9aa41;

}



.discounted-price-color .discounted-price {

    color: #FF0000 !important;

    text-shadow: 

        -1px -1px 0 #c9aa41,

        1px -1px 0 #c9aa41,

        -1px 1px 0 #c9aa41,

        1px 1px 0 #c9aa41;

}



/* Override for original crossed price in discounted items */

.discounted-price-color .original-price {

    color: #000000 !important;

    text-shadow: none;

}



/* Slider Arrows */

.inventory-slider-arrow {

    background: rgba(0, 0, 0, 0.5);

    color: white;

    border: none;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.3s ease;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

}



.inventory-slider-arrow.left-arrow {

    left: 20px;

}



.inventory-slider-arrow.right-arrow {

    right: 20px;

}



.inventory-slider-arrow:hover {

    background: rgba(0, 0, 0, 0.8);

}



.inventory-slider-arrow:disabled {

    opacity: 0.3;

    cursor: not-allowed;

}



/* Hide arrows on mobile and tablet */

@media (max-width: 1024px) {

    .inventory-slider-arrow {

        width: 35px;

        height: 35px;

        font-size: 24px;

    }

    

    .inventory-slider-arrow.left-arrow {

        left: 10px;

    }

    

    .inventory-slider-arrow.right-arrow {

        right: 10px;

    }

}



/* Last Supported Repair Devices Section */

.recently-added-container {

    margin: 40px 0;

    background: #F5F5F7;

    border-radius: 15px;

    padding: 5px 30px 30px 30px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.recently-added-container h2 {

    margin-bottom: 15px;

    margin-top: 10px;

    font-size: 16px;

    font-weight: 700;

    color: #0071E3;

}



/* Responsive Design */

@media (max-width: 768px) {

    .inventory-slider-wrapper {

        padding: 5px;

    }

    

    .inventory-sale-container {

        padding: 5px 10px 10px 10px;

    }

    

    .inventory-sale-container h2 {

        font-size: 18px;

        margin-bottom: 5px;

        margin-top: 5px;

    }

    

    .recently-added-container h2 {

        font-size: 18px;

    }

}



/* Responsive Card Counts */

/* Small smartphones: 2 cards */

@media (max-width: 480px) {

    .inventory-slider-wrapper {

        padding: 5px;

    }

    

    .inventory-sale-container {

        padding: 5px 10px 10px 10px;

    }

    

    .inventory-box {

        /* 2 cards - (100% - 1 gap of 5px) / 2 */

        width: calc((100% - 1 * 5px) / 2);

    }

    

    .hot-deal-badge,

    .discount-badge {

        width: 40%;

        max-width: 70px;

    }

}



/* Large smartphones: 3 cards */

@media (min-width: 481px) and (max-width: 768px) {

    .inventory-slider-wrapper {

        padding: 5px;

    }

     

    .inventory-sale-container {

        padding: 5px 10px 10px 10px;

    }

    

    .inventory-box {

        /* 3 cards - (100% - 2 gaps of 5px) / 3 */

        width: calc((100% - 2 * 5px) / 3);

    }

}



/* Tablets: 4 cards */

@media (min-width: 769px) and (max-width: 1024px) {

    .inventory-slider-wrapper {

        padding: 5px;

    }

    

    .inventory-sale-container {

        padding: 5px 15px 15px 15px;

    }

    

    .inventory-box {

        /* 4 cards - (100% - 3 gaps of 5px) / 4 */

        width: calc((100% - 3 * 5px) / 4);

    }

}



/* Desktop/PC: 5 cards (already set as default above) */

@media (min-width: 1025px) {

    .inventory-box {

        /* 5 cards - (100% - 4 gaps of 5px) / 5 */

        width: calc((100% - 4 * 5px) / 5);

    }

}