/* Auto-generated CSS file for Promotion views */
/* Generated on: 2025-08-05 11:18:37 */
/* Project: Member */

/* From: Details.cshtml */
.promo-details-header {
background: #000;
}

.promotion-details-container {
position: relative;
            /* min-height: 100vh; */
overflow: hidden;
}
        
.promotion-header-image {
            /* position: absolute; */
top: 0;
left: 0;
width: 100%;
            /* height: 200px;
object-fit: cover; */
}
        
.promotion-details-content {
            /* position: absolute; */
top: 200px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 20px 15px 80px 15px;
color: #000;
}
        
.promotion-details-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
color: #000;
}
        
.promotion-html-content {
font-size: 14px;
line-height: 1.6;
color: #000;
}
        
.promotion-html-content img {
max-width: 100%;
height: auto;
}
        
        /* Force all tables to be responsive and contained */
.promotion-html-content table {
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse;
margin: 15px 0;
table-layout: auto;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 12px;
}
        
.promotion-html-content th,
.promotion-html-content td {
border: 1px solid #444;
padding: 6px 8px;
color: #000;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
vertical-align: top;
min-width: 0;
max-width: none;
}
        
.promotion-html-content th {
background-color: rgba(255, 255, 255, 0.1);
font-weight: bold;
}
        
        /* Responsive table wrapper - MANDATORY for all tables */
.promotion-html-content .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
            /* margin: 15px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
max-width: 100%;
width: 100%;
}
        
        /* Ensure all content in tables is properly sized */
.promotion-html-content table img {
max-width: 100%;
height: auto;
}
        
.promotion-html-content table * {
max-width: 100%;
box-sizing: border-box;
}
        
        /* Force text wrapping for long content */
.promotion-html-content table td,
.promotion-html-content table th {
overflow: hidden;
text-overflow: ellipsis;
}
        
        /* Mobile optimization */
@media (max-width: 768px) {
.promotion-html-content table {
font-size: 11px;
}
            
.promotion-html-content th,
.promotion-html-content td {
padding: 4px 6px;
}
}
        
.promotion-details-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
        
.promotion-valid-dates {
font-size: 12px;
color: #000;
}

.back-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--primary-color);
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 20px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
cursor: pointer;
z-index: 1000;
margin-top: 20px;
}

.back-button:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.back-button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}
        
        /* Claim button section styles */
.claim-button-section {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px 15px;
}
        
#claim-promotion-btn {
background-color: var(--primary-color);
min-width: 200px;
transition: all 0.3s ease;
}
        
#claim-promotion-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}
        
#claim-promotion-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
        
#claim-status-message {
margin-top: 10px;
font-size: 12px;
}
        
#claim-status-message .text-success {
color: #28a745 !important;
}
        
#claim-status-message .text-danger {
color: #dc3545 !important;
}

/* From: Index.cshtml */
/* Promotion type horizontal scroll buttons - matching ProviderGames design */
.promotion-types {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    cursor: grab;
    user-select: none;
    background-color: #000;
    padding: 10px 10px;
}
        
.promotion-types:active {
cursor: grabbing;
}
        
.promotion-types::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

.promotion-type-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #000;
    padding: 0.1rem 0.5rem 0.1rem 0.5rem;
    border: none;
    color: var(--primary-color) !important;
    font-size: 13px;
    white-space: nowrap;
}
        
.promotion-types.dragging .promotion-type-btn {
pointer-events: none;
}
        
.promotion-types:not(.dragging) .promotion-type-btn {
pointer-events: auto;
}

.promotion-type-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.promotion-type-btn.active {
    background-color: var(--primary-color);
    color: var(--secondary-color) !important;
    /*border: 0.3rem solid var(--primary-color, #ffcb05);*/
}
        
        /* Promotion cards */
.promotions-container {
padding: 0 15px 60px;
}
        
.promotion-grid {
display: grid;
grid-template-columns: 1fr;
}
        
.promotion-card {
background-color: transparent;
border-radius: 12px;
overflow: hidden;
box-shadow: none;
transition: transform 0.2s ease;
cursor: pointer;
}
        
.promotion-card:active {
transform: scale(0.98);
}
        
.promotion-card:hover {
transform: translateY(-3px);
}
        
.promotion-image {
width: 100%;
            /* height: 260px; */
object-fit: cover;
display: block;
border-radius: 12px;
}
        
.promotion-image-container {
position: relative;
}
        
.promotion-title-container {
padding: 10px 0;
text-align: center;
background: transparent;
}
        
.promotion-title {
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
        
        /* Empty state */
.no-promotions {
text-align: center;
padding: 40px 0;
color: #888;
}
.promotion-details-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 16px;
    overflow: hidden;
}