/* Account Page Styles */
.account-main {
    position: relative;
    min-height: 100vh;
    padding-top: 6rem;
    z-index: 10;
}


.account-logout {
    background: none;
    border: none;
    color: #E42261;
    text-decoration: underline;
    font-size: 1.4rem;
    cursor: pointer;
    font-style: italic;
}

.account-logout:hover {
    color: #FF276D;
}

.account-content {
    display: grid;
    grid-template-columns: 0.84fr 1.16fr;
    gap: 0.813rem;
    margin-bottom: 4rem;
}

.account-section {
    border-radius: 1.25rem;
    flex: 1 1 0;   /* grow:1, shrink:1, basis:0 — стартовая база равна нулю */
    min-width: 0;
}

/* Profile Form Styles */
.profile-form {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: rgba(32, 24, 20, 0.7);
    gap: 0.813rem;
    width: 24.5rem;
    max-width: 100%;
    border-radius: 1.5rem;
}

.profile-form .form-group input,
.profile-form .form-group input::placeholder{
    color: #FDF8CF;
}

.profile-form .form-group input {
    border: 1px solid #FDF8CF1A;
}

.profile-section {
    /* width: 32.375rem; */

}

.profile-section-title {
    text-align: left;
    font-size: 3.5rem;
    line-height: 1.6;
}

.profile-save-btn {
    width: 100%;
    margin-top: 1rem;
    align-self: center;
}

.profile-data {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2.938rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 2.938rem;
}
.profile-data__info {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    font-size: 1rem;
}

.profile-data__info a{
    color: #ED2F6F;
}

/* Slider Styles */
.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(32, 24, 20, 0.7);
    border-radius: 1.5rem;
}

.slider-content {
    flex: 1;
    overflow: hidden;
    border-radius: 0.75rem;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    border-radius: 50%;
    width: 4rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 0 0.5rem;
}

.slider-arrow-left {
    right: 100%;
}

.slider-arrow-right {
    left: 100%;
}

#receiptsArrowLeft,
#receiptsArrowRight {
    top: 40%;
}

#prizesArrowLeft,
#prizesArrowRight {
    top: 7rem;    
}
 
.slider-arrow img {
    width: 2rem;
    height: 2rem;
}

/* Receipt Styles */
.receipts-section {
    padding-top: 3.625rem;

}

.receipts-section-title {
    color: #FDF8CF;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.8rem;
    text-align: center;
}

.receipts-slider {
    position: relative;
    width: 100%;
}

.receipt-slide {
    text-align: center;
    padding: 1.5rem 1.5rem 0.7rem;
    outline: none;
}

.receipt-image {

    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 24.5rem;
    margin-left: auto;
    margin-right: auto;
}

.receipt-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.receipt-status {
    font-size: 1rem;
    line-height: 1;
    font-weight: 400;
    display: inline-block;
    color: #FFF;
}


/* Slick slider overrides for receipts */
.receipts-slider .slick-prev,
.receipts-slider .slick-next {
    width: 3.5rem;
    height: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.receipts-slider .slick-prev {
    left: 0;
}

.receipts-slider .slick-next {
    right: -0;
}

.receipts-slider .slick-prev:hover,
.receipts-slider .slick-next:hover {
    background: #FF276D;
}

.receipts-slider .slick-dots {
    bottom: -2.5rem;
}

.receipts-slider .slick-dots li button:before {
    font-size: 12px;
    color: #FDF8CF;
    opacity: 0.5;
}

.receipts-slider .slick-dots li.slick-active button:before {
    color: #ED2F6F;
    opacity: 1;
}

.receipts-section-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.receipts-section-buttons .btn {
    min-width: 200px;
    flex: auto
}

.receipt-item {
    text-align: center;
}

.receipt-placeholder {
    background: #E8E8E8;
    border-radius: 0.5rem;
    height: 37.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.receipt-placeholder p {
    color: #5E5E5E;
    font-style: italic;
    font-weight: bold;
    font-size: 1.125rem;
}

.receipt-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: #5E5E5E;
    font-style: italic;
    font-weight: bold;
}

.receipt-date {
    margin-bottom: 0.25rem;
}

.status-registered {
    color: #28A745;
    font-weight: bold;
}

.status-pending {
    color: #FFC107;
    font-weight: bold;
}

.status-rejected {
    color: #DC3545;
    font-weight: bold;
}

.status-unknown {
    color: #6C757D;
    font-weight: bold;
}

.receipt-amount,
.receipt-store {
    color: #666;
    margin-bottom: 0.25rem;
}

.upload-receipt-btn {
    width: clamp(17.563rem, 20vw + 10rem, 26.5rem);
    max-width: 100%;
    margin: auto;
    display: block;
    padding: 0.75rem;
}

/* Prize Styles */
.prize-item {
    text-align: center;
}

.prize-card-mini {
    background: #E42261;
    margin-bottom: 1rem;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    height: 13.625rem;
    color: white;
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prize-brand {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.prize-card-mini.prize-available {
    background: #28A745;
}

.prize-card-mini.prize-pending {
    background: #FFC107;
    color: #333;
}

.prize-card-mini.prize-claimed {
    background: #6C757D;
}

.claim-prize-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.3s ease;
}

.claim-prize-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}


.prize-description {
    font-size: 1rem;
    line-height: 1.1;
    color: #AE8E91;
    font-weight: bold;
    font-style: italic;
}


/* Responsive Design for Account Page */
@media (max-width: 1024px) {
    .account-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
    }
    
    .account-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {

    .account-section {
        width: 100%;
    }

    .slider-arrow {
        width: 2rem;
        height: 2rem;
        margin: 0 0.25rem;
    }
    
    .slider-arrow img {
        width: 0.75rem;
        height: 0.75rem;
    }

}

@media (max-width: 480px) {

    .account-main {
        padding-top: 5.7rem;
    }

    .account-header {
        margin-bottom: 2rem;
    }
    
    .account-content {
        gap: 0rem;
        margin-bottom: 0;
    }
    
    .account-section {
    }

    .profile-section__text {
        font-size: 0.75rem;
    }

    .profile-data {
        gap: 0.8rem;
        margin-bottom: 1rem;
    }
    .profile-data__info {
        font-size: 0.75rem;
        
    }

    .profile-section-title {
        font-size: 2rem;
    }

    .profile-form {
        gap: 0.65rem;
        padding: 1rem;
        border-radius: 1rem;
    }

    .profile-save-btn {
        margin-top: 1.3rem;
    }
    
    .receipts-section {
        padding: 1.5rem 0rem;
    }
    
    .receipts-section-title {
        font-size: 1.25rem;
        text-align: left;
    }
    
    
    .receipts-slider {
        padding: 0;
    }

    .receipt-slide {
        padding: 0;
        padding-bottom: 1rem;
    }
    
    .receipt-image {
        max-width: 98%;
    }
    
    .receipt-status {
        font-size: 1rem;
    }
    
    .receipts-slider .slick-prev,
    .receipts-slider .slick-next {
        width: 2.5rem;
        height: 2.5rem;
        top: 40%;
    }

    
    .receipts-section-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .receipts-section-buttons .btn {
        width: 100%;
    }
    
    .receipt-placeholder {
        width: 82%;
        margin: auto;
        height: 17.5rem;
        margin-bottom: 1.2rem;
        border-radius: 1rem;
    }
    
    .receipt-info {
        gap: 1;
        line-height: 1.1;
    }
    .slider-container {
        width: calc(100% + 2rem);

        margin: 1.9rem -1rem 0.7rem;
        border-radius: 0;
    }

    #receiptsArrowLeft,
    #receiptsArrowRight {
        top: 33%;
    }
    .slider-arrow img {
        width: 2rem;
        height: 1.5rem;
    }
    .prize-card-mini {
        height: 9rem;
        padding: 1rem 0.5rem;
    }

}