/**
 * 247 Wordpressed — css/woocommerce.css
 * Branded WooCommerce styles — cart, checkout, account, notices.
 * Replaces all default WooCommerce stylesheets.
 */

/* ============================================================
   WOOCOMMERCE NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
    font-family: var(--font-body);
    font-size: 0.9125rem;
    border-radius: var(--radius-md);
    border: none;
    padding: 14px 18px 14px 52px;
    margin-bottom: var(--gap-md);
    position: relative;
}
.woocommerce-message { background: var(--teal-light); color: var(--teal); }
.woocommerce-info    { background: var(--amber-light); color: var(--amber-dark); }
.woocommerce-error   { background: #fee2e2; color: #991b1b; }
.woocommerce-message::before { color: var(--teal); }
.woocommerce-info::before    { color: var(--amber); }
.woocommerce-error li        { list-style: none; }

/* ============================================================
   SHARED FORM ELEMENTS
   ============================================================ */
.woocommerce form .form-row { margin-bottom: var(--gap-sm); }

.woocommerce form .form-row label {
    font-family: var(--font-mono);
    font-size: 0.6625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
}
.woocommerce form .form-row label .required { color: var(--amber); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: var(--cream-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
    outline: none;
    appearance: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(217,119,6,0.1);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button {
    background: var(--amber) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 12px 28px !important;
    transition: all 0.22s !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background: var(--amber-dark) !important;
    color: var(--cream) !important;
}
.woocommerce .button.alt,
.woocommerce button.button.alt {
    background: var(--ink) !important;
    color: var(--cream) !important;
}
.woocommerce .button.alt:hover {
    background: var(--ink-2) !important;
}

/* ============================================================
   CART PAGE
   ============================================================ */
.woocommerce-cart .woo-wrap { padding: var(--gap-xl) 0; }

.woocommerce table.cart {
    font-family: var(--font-body);
    font-size: 0.9125rem;
    border-collapse: collapse;
    width: 100%;
}
.woocommerce table.cart th {
    font-family: var(--font-mono);
    font-size: 0.6625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 2px solid var(--border);
    text-align: left;
    background: var(--cream-2);
}
.woocommerce table.cart td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.woocommerce table.cart td.product-name a {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}
.woocommerce table.cart .quantity input {
    width: 60px;
    text-align: center;
}
.woocommerce table.cart td.product-remove a {
    color: var(--muted);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.2s;
}
.woocommerce table.cart td.product-remove a:hover { color: #dc2626; }

/* Cart totals */
.woocommerce .cart-collaterals {
    margin-top: var(--gap-lg);
}
.woocommerce .cart_totals {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    float: none;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
}
.woocommerce .cart_totals h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--gap-md);
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--border);
}
.woocommerce .cart_totals table {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9125rem;
}
.woocommerce .cart_totals table th {
    color: var(--muted);
    font-weight: 400;
    padding: 8px 0;
    text-align: left;
}
.woocommerce .cart_totals table td {
    text-align: right;
    padding: 8px 0;
    font-weight: 600;
    color: var(--ink);
}
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
    font-size: 1.125rem;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.woocommerce .cart_totals .wc-proceed-to-checkout {
    margin-top: var(--gap-md);
}
.woocommerce .cart_totals .wc-proceed-to-checkout a {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 1rem !important;
    padding: 14px 28px !important;
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.woocommerce-checkout .woo-wrap { padding: var(--gap-xl) 0; }

.woocommerce-checkout #customer_details { margin-bottom: var(--gap-lg); }

/* Two-column checkout layout */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    float: none;
    width: 100%;
}

.woocommerce-checkout .woocommerce-checkout-review-order {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    margin-bottom: var(--gap-lg);
}

.woocommerce-checkout h3#order_review_heading {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--gap-md);
}
.woocommerce-checkout h3#ship-to-different-address { display: none; }

/* Order review table */
.woocommerce-checkout-review-order-table {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9125rem;
    border-collapse: collapse;
}
.woocommerce-checkout-review-order-table th {
    font-family: var(--font-mono);
    font-size: 0.6625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.woocommerce-checkout-review-order-table .product-name {
    font-weight: 600;
    color: var(--ink);
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: none;
    padding-top: 14px;
}

/* Payment box */
#payment {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
}
#payment .payment_methods { list-style: none; margin: 0 0 var(--gap-md); }
#payment .payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--border); }
#payment .payment_methods li:last-child { border-bottom: none; }
#payment .payment_methods label {
    font-family: var(--font-body);
    font-size: 0.9125rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
#payment .payment_box {
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 10px;
    font-size: 0.9125rem;
    color: var(--muted);
}
#place_order {
    width: 100%;
    font-size: 1.0625rem !important;
    padding: 16px 28px !important;
    margin-top: var(--gap-md);
}

/* Stripe element container */
.wc-stripe-elements-field {
    background: var(--cream-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    transition: border-color 0.2s;
}
.wc-stripe-elements-field:focus-within { border-color: var(--amber); }

/* Project brief section */
.wp247-checkout-brief textarea {
    background: var(--cream-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    width: 100%;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
}
.wp247-checkout-brief textarea:focus {
    border-color: var(--amber);
    outline: none;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.1);
}

/* ============================================================
   ORDER RECEIVED / THANK YOU
   ============================================================ */
.woocommerce-order { padding: var(--gap-xl) 0; }

.woocommerce-order .woocommerce-thankyou-order-received {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--gap-md);
}

.woocommerce-order-overview {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    list-style: none;
    margin-bottom: var(--gap-lg);
}
.woocommerce-order-overview li {
    font-family: var(--font-body);
    font-size: 0.9125rem;
    color: var(--muted);
}
.woocommerce-order-overview li strong { color: var(--ink); font-weight: 600; }

.woocommerce-order-details {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    margin-bottom: var(--gap-lg);
}
.woocommerce-order-details h2 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--gap-md);
}

/* Dashboard link on thank you page */
.wp247-thankyou-dashboard {
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--gap-lg);
    text-align: center;
    margin-top: var(--gap-lg);
}
.wp247-thankyou-dashboard h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 10px;
}
.wp247-thankyou-dashboard p {
    font-family: var(--font-body);
    font-size: 0.9125rem;
    color: rgba(247,243,236,0.5);
    margin-bottom: var(--gap-md);
}

/* ============================================================
   MY ACCOUNT PAGE
   ============================================================ */
.woocommerce-account .woo-wrap { padding: var(--gap-xl) 0; }

.woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin-bottom: var(--gap-lg);
}
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--gap-md);
}
.woocommerce-MyAccount-navigation ul li a {
    font-family: var(--font-mono);
    font-size: 0.6625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--amber);
    border-color: rgba(217,119,6,0.35);
}

.woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}

/* Account form */
.woocommerce-EditAccountForm .form-row {
    margin-bottom: var(--gap-sm);
}
.woocommerce-EditAccountForm input { max-width: 480px; }
.woocommerce-EditAccountForm .button {
    margin-top: var(--gap-md);
}

/* ============================================================
   PRODUCT PAGE (single service)
   ============================================================ */
.woocommerce div.product {
    font-family: var(--font-body);
}
.woocommerce div.product .price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
}
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: var(--gap-md);
}
.single_add_to_cart_button {
    width: 100%;
    text-align: center;
    font-size: 1.0625rem !important;
    padding: 14px 28px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .woocommerce-order-overview { flex-direction: column; gap: 10px; }
    .woocommerce .cart_totals { max-width: 100%; }
    #payment .payment_methods { padding: 0; }
}