/* =============================================
   VRS Rental Plugin - Main Stylesheet
   Version: 2.1
   Author: Your Name
============================================= */

/* Base Reset & Typography */
.vrs-rental-plugin * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* Rental Button Styles */
.button.vrs-add-to-rent {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin-top: 10px;
}

.button.vrs-add-to-rent:hover {
    background-color: #3e8e41;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Popup Notification Styles */
#vrs-rental-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.vrs-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.vrs-popup-content {
    position: relative;
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    animation: vrsPopupFadeIn 0.3s ease-out;
}

@keyframes vrsPopupFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.vrs-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #777;
    transition: color 0.2s;
}

.vrs-popup-close:hover {
    color: #333;
}

.vrs-popup-message {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.vrs-popup-actions {
    display: flex;
    justify-content: center;
}

.vrs-view-cart-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-weight: 500;
}

.vrs-view-cart-btn:hover {
    background-color: #3e8e41;
}

/* Cart Page Styles */
.vrs-cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#vrs-cart-contents {
    margin: 20px 0;
}

.vrs-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.vrs-cart-item-details {
    flex: 1;
}

.vrs-cart-item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vrs-cart-qty {
    width: 50px;
    text-align: center;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.vrs-remove-item {
    background: #e74c3c;
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.vrs-remove-item:hover {
    background: #c0392b;
}

.vrs-cart-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.vrs-continue-shopping,
.vrs-proceed-to-rent {
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.vrs-continue-shopping {
    background: #7f8c8d;
    color: white;
}

.vrs-proceed-to-rent {
    background: #4CAF50;
    color: white;
}

.vrs-continue-shopping:hover,
.vrs-proceed-to-rent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Rental Form Styles */
#vrs-rental-form-wrapper {
    max-width: 800px;
    margin: 30px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

#vrs-rental-form h3 {
    margin: 25px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #4CAF50;
    color: #2c3e50;
}

.vrs-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.vrs-form-row label {
    flex: 1 1 calc(50% - 20px);
    min-width: 250px;
}

#vrs-rental-form label span {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

#vrs-rental-form input,
#vrs-rental-form textarea,
#vrs-rental-form select,
#vrs-rental-form input[type="date"],
#vrs-rental-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

#vrs-rental-form input:focus,
#vrs-rental-form textarea:focus {
    border-color: #4CAF50;
    outline: none;
}

#vrs-rental-form textarea {
    min-height: 120px;
    resize: vertical;
}

#vrs-rental-form button[type="submit"] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    width: 100%;
    font-weight: 500;
}

#vrs-rental-form button[type="submit"]:hover {
    background: #3e8e41;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Thank You Message */
#vrs-rental-thankyou {
    padding: 30px;
    background: #f8fff8;
    border: 1px solid #d1e7dd;
    border-radius: 8px;
    margin-top: 30px;
    line-height: 1.6;
}

#vrs-rental-thankyou h3 {
    color: #4CAF50;
    margin-bottom: 15px;
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vrs-form-row label {
        flex: 1 1 100%;
    }
    
    #vrs-rental-form-wrapper {
        padding: 20px;
    }
    
    .vrs-cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .vrs-cart-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .vrs-continue-shopping,
    .vrs-proceed-to-rent {
        width: 100%;
        text-align: center;
    }
}

/* Animation for AJAX loading */
@keyframes vrsSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vrs-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: vrsSpin 1s ease-in-out infinite;
    margin-right: 10px;
}/* ───────────────────────── MODAL BACKDROP ───────────────────────── */
#vrs-rental-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(26, 26, 26, 0.9);   /* charcoal overlay */
    display: none;                       /* will change to flex in JS */
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    font-family: 'Segoe UI', Roboto, sans-serif;
    animation: fadeIn 0.3s ease-in-out;
}

/* ───────────────────────── MODAL BOX ───────────────────────── */
#vrs-rental-modal .vrs-modal-box {
    background: #1a1a1a;                 /* deep charcoal */
    color: #fff;
    padding: 2rem 1.75rem;
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.7);
    text-align: center;
    position: relative;
    animation: popUp 0.3s ease-out;
}

/* Close (×) */
#vrs-rental-modal .vrs-modal-close{
    position:absolute;top:12px;right:15px;
    background:transparent;border:0;cursor:pointer;
    font-size:24px;color:#cfcfcf;font-weight:bold;
    transition:color .3s;
}
#vrs-rental-modal .vrs-modal-close:hover{color:#fff;}

/* Message */
#vrs-rental-modal p{font-size:18px;margin:0 0 1.5rem;line-height:1.4;color:#ededed;}
#vrs-rental-modal .vrs-modal-count{font-weight:700;font-size:22px;color:#fff;}

/* Buttons wrapper */
#vrs-rental-modal .vrs-modal-actions{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

/* Buttons */
#vrs-rental-modal .vrs-modal-actions .button{
    flex:1 1 45%;
    min-width:140px;
    padding:12px;
    font-size:16px;
    font-weight:600;
    border-radius:8px;
    border:2px solid transparent;
    background:#fff;
    color:#000;
    cursor:pointer;
    text-decoration:none;
    transition:all .3s ease;
}
#vrs-rental-modal .vrs-modal-actions .button:hover{
    background:transparent;
    color:#fff;
    border-color:#fff;
}

/* ───────────── Mobile tweaks ───────────── */
@media(max-width:480px){
    #vrs-rental-modal .vrs-modal-box{padding:1.5rem 1rem;}
    #vrs-rental-modal .vrs-modal-actions{flex-direction:column;}
    #vrs-rental-modal .vrs-modal-actions .button{flex:none;width:100%;}
}

/* ───────────── Animations ───────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popUp{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
/* === Fix unequal button sizes inside rental modal === */
.vrs-modal-actions a.button,
.vrs-modal-actions button.button {
    flex: 1 1 45%;
    min-width: 140px;
    padding: 12px 20px;
    background-color: #fff;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    box-sizing: border-box;
}

.vrs-modal-actions a.button:hover,
.vrs-modal-actions button.button:hover {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

@media (max-width: 480px) {
    .vrs-modal-actions {
        flex-direction: column;
    }
    .vrs-modal-actions a.button,
    .vrs-modal-actions button.button {
        width: 100%;
    }
}/* Force both buttons to be same width and aligned center */
.vrs-modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 25px;
    width: 100%;
}

.vrs-modal-actions a.button,
.vrs-modal-actions button.button {
    flex: 1 1 200px;
    max-width: 220px;
    min-width: 150px;
    padding: 12px 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    color: #111;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.vrs-modal-actions a.button:hover,
.vrs-modal-actions button.button:hover {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

/* Mobile responsive fix */
@media (max-width: 500px) {
    .vrs-modal-actions {
        flex-direction: column;
    }

    .vrs-modal-actions a.button,
    .vrs-modal-actions button.button {
        width: 100%;
        max-width: 100%;
    }
}
.vrs-modal-box {
    position: relative;
    max-width: 500px;
    margin: 50px auto;
    background: #1c1c1c;
    color: white;
    border-radius: 12px;
    padding: 30px 20px 20px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.vrs-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-weight: bold;
    transition: color 0.2s ease;
}

.vrs-modal-close:hover {
    color: #aaa;
}
:root{
 --charcoal:#2D2D2D;--charcoal-light:#3A3A3A;--white:#FFF;
 --accent:#F28C28;--gray:#B0B0B0;--border-radius:12px;
 --transition:all .3s ease;--font-family:'Poppins',sans-serif;
}
body{font-family:var(--font-family);}
.vrs-cart-container{
 max-width:1000px;margin:50px auto;background:var(--white);
 border-radius:var(--border-radius);padding:30px;
 box-shadow:0 0 20px rgba(0,0,0,.05);
}


.cart-header{display:flex;justify-content:space-between;align-items:center;
 color:var(--charcoal);font-size:24px;font-weight:600;margin-bottom:30px}
.cart-items{border-top:2px solid #eee;padding-top:20px}
.cart-item{display:flex;gap:20px;border-bottom:1px solid #eee;padding:20px 0}
.item-image{width:120px;height:120px;border-radius:var(--border-radius);object-fit:cover}
.item-details{flex:1}
.item-name{font-size:18px;font-weight:500;color:var(--charcoal)}
.item-price span{font-size:14px;color:var(--gray)}
.item-controls{display:flex;align-items:center;gap:15px;margin-top:10px}
.quantity-control{display:flex;align-items:center;gap:10px}
.quantity-btn{background:var(--charcoal-light);color:var(--white);border:none;padding:6px 10px;cursor:pointer;border-radius:5px}
.quantity-input{width:50px;padding:5px;text-align:center;border:1px solid #ccc;border-radius:5px}
.remove-item{background:none;border:none;color:#ff3b3b;cursor:pointer;font-size:14px}
.rental-period{margin-top:10px}
.date-picker input{padding:5px;border:1px solid #ccc;border-radius:var(--border-radius);margin-right:10px}
.cart-summary{margin-top:30px;background:#f9f9f9;padding:20px;border-radius:var(--border-radius)}
.summary-title{font-size:20px;font-weight:600;margin-bottom:15px;color:var(--charcoal)}
.summary-row{display:flex;justify-content:space-between;padding:5px 0;font-size:16px;color:var(--charcoal-light)}
.summary-total{font-weight:600;font-size:18px;color:var(--charcoal)}
.checkout-btn{background:var(--charcoal);color:var(--white);border:none;padding:12px 25px;border-radius:var(--border-radius);font-size:16px;margin-top:20px;width:100%;cursor:pointer;transition:var(--transition)}
.checkout-btn:hover{background:var(--charcoal-light)}
.empty-cart{text-align:center;padding:50px 0;color:var(--gray)}
.continue-shopping{display:inline-block;margin-top:20px;text-decoration:none;color:var(--accent);font-weight:600}