/**
 * Lease Calculator Styles
 *
 * Minimal styling for the lease calculator on product pages,
 * cart display, and order details. The theme handles most styling.
 *
 * Color identity: Lease = Purple, IN3 = Orange, Direct = Green
 *
 * @package WC_Actiescooters_Lease
 */

/* ==========================================================================
   Product Page - Three-Column Pricing Layout
   ========================================================================== */

.pricing-columns {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pricing-columns--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.pricing-columns--two {
    grid-template-columns: 1fr 1fr;
}

.pricing-col {
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* Lease = Purple */
.pricing-col--lease {
    border: 2px solid #7C3AED;
    background: #F5F3FF;
}

/* IN3 = Orange */
.pricing-col--in3 {
    border: 2px solid #EA580C;
    background: #FFF7ED;
}

/* Direct = Green */
.pricing-col--direct {
    border: 2px solid #16A34A;
    background: #F0FDF4;
}

/* Column headers */
.pricing-col__header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #6D28D9;
    margin-bottom: 10px;
}

.pricing-col__header--in3 {
    color: #C2410C;
}

.pricing-col--direct .pricing-col__header {
    color: #15803D;
}

.pricing-col__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.pricing-col .lease-term-select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.pricing-col .lease-term-select:focus {
    border-color: #7C3AED;
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.pricing-col__subtitle {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.pricing-col__subtitle strong {
    color: #C2410C;
}

/* Prices in own column color */
.pricing-col__price {
    font-size: 1.5em;
    font-weight: 700;
    color: #6D28D9;
    line-height: 1.3;
}

.pricing-col__price--in3 {
    color: #C2410C;
}

.pricing-col__price--direct,
.pricing-col--direct .pricing-col__price {
    color: #15803D;
}

.pricing-col__suffix {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 14px;
}

.pricing-col__price .pricing-col__suffix {
    font-size: 0.55em;
    font-weight: 400;
    margin-bottom: 0;
}

/* Single add-to-cart button below pricing columns */
.pricing-add-to-cart {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px;
    border: none !important;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    line-height: 1.4;
    background-color: #16A34A !important;
    color: #fff !important;
}

.pricing-add-to-cart:hover {
    background-color: #15803D !important;
}


/* Legacy button classes (hidden) */
.pricing-col__btn {
    display: none;
}

/* ==========================================================================
   Cart - Lease Info Display
   ========================================================================== */

.woocommerce-cart .lease-info,
.woocommerce-checkout .lease-info {
    margin-top: 5px;
}

.woocommerce-cart dl.variation dt,
.woocommerce-checkout dl.variation dt {
    font-weight: 600;
}

/* ==========================================================================
   Order Details - Lease Info
   ========================================================================== */

.lease-info {
    margin-top: 20px;
}

.lease-info h2 {
    color: #6D28D9;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.lease-details-table {
    width: 100%;
    border-collapse: collapse;
}

.lease-details-table th,
.lease-details-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.lease-details-table thead th {
    background-color: #f5f5f5;
    font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .pricing-columns--three,
    .pricing-columns--two {
        grid-template-columns: 1fr;
    }

    .pricing-col__price {
        font-size: 1.3em;
    }

    .lease-details-table th,
    .lease-details-table td {
        padding: 6px 8px;
        font-size: 0.9em;
    }
}