.rafinat-package-selector {
margin: 24px 0;
padding: 18px;
border: 1px solid #e3e3e3;
border-radius: 12px;
background: #fafafa;
clear: both;
}
.rafinat-package-selector h3 {
margin: 0 0 14px;
font-size: 18px;
line-height: 1.3;
font-weight: 600;
}
.rafinat-package-list {
display: grid;
gap: 10px;
}
.rafinat-package-card {
display: flex;
align-items: center;
gap: 14px;
position: relative;
padding: 12px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
color: #111;
text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rafinat-package-card:hover,
.rafinat-package-card.active {
border-color: #111;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
color: #111;
text-decoration: none;
}
.rafinat-package-card:hover {
transform: translateY(-1px);
}
.rafinat-package-thumb {
width: 64px;
height: 64px;
flex: 0 0 64px;
display: flex;
align-items: center;
justify-content: center;
}
.rafinat-package-image {
width: 64px;
height: 64px;
object-fit: contain;
display: block;
}
.rafinat-package-info {
display: flex;
flex: 1;
min-width: 0;
gap: 8px;
align-items: center;
}
.rafinat-package-title {
flex: 1;
font-weight: 600;
line-height: 1.3;
}
.rafinat-package-price {
font-weight: 700;
white-space: nowrap;
}
.rafinat-package-current {
font-size: 12px;
font-weight: 600;
color: #fff;
background: #111;
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
}
@media (max-width: 600px) {
.rafinat-package-card {
align-items: flex-start;
}
.rafinat-package-info {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.rafinat-package-current {
position: absolute;
top: 10px;
right: 10px;
}
}