/*
Theme Name: DZ Funnel
Description: A hyper-focused Single-Product Cash-on-Delivery Theme.
Author: Antigravity
Version: 2.0
*/

/* ============================================
   FONTS & VARIABLES
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
    --green:      #5BAD6F;
    --green-dark: #4a9a5e;
    --dark:       #2d2d2d;
    --gray:       #555555;
    --light:      #F4F6F8;
    --white:      #FFFFFF;
    --border:     #E8E8E8;
    --radius:     12px;
    --shadow:     0 4px 20px rgba(0,0,0,0.07);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--light);
    color: var(--dark);
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    direction: rtl;
    line-height: 1.6;
}

/* ============================================
   HEADER — full-width white bar, content boxed
   ============================================ */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-logo {
    font-size: 22px;
    font-weight: 900;
    color: var(--dark);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.header-nav a {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s;
}
.header-nav a:hover { color: var(--green); }

/* ============================================
   PRODUCT PAGE — two-column grid
   ============================================ */
.dz-product-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;
}

.dz-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* --- Images Column --- */
.dz-images {}

.dz-main-image {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
}
.dz-main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.dz-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.dz-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s;
}
.dz-thumb.active,
.dz-thumb:hover { border-color: var(--green); }

/* --- Summary Column --- */
.dz-summary {
    background: var(--white);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
}

.dz-product-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 14px;
}

.dz-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 20px;
}
.dz-price del { color: #aaa; font-size: 18px; margin-left: 8px; }
.dz-price ins { text-decoration: none; }

.dz-short-desc {
    font-size: 15px;
    color: var(--gray);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

/* Phone Block */
.dz-phone-block {
    background: #EAF7ED;
    border: 1px solid #c3e6cb;
    color: var(--green-dark);
    border-radius: var(--radius);
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
}

/* Checkout Divider Title */
.dz-checkout-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--green);
}

/* ============================================
   WOOCOMMERCE FORM — clean flat style
   ============================================ */
.woocommerce-checkout .form-row { margin-bottom: 14px !important; }

.woocommerce-checkout .form-row label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 5px;
    display: block;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    color: var(--dark) !important;
    background: var(--light) !important;
    transition: border-color 0.2s !important;
    outline: none !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
    border-color: var(--green) !important;
    background: var(--white) !important;
}

/* Place Order Button */
#place_order,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
    background-color: var(--green) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 24px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
    letter-spacing: 0.5px;
}
#place_order:hover { background-color: var(--green-dark) !important; transform: translateY(-1px); }

/* ============================================
   FOOTER — full-width, content boxed
   ============================================ */
.site-footer {
    background: var(--white);
    border-top: 1px solid var(--border);
    width: 100%;
    margin-top: 60px;
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.site-footer-inner a {
    color: #888;
    text-decoration: none;
    margin: 0 8px;
}
.site-footer-inner a:hover { color: var(--green); }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
    .dz-product-page { margin: 20px auto; padding: 0 16px; }
    .dz-product-grid { grid-template-columns: 1fr; gap: 20px; }
    .dz-summary { padding: 24px 20px; }
    .dz-product-title { font-size: 20px; }
    .dz-price { font-size: 22px; }
    .site-header-inner { padding: 14px 16px; }
}