/* Cosmic AV Rental - Frontend Styles */
:root {
    --cosmic-primary: #1a1a2e;
    --cosmic-secondary: #16213e;
    --cosmic-accent: #e94560;
    --cosmic-light: #f8f9fa;
    --cosmic-success: #28a745;
    --cosmic-warning: #ffc107;
    --cosmic-danger: #dc3545;
    --cosmic-text: #333;
    --cosmic-muted: #6c757d;
    --cosmic-border: #dee2e6;
    --cosmic-radius: 8px;
    --cosmic-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Date Picker */
.cosmic-date-picker { background: var(--cosmic-light); padding: 20px; border-radius: var(--cosmic-radius); margin-bottom: 30px; }
.cosmic-date-picker h3 { margin: 0 0 15px; font-size: 18px; color: var(--cosmic-primary); }
.date-fields { display: flex; gap: 20px; flex-wrap: wrap; }
.date-field { flex: 1; min-width: 200px; }
.date-field label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; }
.date-field input { width: 100%; padding: 12px; border: 1px solid var(--cosmic-border); border-radius: var(--cosmic-radius); font-size: 16px; }
.date-summary { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--cosmic-border); }
.days-count { font-size: 18px; font-weight: 600; color: var(--cosmic-primary); }
.discount-info { display: inline-block; margin-left: 15px; background: var(--cosmic-success); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 14px; }

/* Filters */
.catalog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; }
.filter-btn { padding: 10px 20px; border: 1px solid var(--cosmic-border); background: #fff; border-radius: 25px; cursor: pointer; transition: all 0.2s; font-size: 14px; }
.filter-btn:hover, .filter-btn.active { background: var(--cosmic-primary); color: #fff; border-color: var(--cosmic-primary); }

/* Equipment Grid */
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.equipment-card { background: #fff; border-radius: var(--cosmic-radius); box-shadow: var(--cosmic-shadow); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.equipment-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
.equipment-card.hidden { display: none; }
.equipment-image { aspect-ratio: 4/3; overflow: hidden; background: var(--cosmic-light); }
.equipment-image img { width: 100%; height: 100%; object-fit: cover; }
.no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--cosmic-muted); }
.no-image .dashicons { font-size: 48px; width: 48px; height: 48px; }
.equipment-info { padding: 20px; }
.equipment-brand { font-size: 12px; text-transform: uppercase; color: var(--cosmic-muted); letter-spacing: 0.5px; }
.equipment-title { margin: 5px 0 10px; font-size: 18px; color: var(--cosmic-primary); }
.equipment-excerpt { font-size: 14px; color: var(--cosmic-muted); margin-bottom: 15px; line-height: 1.5; }
.equipment-price { margin-bottom: 15px; }
.equipment-price .price { font-size: 24px; font-weight: 700; color: var(--cosmic-accent); }
.equipment-price .per-day { font-size: 14px; color: var(--cosmic-muted); }
.equipment-actions { display: flex; gap: 10px; }

/* Bundles */
.bundles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }
.bundle-card { background: #fff; border-radius: var(--cosmic-radius); box-shadow: var(--cosmic-shadow); overflow: hidden; }
.bundle-image { position: relative; aspect-ratio: 16/9; background: var(--cosmic-light); }
.bundle-image img { width: 100%; height: 100%; object-fit: cover; }
.bundle-badge { position: absolute; top: 15px; right: 15px; background: var(--cosmic-accent); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.bundle-info { padding: 25px; }
.bundle-title { margin: 0 0 10px; font-size: 22px; color: var(--cosmic-primary); }
.bundle-contents { margin: 15px 0; padding: 15px; background: var(--cosmic-light); border-radius: var(--cosmic-radius); }
.bundle-contents strong { display: block; margin-bottom: 10px; font-size: 14px; }
.bundle-contents ul { margin: 0; padding-left: 20px; }
.bundle-contents li { font-size: 14px; color: var(--cosmic-text); margin-bottom: 5px; }
.bundle-pricing { margin: 20px 0; }
.regular-price { text-decoration: line-through; color: var(--cosmic-muted); font-size: 16px; margin-right: 10px; }
.bundle-price { font-size: 28px; font-weight: 700; color: var(--cosmic-accent); }

/* Buttons */
.btn-add-to-cart, .btn-view-details, .btn-primary, .btn-secondary, .btn-checkout { padding: 12px 24px; border: none; border-radius: var(--cosmic-radius); cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; text-decoration: none; display: inline-block; text-align: center; }
.btn-add-to-cart, .btn-primary, .btn-checkout { background: var(--cosmic-accent); color: #fff; }
.btn-add-to-cart:hover, .btn-primary:hover, .btn-checkout:hover { background: #d63350; color: #fff; }
.btn-view-details, .btn-secondary { background: transparent; border: 1px solid var(--cosmic-border); color: var(--cosmic-text); }
.btn-view-details:hover, .btn-secondary:hover { background: var(--cosmic-light); }
.btn-bundle { width: 100%; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cart */
.cosmic-cart { max-width: 1000px; margin: 0 auto; }
.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty .dashicons { font-size: 64px; width: 64px; height: 64px; color: var(--cosmic-muted); margin-bottom: 20px; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.cart-table th, .cart-table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--cosmic-border); }
.cart-table th { background: var(--cosmic-light); font-weight: 600; font-size: 14px; }
.item-name { display: flex; align-items: center; gap: 15px; }
.item-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: var(--cosmic-radius); }
.item-name small { display: block; color: var(--cosmic-muted); font-size: 12px; margin-top: 5px; }
.qty-input { width: 60px; padding: 8px; border: 1px solid var(--cosmic-border); border-radius: var(--cosmic-radius); text-align: center; }
.btn-remove { background: none; border: none; color: var(--cosmic-danger); font-size: 24px; cursor: pointer; padding: 5px 10px; }

/* Cart Totals */
.cart-totals { background: var(--cosmic-light); padding: 25px; border-radius: var(--cosmic-radius); margin-bottom: 25px; }
.totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 16px; }
.totals-row.discount { color: var(--cosmic-success); }
.totals-row.total { border-top: 2px solid var(--cosmic-border); padding-top: 15px; margin-top: 10px; font-size: 20px; font-weight: 700; }
.cart-actions { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; }

/* Checkout */
.cosmic-checkout { max-width: 1100px; margin: 0 auto; }
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-section { background: #fff; padding: 25px; border-radius: var(--cosmic-radius); box-shadow: var(--cosmic-shadow); margin-bottom: 25px; }
.checkout-section h3 { margin: 0 0 20px; padding-bottom: 15px; border-bottom: 1px solid var(--cosmic-border); color: var(--cosmic-primary); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.form-group .required { color: var(--cosmic-danger); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--cosmic-border); border-radius: var(--cosmic-radius); font-size: 16px; box-sizing: border-box; }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-checkbox label { display: flex; align-items: flex-start; gap: 10px; font-weight: normal; }
.form-checkbox input { width: auto; margin-top: 3px; }

/* Order Summary */
.order-summary { background: #fff; padding: 25px; border-radius: var(--cosmic-radius); box-shadow: var(--cosmic-shadow); position: sticky; top: 30px; }
.order-summary h3 { margin: 0 0 20px; color: var(--cosmic-primary); }
.summary-dates { background: var(--cosmic-light); padding: 15px; border-radius: var(--cosmic-radius); margin-bottom: 20px; }
.summary-dates strong { display: block; font-size: 14px; margin-bottom: 5px; }
.summary-dates small { color: var(--cosmic-muted); }
.summary-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--cosmic-border); font-size: 14px; }
.summary-totals { margin: 20px 0; }
.btn-checkout { width: 100%; padding: 16px; font-size: 16px; }
.secure-payment { text-align: center; margin-top: 15px; font-size: 13px; color: var(--cosmic-muted); }
.secure-payment .dashicons { color: var(--cosmic-success); vertical-align: middle; }
.checkout-errors { background: #f8d7da; color: #721c24; padding: 15px; border-radius: var(--cosmic-radius); margin-top: 20px; }

/* Confirmation */
.cosmic-confirmation { max-width: 700px; margin: 0 auto; text-align: center; }
.confirmation-header { padding: 40px 20px; }
.confirmation-header .dashicons { font-size: 64px; width: 64px; height: 64px; color: var(--cosmic-success); margin-bottom: 20px; }
.confirmation-header h2 { margin: 0 0 10px; color: var(--cosmic-primary); }
.order-number { font-size: 18px; color: var(--cosmic-muted); }
.confirmation-message { background: var(--cosmic-light); padding: 20px; border-radius: var(--cosmic-radius); margin-bottom: 30px; }
.confirmation-details { text-align: left; background: #fff; padding: 30px; border-radius: var(--cosmic-radius); box-shadow: var(--cosmic-shadow); }
.detail-section { padding: 20px 0; border-bottom: 1px solid var(--cosmic-border); }
.detail-section:last-child { border-bottom: none; }
.detail-section h3 { margin: 0 0 10px; font-size: 16px; color: var(--cosmic-primary); }
.order-items-list { list-style: none; padding: 0; margin: 0; }
.order-items-list li { display: flex; justify-content: space-between; padding: 8px 0; }
.detail-section.total { text-align: center; }
.total-amount { font-size: 32px; font-weight: 700; color: var(--cosmic-accent); }

/* Modal */
.cosmic-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.modal-content { position: relative; background: #fff; border-radius: var(--cosmic-radius); max-width: 800px; max-height: 90vh; overflow-y: auto; margin: 20px; width: 100%; }
.modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 30px; cursor: pointer; color: var(--cosmic-muted); z-index: 10; }
.modal-body { padding: 30px; }
.equipment-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 600px) { .equipment-detail { grid-template-columns: 1fr; } }
.detail-image img { width: 100%; border-radius: var(--cosmic-radius); }
.detail-content h2 { margin: 0 0 10px; }
.brand-model { color: var(--cosmic-muted); font-size: 14px; }
.detail-price { font-size: 28px; font-weight: 700; color: var(--cosmic-accent); margin: 20px 0; }
.detail-price span { font-size: 16px; font-weight: normal; color: var(--cosmic-muted); }
.detail-specs ul { padding-left: 20px; }
.detail-specs li { margin-bottom: 5px; }

/* Toast */
.cosmic-toast { position: fixed; bottom: 30px; right: 30px; background: var(--cosmic-primary); color: #fff; padding: 15px 25px; border-radius: var(--cosmic-radius); box-shadow: 0 5px 20px rgba(0,0,0,0.3); z-index: 10000; animation: slideIn 0.3s ease; }
.cosmic-toast.success { background: var(--cosmic-success); }
.cosmic-toast.error { background: var(--cosmic-danger); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Divi Builder Integration - Minimal base styles */
/* These provide structure while letting Divi's styling system handle colors, fonts, etc. */
.et-db #et-boc .cosmic-divi-catalog .equipment-grid,
.et-db #et-boc .cosmic-divi-bundles .bundles-grid,
.et-db #et-boc .cosmic-divi-equipment-grid .equipment-grid { display: grid; }

.et-db #et-boc .cosmic-divi-catalog .equipment-card,
.et-db #et-boc .cosmic-divi-bundles .bundle-card,
.et-db #et-boc .cosmic-divi-equipment-grid .equipment-card { overflow: hidden; transition: all 0.3s ease; }

.et-db #et-boc .cosmic-divi-catalog .equipment-image,
.et-db #et-boc .cosmic-divi-bundles .bundle-image { overflow: hidden; position: relative; }

.et-db #et-boc .cosmic-divi-catalog .equipment-image img,
.et-db #et-boc .cosmic-divi-bundles .bundle-image img { width: 100%; height: 100%; object-fit: cover; }

/* Allow Divi button module to override */
.et-db #et-boc .cosmic-divi-catalog .btn-add-to-cart,
.et-db #et-boc .cosmic-divi-catalog .btn-view-details,
.et-db #et-boc .cosmic-divi-bundles .btn-add-to-cart { cursor: pointer; transition: all 0.2s; }

/* Date picker base structure */
.et-db #et-boc .cosmic-divi-date-picker .date-fields { display: flex; gap: 20px; flex-wrap: wrap; }
.et-db #et-boc .cosmic-divi-date-picker .date-field { flex: 1; min-width: 180px; }
.et-db #et-boc .cosmic-divi-date-picker input[type="date"] { width: 100%; padding: 12px; }

/* Cart base structure */
.et-db #et-boc .cosmic-divi-cart .cart-table { width: 100%; border-collapse: collapse; }
.et-db #et-boc .cosmic-divi-cart .cart-table th,
.et-db #et-boc .cosmic-divi-cart .cart-table td { padding: 15px; text-align: left; }
.et-db #et-boc .cosmic-divi-cart .cart-actions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: space-between; }

/* Checkout grid structure */
.et-db #et-boc .cosmic-divi-checkout .checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; }
@media (max-width: 980px) { .et-db #et-boc .cosmic-divi-checkout .checkout-grid { grid-template-columns: 1fr; } }
.et-db #et-boc .cosmic-divi-checkout .form-group { margin-bottom: 20px; }
.et-db #et-boc .cosmic-divi-checkout .form-group input,
.et-db #et-boc .cosmic-divi-checkout .form-group select,
.et-db #et-boc .cosmic-divi-checkout .form-group textarea { width: 100%; padding: 12px; box-sizing: border-box; }

/* Order summary sticky */
.et-db #et-boc .cosmic-divi-checkout .order-summary { position: sticky; top: 30px; }

/* Confirmation center */
.et-db #et-boc .cosmic-divi-confirmation { text-align: center; }
.et-db #et-boc .cosmic-divi-confirmation .confirmation-header .dashicons { font-size: 64px; width: 64px; height: 64px; }
.et-db #et-boc .cosmic-divi-confirmation .confirmation-details { text-align: left; }