/* ==========================================
   Ultra Builder Pro — Frontend Styles
   ========================================== */

/* Container */
.ubp-builder-content { width: 100%; }
.ubp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Sections & Columns */
.ubp-section { width: 100%; }
.ubp-section-inner { display: flex; flex-wrap: wrap; }
.ubp-column { box-sizing: border-box; padding: 0 10px; }
.ubp-col-100 { width: 100%; }
.ubp-col-50  { width: 50%; }
.ubp-col-33  { width: 33.333%; }
.ubp-col-25  { width: 25%; }
.ubp-col-66  { width: 66.666%; }
.ubp-col-75  { width: 75%; }

/* Widgets */
.ubp-widget { margin-bottom: 20px; }

/* Heading */
.ubp-heading { line-height: 1.3; }

/* Text */
.ubp-text p:last-child { margin-bottom: 0; }

/* Image */
.ubp-image { max-width: 100%; height: auto; display: block; }

/* Button */
.ubp-button { display: inline-block; padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px; cursor: pointer; border: 2px solid transparent; transition: all .2s; }
.ubp-btn-primary { background: #0073aa; color: #fff; border-color: #0073aa; }
.ubp-btn-primary:hover { background: #005d8c; color: #fff; }
.ubp-btn-secondary { background: transparent; color: #0073aa; border-color: #0073aa; }
.ubp-btn-secondary:hover { background: #0073aa; color: #fff; }
.ubp-btn-outline { background: transparent; color: inherit; border-color: currentColor; }

/* Video */
.ubp-video-wrap { position: relative; padding-top: 56.25%; }
.ubp-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Divider */
.ubp-divider { border: none; border-top: 1px solid #ddd; margin: 10px 0; }
.ubp-divider-dashed { border-top-style: dashed; }
.ubp-divider-dotted { border-top-style: dotted; }
.ubp-divider-double { border-top: 3px double #ddd; }

/* Testimonial */
.ubp-testimonial { border-left: 4px solid #0073aa; padding: 16px 20px; margin: 0; background: #f9f9f9; border-radius: 0 6px 6px 0; }
.ubp-testimonial p { font-size: 16px; font-style: italic; margin: 0 0 10px; }
.ubp-testimonial cite { font-style: normal; font-weight: 700; }
.ubp-testimonial cite span { font-weight: 400; color: #777; margin-left: 6px; }

/* Counter */
.ubp-counter { text-align: center; padding: 20px; }
.ubp-counter-number { font-size: 48px; font-weight: 700; color: #0073aa; display: block; }
.ubp-counter p { margin: 8px 0 0; color: #555; }

/* Progress Bar */
.ubp-progress { margin-bottom: 16px; }
.ubp-progress-label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.ubp-progress-bar { background: #e0e0e0; border-radius: 99px; overflow: hidden; height: 10px; }
.ubp-progress-fill { height: 100%; background: #0073aa; border-radius: 99px; transition: width 1.2s ease; }

/* Icon */
.ubp-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Map */
.ubp-map iframe { width: 100%; border: 0; display: block; }

/* ==========================================
   Popup Styles
   ========================================== */
.ubp-popup { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; }
.ubp-popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); cursor: pointer; }
.ubp-popup-inner { position: absolute; background: #fff; border-radius: 8px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ubp-popup-center .ubp-popup-inner  { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.ubp-popup-top .ubp-popup-inner     { top: 0; left: 50%; transform: translateX(-50%); border-radius: 0 0 8px 8px; }
.ubp-popup-bottom .ubp-popup-inner  { bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 8px 8px 0 0; }
.ubp-popup-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 24px; cursor: pointer; color: #555; line-height: 1; padding: 0; }
.ubp-popup-close:hover { color: #000; }

/* Animations */
.ubp-popup-fade   { opacity: 0; transition: opacity .3s; }
.ubp-popup-fade.ubp-popup-visible { opacity: 1; }
.ubp-popup-slide  { transform: translateY(-30px); opacity: 0; transition: opacity .3s, transform .3s; }
.ubp-popup-slide.ubp-popup-visible { opacity: 1; transform: none; }
.ubp-popup-zoom   { transform: scale(.9); opacity: 0; transition: opacity .3s, transform .3s; }
.ubp-popup-zoom.ubp-popup-visible  { opacity: 1; transform: none; }

/* ==========================================
   Form Styles
   ========================================== */
.ubp-form-wrap { max-width: 680px; margin: 0 auto; }
.ubp-form { display: flex; flex-wrap: wrap; gap: 12px; }
.ubp-field { box-sizing: border-box; }
.ubp-col-100 { width: 100%; }
.ubp-col-50  { width: calc(50% - 6px); }
.ubp-col-33  { width: calc(33.333% - 8px); }
.ubp-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.ubp-required { color: #d63638; }
.ubp-input { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; box-sizing: border-box; transition: border .2s; }
.ubp-input:focus { outline: none; border-color: #0073aa; box-shadow: 0 0 0 2px rgba(0,115,170,.2); }
textarea.ubp-input { resize: vertical; }
.ubp-checkbox-label, .ubp-radio-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; font-size: 14px; }
.ubp-form-submit { width: 100%; }
.ubp-form-messages { width: 100%; }
.ubp-form-messages .ubp-success { background: #d4edda; color: #155724; padding: 12px 16px; border-radius: 4px; }
.ubp-form-messages .ubp-error   { background: #f8d7da; color: #721c24; padding: 12px 16px; border-radius: 4px; }

/* ==========================================
   WooCommerce Builder Styles
   ========================================== */
.ubp-products-grid { display: grid; gap: 20px; }
.ubp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ubp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ubp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ubp-product-card { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: box-shadow .2s; }
.ubp-product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.ubp-product-img-wrap { display: block; position: relative; overflow: hidden; }
.ubp-product-img-wrap img { width: 100%; height: 200px; object-fit: cover; transition: transform .3s; }
.ubp-product-card:hover img { transform: scale(1.05); }
.ubp-product-info { padding: 16px; }
.ubp-product-title { margin: 0 0 8px; font-size: 15px; }
.ubp-product-title a { text-decoration: none; color: inherit; }
.ubp-product-price { margin-bottom: 12px; font-weight: 700; color: #0073aa; }
.ubp-badge { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; z-index: 1; }
.ubp-badge-sale     { background: #d63638; color: #fff; }
.ubp-badge-featured { background: #dba617; color: #fff; }

/* Mini Cart */
.ubp-mini-cart { padding: 16px; background: #f9f9f9; border-radius: 6px; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 768px) {
    .ubp-col-50, .ubp-col-33, .ubp-col-25, .ubp-col-66, .ubp-col-75 { width: 100% !important; }
    .ubp-cols-3, .ubp-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .ubp-popup-inner { width: 90% !important; }
}
@media (max-width: 480px) {
    .ubp-cols-2, .ubp-cols-3, .ubp-cols-4 { grid-template-columns: 1fr; }
}