/*
 Theme Name: MacBook Repair
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Adam Arnaout 
 Template: Divi
 Version: 1.0.1
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Contact page (page ID 1391) – ensure Gutenberg layout inherits Divi styling */
body.page-id-1391,
body.page-id-1391 #page-container,
body.page-id-1391 #main-content,
body.page-id-1391 #left-area {
    background-color: #ffffff !important;
}

body.page-id-1391 .entry-content > .wp-block-group:first-child {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

body.page-id-1391 .wp-block-group {
    background: transparent !important;
}

body.page-id-1391 .wp-block-group h1,
body.page-id-1391 .wp-block-group h2,
body.page-id-1391 .wp-block-group p {
    color: #333333;
}

/* Rounded borders for homepage service cards */
.et_pb_text_5.et_clickable,
.et_pb_text_6.et_clickable,
.et_pb_text_7.et_clickable {
    border-radius: 12px;
    padding: 5em 1.5em 0.5em 1.5em;
}

/* =Thank You / Order Received Page Styling
------------------------------------------------------- */

/* Thank You Message - Match heading size */
.woocommerce-order .woocommerce-thankyou-order-received {
    font-size: 40px !important;
    font-weight: 500;
    line-height: 1.2;
    color: #4cd964 !important;
    margin-bottom: 30px;
    padding: 0;
    background: none;
    border: none;
}

/* Order Details Enhancement */
.woocommerce-order .woocommerce-order-overview.order_details {
    background: #f8f9fa;
    padding: 25px 30px;
    border-radius: 10px;
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
}

.woocommerce-order .woocommerce-order-overview.order_details li {
    flex: 1 1 180px;
    padding: 20px 15px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

.woocommerce-order .woocommerce-order-overview.order_details li strong {
    display: block;
    font-size: 22px;
    color: #333;
    margin-top: 10px;
    font-weight: 600;
}

/* Mobile Responsive - Thank You Page */
@media (max-width: 980px) {
    .woocommerce-order .woocommerce-thankyou-order-received {
        font-size: 32px !important;
        color: #4cd964 !important;
    }

    .woocommerce-order .woocommerce-order-overview.order_details li strong {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .woocommerce-order .woocommerce-thankyou-order-received {
        font-size: 28px !important;
        color: #4cd964 !important;
    }

    .woocommerce-order .woocommerce-order-overview.order_details {
        flex-direction: column;
        padding: 20px;
    }

    .woocommerce-order .woocommerce-order-overview.order_details li {
        flex: 1 1 100%;
    }
}

/* Checkout price card — price amount text white */
#header .woocommerce-Price-amount,
#header .woocommerce-Price-amount bdi,
#header .woocommerce-Price-currencySymbol {
    color: #ffffff !important;
}

/* =Permanent dropdown arrow fix
 * Root cause: Divi auto-updates wipe et-cache; the regenerated critical CSS sets
 * .menu-item-has-children > a:first-child:after { font-family: ETmodules; content: "3" }.
 * When ETmodules fails to load after an update (Cloudflare caches old font path),
 * "3" renders literally instead of as the downward-arrow glyph.
 * Fix: override with a font-independent Unicode triangle — no ETmodules required.
 * Selectors cover: Divi Theme Builder nav (.et_pb_menu), inline nav (.et-menu-nav),
 * and the Divi mobile accordion (.et_mobile_menu).
 * Child theme survives all Divi parent auto-updates permanently.
------------------------------------------------------- */
.et_pb_menu .menu-item-has-children > a:first-child:after,
.et_pb_menu .menu-item-has-children > a:after,
.et-menu-nav .menu-item-has-children > a:first-child:after,
.et-menu-nav .menu-item-has-children > a:after,
.et_mobile_menu .menu-item-has-children > a:first-child:after,
.et_mobile_menu .menu-item-has-children > a:after {
    font-family: inherit !important;
    content: " \25BE" !important; /* ▾ BLACK DOWN-POINTING SMALL TRIANGLE */
    font-size: 12px !important;
    font-weight: 800 !important;
}