.container-compare{max-width:1120px;margin:0 auto;padding:40px 20px;font-family:Lato,Arial,sans-serif}
.comparison-header{text-align:center;margin-bottom:40px}
.main-title{color:#000;padding:12px 24px;display:inline-block;font-size:28px;font-weight:600;margin-bottom:20px}
.shop-link{background-color:#06c;color:#fff;padding:8px 16px;text-decoration:none;display:inline-block;margin-bottom:10px}
.help-link{background-color:#06c;color:#fff;padding:6px 12px;text-decoration:none;font-size:14px}
.model-selectors{display:flex;justify-content:center;gap:30px;margin-bottom:40px}
.model-selector{color:#000;padding:17px 14px;cursor:pointer;width:100%;border:1px solid #ddd;font-weight:700;font-size:19px;border-radius:5px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='%234c9cd7' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;height:auto}
.comparison-table{border-radius:12px;overflow:hidden}
.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #06c;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}
@keyframes spin {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.loading-text{font-size:16px;color:#666;margin:0}
.retry-button{background-color:#06c;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:14px;margin-top:10px;transition:background-color .3s}
.retry-button:hover{background-color:#0052a3}
.table-header{display:grid;grid-template-columns:repeat(3,1fr)}
.header-cell{padding:20px;text-align:center}
.phone-header{text-align:center;position:relative}
.image-carousel{position:relative;height:180px;width:150px;margin:0 auto 30px}
.phone-image-small,.carousel-image{width:100%;object-fit:contain;transition:opacity .3s ease;position:absolute;top:0;left:0}
.carousel-image{display:none}
.carousel-image:first-child{display:block}
.phone-name{font-size:16px;font-weight:600;margin-bottom:8px}
.selected-color{font-size:14px;margin-bottom:8px;padding:10px 0}
.color-options{display:flex;justify-content:center;gap:4px;margin-bottom:10px}
.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid #ddd;cursor:pointer;transition:all .3s ease;position:relative}
.color-dot:hover{transform:scale(1.1);border-color:#06c}
.color-dot.active{border-color:#06c;box-shadow:0 0 0 2px #06c3}
.color-ultramarine{background-color:#9aadf6}
.color-teal{background-color:#b0d4d2}
.color-pink{background-color:#f2adda}
.color-white{background-color:#fafafa;border-color:#999}
.color-black{background-color:#35393B}
.color-desert-titanium{background:#bfa48f}
.color-natural-titanium{background:#837f7d}
.color-white-titanium{background:#ddd}
.color-black-titanium{background:#1b1b1b}
.color-blue-titanium{background:#2f4452}
.color-blue{background-color:#CED5D9}
.color-purple{background-color:#e6ddeb}
.color-yellow{background-color:#E6E0C1}
.color-green{background-color:#E6E0C1}
.color-midnight{background-color:#232a31}
.color-starlight{background-color:#faf6f2}
.color-product-red{background-color:#bf0013}
.color-gold{background-color:#f4e8ce}
.color-silver{background-color:#f0f2f2}
.color-gray{background-color:gray}
.color-default{background-color:#E5E7EB}
.color-lavender{background-color:#dfceea}
.color-sage{background-color:#a9b689}
.color-mist-blue{background-color:#96aed1}
.color-sky-blue{background-color:#f0f9ff}
.color-light-gold{background-color:#fffcf5}
.color-cloud-white{background-color:#fcfcfc}
.color-space-black{background-color:#000}
.color-cosmic-orange{background-color:#f77e2d}
.color-deep-blue{background-color:#32374a}
.price{font-size:16px;font-weight:600;margin-bottom:10px}
.buy-button{background-color:transparent;color:#000;padding:8px 20px;border:none;border-radius:980px;cursor:pointer;margin-bottom:8px;width:100%;font-size:14px;text-decoration:none;border:1px solid #000}
.buy-button:hover{background-color:#4c9cd7;color:#fff}
.ber-rating{position:absolute;bottom:0;right:0}
.learn-more{color:#06c;text-decoration:none;font-size:12px}
.table-row{display:grid;grid-template-columns:repeat(3,1fr)}
.row-header{padding:15px 20px;background-color:#f8f9fa;font-weight:600;border-right:1px solid #e9ecef;display:flex;align-items:center}
.table-cell{padding:15px 20px;text-align:center;display:flex;align-items:center;justify-content:flex-start;flex-direction:column}
.table-cell:last-child{border-right:none}
.table-cell figure{text-align:center;display:flex;flex-direction:column;align-items:center;margin:0}
.table-cell figure img{margin-bottom:15px}
.spec-value{font-size:16px;line-height:1.4;line-height:30px}
.spec-value.spec-screensize{font-size:32px;font-weight:700}
.chip-badge{background:#f0f0f0;border:1px solid #ddd;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600;margin-bottom:5px}
.feature-yes{color:#28a745;font-weight:600}
.feature-no{color:#6c757d}
.category-header{background-color:#e9ecef;font-weight:700;font-size:16px}
.comparison-footer{background-color:#f5f5f7;padding:30px 50px;margin-top:30px;font-size:13px;color:#6e6e73;line-height:16px}
@media (max-width: 768px) {
.container-compare{padding:20px 10px}
.main-title{font-size:24px;padding:8px 16px}
.table-header{grid-template-columns:repeat(2,1fr)}
.table-header .header-cell:nth-child(3),.table-row .table-cell:nth-child(3){display:none!important}
.table-row{grid-template-columns:repeat(2,1fr)}
.phone-header{padding:10px}
.image-carousel{height:120px;width:100px;margin:0 auto 20px}
.phone-name{font-size:14px}
.selected-color{font-size:12px;padding:5px 0}
.color-dot{width:16px;height:16px}
.buy-button{padding:6px 12px;font-size:12px}
.spec-value{font-size:13px;line-height:1.3;padding:8px}
.model-selector{font-size:14px;padding:12px 10px;padding-right:25px}
.comparison-footer{padding:20px 15px;font-size:12px}
.loading-container{padding:40px 15px}
.loading-spinner{width:40px;height:40px}
.loading-text{font-size:14px}
}
@media (max-width: 480px) {
.container-compare{padding:15px 5px}
.main-title{font-size:20px}
.image-carousel{height:100px;width:80px}
.phone-name{font-size:13px}
.color-dot{width:14px;height:14px}
.spec-value{font-size:12px;padding:6px}
.model-selector{font-size:13px;padding:10px 8px;padding-right:20px}
}