/* gr-quote.css - Quote Page Styling */

/* Page Layout - Assuming shortcodes are siblings in a container, 
   but we might need to rely on the theme's container. 
   We'll treat the shortcode outputs as full-width blocks that we might flex if wrapped.
   However, since we can't control the wrapping easily without changing the page content,
   we will style them to be robust. 
   
   Ideally, the user puts them in a column block. 
   IF they are just one after another, we can try to use a grid if they share a parent.
*/

/* Quote List Application (Left Column) */
#gr-quote-list-app {
    margin-bottom: 40px;
}

.gr-qm-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3b5d;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.gr-quote-table-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.gr-quote-table {
    width: 100%;
    border-collapse: collapse;
}

.gr-quote-table th {
    background-color: #fff;
    font-weight: 600;
    color: #555;
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.gr-quote-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    background: #fff;
}

.gr-quote-table tr:last-child td {
    border-bottom: none;
}

.gr-qp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a3b5d;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.gr-qp-back-link:hover {
    text-decoration: underline;
}

/* Right Column Elements (Quote Form Shortcode) */
.gr-quote-sidebar-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Urgency Box */
.gr-urgency-box {
    border: 1px solid #e0e0e0;
    padding: 25px;
    background: #fff;
    border-radius: 4px;
    /* Screenshot shows specific feel, maybe sharp corners? Using 4px safe */
}

.gr-urgency-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a3b5d;
    margin: 0 0 15px 0;
}

.gr-btn-wa-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 2px solid #25D366;
    background: #fff;
    color: #000;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 15px;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.gr-btn-wa-outline:hover {
    background: #f0fff4;
}

.gr-urgency-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Formal Option Box */
.gr-formal-box {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.gr-formal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.gr-formal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a3b5d;
    margin: 0;
}

.gr-badge-rec {
    background: #d4f7dc;
    color: #155724;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
}

.gr-formal-content {
    padding: 25px;
}

.gr-formal-info {
    background: #f2f4f7;
    /* Grey background from screenshot */
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.gr-formal-intro {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #333;
}

.gr-formal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gr-formal-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.gr-formal-list li::before {
    content: '✔';
    /* Or custom check icon */
    position: absolute;
    left: 0;
    top: 2px;
    color: #28a745;
    font-weight: bold;
    font-size: 14px;
}

/* Form Styles Override/Enhance */
.gr-quote-form-inner {
    /* Reset existing container styles if needed */
}

.gr-quote-form label {
    font-size: 0.9rem;
    color: #333;
    font-weight: 700;
}

.gr-quote-form input[type="text"],
.gr-quote-form input[type="email"],
.gr-quote-form input[type="tel"],
.gr-quote-form textarea,
.gr-quote-form select {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 44px;
    /* Taller inputs */
    padding: 0 15px;
    font-size: 1rem;
}

.gr-quote-form textarea {
    height: auto;
    padding: 15px;
}

.gr-btn-submit {
    width: 100%;
    background: #1a3b5d;
    /* Default Blue? Or Yellow? Screenshot doesn't show button. 
                           User said "boton de añadir... no funciona", 
                           but side panel has yellow button.
                           Usually "Enviar" is primary. Let's use Navy or Yellow?
                           "Opción Formal" implies serious. Let's stick to Navy or Green?
                           User said "dale tu toque magistral". Navy is premium.
                           But Side Panel "Cotizar" is Yellow.
                           Let's check side panel CSS. 
                           I'll use Navy for form submit to match "Opción Formal" header.
                        */
    color: #fff;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 10px;
    transition: background 0.2s;
}

.gr-btn-submit:hover {
    background: #132f4a;
}

/* Quantity Selector in Table */
.gr-qp-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.gr-qp-qty button {
    border: none;
    background: #fff;
    width: 30px;
    height: 38px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.gr-qp-qty button:hover {
    background: #f0f0f0;
}

.gr-qp-input {
    border: none;
    width: 40px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    appearance: textfield;
    margin: 0;
    padding: 0;
}

/* Remove spin buttons from input number */
.gr-qp-input::-webkit-outer-spin-button,
.gr-qp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Form & Radio Tabs Styles --- */
.gr-form-group {
    margin-bottom: 15px;
}

.gr-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.gr-input,
.gr-select,
textarea.gr-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    color: #444;
    box-sizing: border-box;
    /* Fix width issues */
}

.gr-input:focus {
    border-color: #1e2b4d;
    outline: none;
}

/* Radio Tabs (Segmented Control) */
.gr-radio-tabs {
    display: flex;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.gr-tab-option {
    flex: 1;
    cursor: pointer;
    margin: 0;
    /* reset */
}

.gr-tab-option input {
    display: none;
}

.gr-tab-option span {
    display: block;
    text-align: center;
    padding: 10px 5px;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
    transition: all 0.2s ease;
}

.gr-tab-option input:checked+span {
    background: #1e2b4d;
    /* Primary Dark Blue */
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Steps (Legacy/Hidden now, but keeping clean) */
.gr-formal-info {
    display: none;
}

.gr-steps-indicator {
    display: none;
}

/* Product Summary List Styles */
.gr-quote-summary-list {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
}

.gr-summary-item {
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.gr-summary-item:last-child {
    border-bottom: none;
}

.gr-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
}

.gr-summary-header:hover {
    background: #fafafa;
}

/* Simple Item (No Pointer) */
.gr-simple-item .gr-summary-header {
    cursor: default;
    background: #fff;
}

.gr-simple-item .gr-sh-left>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gr-sh-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gr-sh-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}

.gr-sh-name {
    font-weight: 600;
    color: #0b2149;
    font-size: 0.95rem;
}

.gr-sh-right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #666;
}

.gr-sh-icon {
    font-size: 0.8rem;
    color: #999;
}

.gr-summary-body {
    background: #f9fbfd;
    border-top: 1px solid #f0f0f0;
    padding: 0;
}

.gr-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.gr-summary-table th,
.gr-summary-table td {
    padding: 8px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.gr-summary-table th {
    color: #555;
    font-weight: 600;
    background: #eff2f7;
}

.gr-summary-table tr:last-child td {
    border-bottom: none;
}

/* Buttons */
.gr-btn-prev,
.gr-btn-next,
.gr-btn-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.gr-btn-prev {
    background: #e0e0e0;
    color: #333;
    margin-right: 10px;
}

.gr-btn-next {
    background: #1e2b4d;
    color: #fff;
}

.gr-btn-submit {
    background: #1e2b4d;
    color: #fff;
    width: 100%;
    font-size: 1.05rem;
}

.gr-btn-submit:hover {
    background: #15203a;
}

.gr-qp-back-link {
    display: inline-block;
    margin-top: 15px;
    color: #1e2b4d;
    text-decoration: underline;
    font-size: 0.9rem;
}

/* Delete Button */
.gr-qp-del {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.gr-qp-del:hover {
    opacity: 1;
}

/* Variant Text in Table */
.gr-qp-var {
    font-size: 0.85rem;
    color: #777;
    margin-top: 4px;
}

.gr-qp-prod-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gr-qp-prod-wrap img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #eee;
}

.gr-qp-name {
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
}

/* --------------------------------------
   PHASE 6: NEW STYLES (Summary List & Steps)
   -------------------------------------- */

/* Hide Info Section */
/* .gr-formal-info {
    display: none;
} */

/* Summary List (Left Column) */
/* .gr-quote-summary-list {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 20px;
} */

/* .gr-summary-item {
    border-bottom: 1px solid #eee;
}

.gr-summary-item:last-child {
    border-bottom: none;
}

.gr-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
}

.gr-summary-header:hover {
    background: #f9f9f9;
}

.gr-sh-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gr-sh-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #eee;
}

.gr-sh-name {
    font-weight: 700;
    color: #1a3b5d;
    font-size: 1rem;
}

.gr-sh-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gr-sh-qty {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.gr-sh-icon {
    font-size: 0.8rem;
    color: #999;
}

.gr-summary-body {
    background: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.gr-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.gr-summary-table th,
.gr-summary-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    color: #555;
}

.gr-summary-table th {
    font-weight: 600;
    color: #333;
}

.gr-summary-table tr:last-child td {
    border-bottom: none;
} */

/* Steps Indicator */
/* .gr-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
}

.gr-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.gr-step-dot.active {
    background: #1a3b5d;
}

.gr-step-line {
    width: 40px;
    height: 2px;
    background: #e0e0e0;
}

.gr-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a3b5d;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Step Footer Buttons */
.gr-step-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.gr-btn-next,
.gr-btn-prev {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}

.gr-btn-next {
    background: #1a3b5d;
    color: #fff;
    flex: 1;
}

.gr-btn-next:hover {
    background: #132f4a;
}

.gr-btn-prev {
    background: #e0e0e0;
    color: #333;
}

.gr-btn-prev:hover {
    background: #d0d0d0;
}

/* Hidden elements handled by JS, but set defaults */
.gr-field-dni,
.gr-company-fields {
    /* Initially hidden via inline style in PHP, but good to have helper class if needed */
}

/* Mobile Tweak for Summary */
.gr-sh-img {
    width: 30px;
    height: 30px;
}


/* --- Success Modal Styles --- */
.gr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    /* Very high z-index */
    display: none;
    /* JS will fadeIn */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.gr-modal-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: grSlideUp 0.3s ease-out;
}

@keyframes grSlideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.gr-modal-icon {
    font-size: 3.5rem;
    margin-bottom: 5px;
    line-height: 1;
}

.gr-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2b4d;
    margin-bottom: 10px;
}

.gr-modal-text {
    color: #555;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.gr-modal-highlight {
    background: #ecfdf5;
    /* Light green */
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
}

.gr-modal-highlight p {
    margin: 0 0 10px;
    color: #047857;
    font-size: 0.95rem;
    font-weight: 500;
}

.gr-btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 50px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(37, 211, 102, 0.3);
    font-size: 1rem;
}

.gr-btn-whatsapp:hover {
    background: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(37, 211, 102, 0.4);
}

.gr-wa-icon {
    margin-right: 8px;
    font-size: 1.2rem;
}

.gr-modal-footer {
    margin-top: 10px;
}

.gr-btn-link {
    background: none;
    border: none;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 8px;
    font-family: inherit;
}

.gr-btn-link:hover {
    color: #555;
}