/* ==========================================
   BOOKING SUCCESS & CONFIRMATION
   Success Pages, Confirmation Details, Status
   ========================================== */

/* ==========================================
   SUCCESS ICON
   ========================================== */
.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--success) 0%, var(--accent) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 2.5rem;
    animation: successScale 0.6s ease-out;
    box-shadow: 0 6px 24px rgba(78, 205, 196, 0.3);
}

.success-icon.cancelled {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 6px 24px rgba(220, 53, 69, 0.3);
}

@keyframes successScale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================
   SUCCESS MESSAGE
   ========================================== */
.success-message {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.success-message h1 {
    color: var(--success);
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.success-message p {
    font-size: 1.125rem;
    color: var(--gray-700);
}

/* ==========================================
   CONFIRMATION PAGE
   ========================================== */
.confirmation-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.confirmation-icon {
    margin-bottom: var(--spacing-lg);
}

.confirmation-icon i,
.cancel-icon i {
    font-size: 4rem;
}

.cancel-icon {
    margin-bottom: var(--spacing-md);
    animation: pulse 2s ease-in-out infinite;
}

.cancel-icon i {
    color: #dc3545;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.alert i.icon-lg {
    font-size: 1.5rem;
}

.alert i.icon-md {
    font-size: 1.25rem;
}

/* ==========================================
   BOOKING REFERENCE
   ========================================== */
.booking-reference {
    background: rgba(78, 205, 196, 0.1);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.reference-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.reference-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.reference-hint {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* ==========================================
   INFO SECTION
   ========================================== */
.info-section {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

.info-section h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.info-section h3 i {
    color: var(--accent);
}

/* ==========================================
   CONFIRMATION SECTIONS
   ========================================== */
.confirmation-section {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.section-header {
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--gray-100);
    margin-bottom: var(--spacing-lg);
}

.section-header h4 {
    color: var(--gray-900);
    font-size: 1.125rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-body {
    padding: 0;
}

.info-item {
    margin-bottom: var(--spacing-md);
}

.info-item:last-child {
    margin-bottom: 0;
}

/* ==========================================
   BOOKING DETAILS CARD
   ========================================== */
.booking-details-card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

.booking-details-header {
    background-color: var(--gray-100);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.booking-details-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--gray-900);
}

.booking-details-body {
    padding: var(--spacing-xl);
}

/* ==========================================
   DETAIL ROWS
   ========================================== */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--gray-100);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 500;
    color: var(--gray-600);
    font-size: 0.9375rem;
}

.detail-value {
    font-weight: 600;
    color: var(--gray-900);
    text-align: right;
}

/* ==========================================
   DATE CARDS
   ========================================== */
.date-card {
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.date-card i {
    font-size: 2rem;
}

/* ==========================================
   ROOM ITEMS
   ========================================== */
.room-item {
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.room-item-simple {
    transition: background-color 0.2s ease;
}

.room-item-simple:hover {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
}

.room-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.room-badges .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
}

.placeholder-image {
    background: var(--gray-100);
    border: 2px dashed var(--gray-300);
    height: 120px;
}

.placeholder-image i {
    font-size: 3rem;
}

.room-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.room-details {
    flex: 1;
}

.room-name {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.room-info {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.price-summary {
    text-align: right;
}

.price-summary .price-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.price-summary .price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.price-details {
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ==========================================
   TOTAL SECTION
   ========================================== */
.total-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-top: var(--spacing-lg);
    box-shadow: 0 8px 32px rgba(93, 78, 140, 0.3);
}

.total-header {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: var(--spacing-md);
}

.total-header h5 {
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 600;
}

.total-body {
    padding: 0;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.price-line.total {
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.125rem;
    color: var(--white);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.price-line.total .h3 {
    color: var(--white);
}

.total-section .total-amount {
    font-size: 2.5rem;
    font-weight: 700;
}

.total-section h4 {
    color: var(--white);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================
   INFO CARDS
   ========================================== */
.info-card {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform var(--transition-base);
}

.info-card:hover {
    transform: translateY(-2px);
}

.info-card-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.info-card h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--gray-900);
}

.info-card p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--gray-600);
}

.info-card-styled {
    background: var(--gray-50);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.info-card-styled h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
}

.info-card-styled .info-item {
    margin-bottom: var(--spacing-md);
}

.info-card-styled .info-item:last-child {
    margin-bottom: 0;
}

.info-card-styled .info-item small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600);
}

.info-card-styled .info-item .fw-semibold {
    font-size: 0.9375rem;
    color: var(--gray-900);
}

/* Themed Info Cards */
.payment-card {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.2) 100%);
    border: 1px solid var(--accent);
}

.payment-card i {
    color: var(--accent);
}

.status-card {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.1) 0%, rgba(6, 214, 160, 0.2) 100%);
    border: 1px solid var(--success);
}

.status-card i {
    color: var(--success);
}

.contact-card {
    background: linear-gradient(135deg, rgba(93, 78, 140, 0.1) 0%, rgba(93, 78, 140, 0.2) 100%);
    border: 1px solid var(--primary);
}

.contact-card i {
    color: var(--primary);
}

.cancel-card {
    background: linear-gradient(135deg, rgba(255, 193, 102, 0.1) 0%, rgba(255, 193, 102, 0.2) 100%);
    border: 1px solid var(--warning);
}

.cancel-card i {
    color: var(--warning);
}

/* ==========================================
   NEXT STEPS
   ========================================== */
.next-steps {
    background-color: rgba(166, 206, 57, 0.1);
    border: 1px solid rgba(166, 206, 57, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.next-steps h4 {
    color: var(--success);
    margin-bottom: var(--spacing-md);
}

.next-steps ul {
    margin: 0;
    padding-left: 1.5rem;
}

.next-steps li {
    margin-bottom: var(--spacing-sm);
    color: var(--gray-700);
}

/* ==========================================
   SUCCESS ACTIONS
   ========================================== */
.success-actions {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

.success-actions .btn {
    margin: 0 var(--spacing-sm);
}

/* ==========================================
   MISC SUCCESS PAGE ELEMENTS
   ========================================== */
.sticky-sidebar {
    position: sticky;
    top: 20px;
}

.success-container {
    text-align: center;
    padding: var(--spacing-3xl) 0;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    /* Container - Balanced spacing */
    .booking-container {
        padding: var(--spacing-md) 0 !important;
    }
    
    .booking-container.py-5 {
        padding-top: var(--spacing-md) !important;
        padding-bottom: var(--spacing-md) !important;
    }
    
    .booking-container .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Success Header */
    .success-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
        box-shadow: 0 4px 16px rgba(78, 205, 196, 0.25);
        margin-bottom: 0.75rem !important;
    }
    
    .booking-container h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem !important;
    }
    
    .booking-container .text-muted {
        font-size: 0.875rem;
    }
    
    /* Booking Reference */
    .booking-reference {
        padding: var(--spacing-md);
        margin-bottom: 1rem !important;
    }
    
    .reference-label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    .reference-number {
        font-size: 1.375rem;
    }
    
    .reference-hint {
        font-size: 0.6875rem;
    }
    
    /* Confirmation Sections */
    .confirmation-section {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .section-header h4 {
        font-size: 1rem;
    }
    
    .section-header i {
        font-size: 1.125rem;
    }
    
    .section-body {
        padding: var(--spacing-md);
    }
    
    /* Info Items */
    .info-item {
        margin-bottom: var(--spacing-sm);
    }
    
    .info-item small {
        font-size: 0.6875rem;
    }
    
    .info-item .fw-semibold {
        font-size: 0.875rem;
    }
    
    /* Total Section */
    .total-section {
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
    }
    
    .total-header h5 {
        font-size: 0.9375rem;
        padding-bottom: var(--spacing-xs);
    }
    
    .total-body {
        padding: 0;
    }
    
    .price-line {
        font-size: 0.8125rem;
        margin-bottom: var(--spacing-xs) !important;
    }
    
    .price-line.total {
        font-size: 0.9375rem;
        padding-top: var(--spacing-sm) !important;
        margin-top: var(--spacing-sm) !important;
    }
    
    .price-line.total .h3 {
        font-size: 1.375rem !important;
    }
    
    .price-line.total .fw-bold {
        font-size: 0.875rem;
    }
    
    .total-section .total-amount {
        font-size: 1.75rem;
    }
    
    /* Room Items */
    .room-item {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md) !important;
    }
    
    .room-item img {
        height: 100px;
    }
    
    .room-name {
        font-size: 1rem;
        margin-bottom: var(--spacing-xs) !important;
    }
    
    .room-badges .badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        margin-right: var(--spacing-xs) !important;
    }
    
    .room-item p {
        font-size: 0.8125rem;
    }
    
    .price-summary {
        margin-top: var(--spacing-sm);
    }
    
    .price-summary .small {
        font-size: 0.75rem;
    }
    
    .price-details {
        font-size: 0.75rem;
    }
    
    .total-price .h4 {
        font-size: 1.125rem !important;
    }
    
    /* Info Cards */
    .info-card {
        padding: var(--spacing-sm);
    }
    
    .info-card-icon {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .info-card h6 {
        font-size: 0.75rem;
        margin-bottom: 0.125rem;
    }
    
    .info-card p {
        font-size: 0.6875rem;
    }
    
    /* Alerts */
    .alert {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8125rem;
    }
    
    .alert i {
        font-size: 0.875rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .success-actions .btn {
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    /* Dropdown Button */
    .dropdown .btn-sm {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .dropdown-menu {
        font-size: 0.8125rem;
    }
    
    .dropdown-item i {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    /* Extra Small Devices - Balanced */
    .booking-container {
        padding: 0.5rem 0 !important;
    }
    
    .booking-container.py-5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .booking-container .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .success-icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
        margin-bottom: 0.5rem !important;
    }
    
    .booking-container h1 {
        font-size: 1.375rem;
        margin-bottom: 0.375rem !important;
    }
    
    .booking-reference {
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.75rem !important;
    }
    
    .reference-number {
        font-size: 1.125rem;
    }
    
    /* Sections */
    .confirmation-section {
        margin-bottom: 0.625rem !important;
    }
    
    .section-body {
        padding: 0.625rem 0.75rem !important;
    }
    
    /* Total Section */
    .total-section {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .total-header h5 {
        font-size: 0.875rem;
    }
    
    .price-line.total .h3 {
        font-size: 1.125rem !important;
    }
    
    .price-line.total .fw-bold {
        font-size: 0.8125rem;
    }
    
    /* Room Items */
    .room-item {
        padding: var(--spacing-sm);
    }
    
    .room-item img {
        height: 90px;
    }
    
    .total-price .h4 {
        font-size: 1rem !important;
    }
    
    /* Info Cards */
    .info-card {
        padding: 0.375rem;
    }
    
    .info-card-icon {
        font-size: 1.25rem;
    }
    
    .info-card h6 {
        font-size: 0.6875rem;
    }
    
    .info-card p {
        font-size: 0.625rem;
    }
}