/* ═══════════════════════════════════════════════════════════════════
   Pricing Calculator — WordPress / Elementor compatible
   All classes prefixed with .pc- to avoid theme conflicts.
   ═══════════════════════════════════════════════════════════════════ */

/* Reset scoped to our component */
.pricing-calculator,
.pricing-calculator *,
.pricing-calculator *::before,
.pricing-calculator *::after {
    box-sizing: border-box !important;
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.pricing-calculator {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 860px;
    margin: 20px auto;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

/* Elementor: let Elementor control width */
.elementor-widget-container .pricing-calculator,
.elementor-element .pricing-calculator {
    max-width: 100% !important;
    margin: 0 !important;
}

/* ── Header (collapsible trigger) ────────────────────────────────── */
.pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.pc-header:hover { background: #efefef; }

.pc-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.pc-chevron {
    width: 22px;
    height: 22px;
    fill: #666;
    transition: transform 0.28s ease;
    flex-shrink: 0;
}
.pc-chevron.rotated { transform: rotate(180deg); }

/* ── Body ────────────────────────────────────────────────────────── */
.pc-body {
    padding: 0;
    /* shown by default; JS hides via slideToggle */
}

.pc-desc {
    margin: 0 !important;
    padding: 20px 24px 16px !important;
    color: #555;
    font-size: 14px;
    line-height: 1.65;
}

.pc-divider {
    border: none !important;
    border-top: 1px solid #e8e8e8 !important;
    margin: 0 24px !important;
}

/* ── CALCULATOR TYPE: controls ───────────────────────────────────── */
.pc-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 20px 24px;
}

.pc-field {
    flex: 1;
    min-width: 140px;
}

.pc-field label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
}

.pc-field select {
    width: 100% !important;
    padding: 8px 32px 8px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23666' d='M2 4l4 4 4-4z'/></svg>") no-repeat right 10px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
}
.pc-field select:focus {
    outline: none !important;
    border-color: #137a3f !important;
    box-shadow: 0 0 0 2px rgba(19,122,63,.12) !important;
}

.pc-calc-btn {
    background: #0d0f3e !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 22px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap;
    transition: background 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.pc-calc-btn:hover  { background: #0d0f3e !important; }
.pc-calc-btn:disabled { opacity: 0.65; cursor: not-allowed !important; }

/* ── CALCULATOR TYPE: results table ──────────────────────────────── */
.pc-table-wrap {
    padding: 0 24px 24px;
}

.pc-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
}

.pc-table th {
    text-align: left !important;
    padding: 10px 12px !important;
    background: #f7f7f7 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.pc-table td {
    padding: 11px 12px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #333 !important;
}

.pc-table tr:last-child td { border-bottom: none !important; }

.pc-empty {
    text-align: center !important;
    padding: 32px 12px !important;
    color: #888 !important;
}

/* Price cell with optional red dot */
.pc-price-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.pc-dot {
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── FIXED TYPE ──────────────────────────────────────────────────── */
.pc-fixed {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pc-fixed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Pill badges — matches the screenshot exactly */
.pc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.pc-pill strong { font-weight: 700; }

/* "You pay" — blue background like the screenshot */
.pc-pill--price {
    background: #1565c0;
    color: #fff;
}

/* "Delivery time" — darker blue */
.pc-pill--delivery {
    background: #1a237e;
    color: #fff;
}

/* ── Place Order button (shared: fixed type + table rows) ────────── */
.pc-order-btn {
    background: #0d0f3e !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 28px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.pc-order-btn:hover { background: #0d0f3e !important; }

/* In the table, smaller */
.pc-table .pc-order-btn {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pc-controls { flex-direction: column; }
    .pc-field { min-width: 100%; }
    .pc-calc-btn { width: 100% !important; }

    .pc-header,
    .pc-desc,
    .pc-controls,
    .pc-table-wrap,
    .pc-fixed { padding-left: 16px; padding-right: 16px; }

    .pc-table th,
    .pc-table td { padding: 8px !important; font-size: 12px !important; }

    .pc-fixed-pills { flex-direction: column; align-items: stretch; }
    .pc-pill { justify-content: center; }
}

/* ══ ORDER FLOW STYLES ════════════════════════════════════════════════════════════════ */

/* ── Reset Elementor interference on order-flow container ──────── */
.order-flow-container,
.order-flow-container *,
.elementor-widget-container .order-flow-container,
.elementor-widget-container .order-flow-container * {
    box-sizing: border-box;
}

/* Cancel out Elementor section padding that pushes the layout */
.elementor-widget-shortcode .order-flow-container,
.elementor-widget-container .order-flow-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.order-flow-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 30px;
    align-items: start;
}
.order-main {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.order-main h1 { margin: 0 0 10px; color: #333; }
.service-description { color: #555; margin-bottom: 20px; line-height: 1.6; }

/* Sidebar */
.order-sidebar { position: sticky; top: 20px; }
.order-summary { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.order-summary h3 { margin: 0 0 15px; color: #333; font-size: 16px; }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e0e0e0; font-size: 14px; color: #555; }
.summary-row:last-child { border-bottom: none; }
.summary-total { font-weight: 700; font-size: 18px; color: #007cba; margin-top: 8px; padding-top: 12px; border-top: 2px solid #007cba !important; }

.secure-notice { margin-top: 16px; padding: 14px; background: #fff8e1; border-left: 4px solid #ffc107; border-radius: 4px; font-size: 13px; color: #7a5800; line-height: 1.5; }

/* Section titles */
.section-title { font-size: 18px; font-weight: 600; color: #333; border-bottom: 2px solid #007cba; padding-bottom: 6px; margin: 30px 0 15px; }

/* Delivery options */
.delivery-options { display: grid; gap: 12px; }
.delivery-option { border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px 20px; cursor: pointer; transition: border-color .2s, background .2s; }
.delivery-option:hover { border-color: #007cba; background: #f5faff; }
.delivery-option.selected { border-color: #007cba; background: #eaf4ff; }
.delivery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.delivery-name { font-weight: 600; color: #333; }
.delivery-price { font-size: 18px; font-weight: 700; color: #007cba; }
.delivery-date { color: #666; font-size: 13px; }

/* Add-on services */
.additional-services { display: grid; gap: 12px; }
.service-option { border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.service-option:hover { border-color: #007cba; background: #f5faff; }
.service-option.selected { border-color: #007cba; background: #eaf4ff; }
.service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.service-name { font-weight: 600; color: #333; }
.service-price { font-weight: 700; color: #007cba; white-space: nowrap; }
.addon-description { color: #666; font-size: 13px; line-height: 1.5; margin: 0; }

/* Upload */
.upload-area { border: 2px dashed #ccc; border-radius: 8px; padding: 36px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.upload-area:hover, .upload-area.dragover { border-color: #007cba; background: #f5faff; }
.upload-icon { font-size: 36px; margin-bottom: 10px; }

/* Form */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #333; font-size: 14px; }
.form-group select,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    transition: border-color .2s;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: #007cba; box-shadow: 0 0 0 2px rgba(0,124,186,.15); }
.form-group textarea { height: 100px; resize: vertical; }

/* Submit button */
.submit-btn {
    width: 100%;
    padding: 15px;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.submit-btn:hover:not(:disabled) { background: #005a87; }
.submit-btn:disabled { background: #aaa; cursor: not-allowed; }

/* ── Elementor editor — hide sticky in editor mode ─────────────────── */
.elementor-editor-active .order-sidebar {
    position: relative;
    top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .order-flow-container { grid-template-columns: 1fr; }
    .order-sidebar { position: static; }
}