/**
Theme Name: Kref Studio 
Author: Kref Studio
Author URI: https://krefstudio.com/tentang-kami/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.1.3
Requires at Least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Tags: blog, e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   SECTION 1: WOOCOMMERCE MY ACCOUNT - LAYOUT & NAVIGATION
   ========================================================================== */

/* Main Layout */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 250px;
    width: 250px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

/* Navigation Links */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 5px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: color-mix(in srgb, var(--ast-global-color-0, #4a90e2) 10%, #ffffff);
    color: var(--ast-global-color-0, #4a90e2);
}

/* Pseudo-elements Navigation Icons (Default Layout) */
.woocommerce-MyAccount-navigation ul li a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: "\f009";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--home a::before {
    content: "\f015";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: "\f466";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: "\f019";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: "\f3c5";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: "\f007";
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: "\f2f5";
}

/* Custom Layout Icon Overrides & Tweaks */
.woocommerce-account .kref-app-style-nav li a::before,
.woocommerce-account .kref-kref1-nav li a::before {
    content: none !important;
    display: none !important;
}

/* Force My Licenses SVG icon to show up since plugin hides it with display: none !important */
.woocommerce-account .kref-kref1-nav .woocommerce-MyAccount-navigation-link--my-licenses > a svg,
.woocommerce-account .kref-app-style-nav .woocommerce-MyAccount-navigation-link--my-licenses > a svg {
    display: block !important;
}

/* Remove border/outline on App Style navigation items */
.woocommerce-account .kref-app-style-nav li,
.woocommerce-account .kref-app-style-nav .woocommerce-MyAccount-navigation-link {
    border: 0 !important;
    box-shadow: none !important;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: auto;
        width: 100%;
    }
}


/* ==========================================================================
   SECTION 2: MY ACCOUNT - USER PROFILE & AVATAR
   ========================================================================== */
.kref-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.kref-user-profile .kref-avatar {
    flex-shrink: 0;
}

.kref-user-profile .kref-avatar img {
    border-radius: 50%;
    border: 3px solid #f0f0f0;
    transition: border-color 0.3s ease;
}

.kref-user-profile .kref-avatar img:hover {
    border-color: #4a90e2;
}

.kref-user-profile .user-info {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.kref-user-profile .user-info .greeting {
    font-size: 14px;
    color: #888;
}

.kref-user-profile .user-info .username {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}


/* ==========================================================================
   SECTION 3: WOOCOMMERCE MY ACCOUNT - CUSTOM ORDER TIMELINE
   ========================================================================== */
.kref-order-timeline {
    margin: 24px 0;
    padding: 10px 0;
    width: 100%;
}

.kref-order-timeline .timeline-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 100%;
}

.kref-order-timeline .timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1 1 0%;
}

/* Dots styling */
.kref-order-timeline .step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d1d5db;
    border: 2px solid #d1d5db;
    z-index: 2;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

/* Labels and Dates */
.kref-order-timeline .step-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 2px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.kref-order-timeline .step-date {
    font-size: 11px;
    color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Connectors */
.kref-order-timeline .timeline-connector {
    flex-grow: 1;
    height: 2px;
    border-top: 2px dashed #d1d5db;
    align-self: flex-start;
    margin-top: 7px;
    z-index: 1;
}

/* Completed Step State (Green) */
.kref-order-timeline .timeline-step.completed .step-dot {
    background-color: var(--ast-global-color-0, #455c3a);
    border-color: var(--ast-global-color-0, #455c3a);
    box-shadow: 0 0 0 4px rgba(69, 92, 58, 0.15);
}

.kref-order-timeline .timeline-step.completed .step-label {
    color: #1f2937;
}

.kref-order-timeline .timeline-step.completed .step-date {
    color: #4b5563;
}

.kref-order-timeline .timeline-connector.completed {
    border-top-color: var(--ast-global-color-0, #455c3a);
    border-top-style: dashed;
}

/* Pending Step State (Orange/Tan) */
.kref-order-timeline .timeline-step.pending .step-dot {
    background-color: #ffffff;
    border-color: #c48a49;
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(196, 138, 73, 0.15);
}

.kref-order-timeline .timeline-step.pending .step-label {
    color: #c48a49;
}

.kref-order-timeline .timeline-step.pending .step-date {
    color: #c48a49;
    font-weight: 500;
}

.kref-order-timeline .timeline-connector.pending {
    border-top-color: #c48a49;
}

/* Notice Box */
.kref-order-notice {
    background: #fdfaf2;
    border: 1px solid #f3e6d4;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.kref-order-notice p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #856404;
}

/* Specific Card Layout for App & Kref 1 */
.woocommerce-account .kref-app-order-card,
.woocommerce-account .kref-kref1-order-card {
    background: #ffffff;
    border: 1px solid #e4e1d6;
    border-radius: 14px;
    padding: 18px 24px 20px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .kref-order-timeline .step-label {
        font-size: 10px;
    }
    .kref-order-timeline .step-date {
        font-size: 9px;
    }
}


/* ==========================================================================
   SECTION 4: EDITOR KLASIK - COMPATIBILITY
   ========================================================================== */

/* Fix Paragraph Spacing */
.entry-content p {
    margin-bottom: 1.5em;
}

/* Tables */
.entry-content table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
}

.entry-content th,
.entry-content td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.entry-content th {
    background-color: #f5f5f5;
    font-weight: 600;
}

/* Code Blocks (ChatGPT Style) */
.entry-content pre {
    background: #0d0d0d;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    margin-bottom: 1.5em;
    font-size: 14px;
    line-height: 1.4;
}

.entry-content code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

.entry-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    border-radius: 0;
}

/* Blockquotes: Design 1 (Soft Card) */
.kref-blockquote-design-1 .entry-content blockquote,
.entry-content .quote-style-1,
.entry-content .quote-style-3 {
    margin: 0 0 1.75em 0;
    position: relative;
    padding: 22px 40px 42px 124px;
    background: #ffffff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
    color: #1f2937;
    font-size: 20pt;
    line-height: 1.6;
    font-style: italic;
    overflow: visible;
}

.kref-blockquote-design-1 .entry-content blockquote::before,
.entry-content .quote-style-1::before,
.entry-content .quote-style-3::before {
    content: "\201C";
    position: absolute;
    left: 56px;
    top: 24px;
    font-size: 88px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    color: var(--ast-global-color-0, #4a90e2);
}

.kref-blockquote-design-1 .entry-content blockquote p,
.entry-content .quote-style-1 p,
.entry-content .quote-style-3 p {
    margin: 0;
}

.kref-blockquote-design-1 .entry-content blockquote > *:not(:first-child),
.entry-content .quote-style-1 > *:not(:first-child),
.entry-content .quote-style-3 > *:not(:first-child) {
    margin-top: 20px;
}

.kref-blockquote-design-1 .entry-content blockquote cite,
.kref-blockquote-design-1 .entry-content blockquote footer,
.entry-content .quote-style-1 cite,
.entry-content .quote-style-1 footer,
.entry-content .quote-style-3 cite,
.entry-content .quote-style-3 footer {
    display: block;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.5;
    font-style: normal;
    color: #6b7280;
}

@media (max-width: 767px) {
    .kref-blockquote-design-1 .entry-content blockquote,
    .entry-content .quote-style-1,
    .entry-content .quote-style-3 {
        padding: 12px 24px 32px 80px;
        font-size: 20pt;
        border-radius: 18px;
    }

    .kref-blockquote-design-1 .entry-content blockquote::before,
    .entry-content .quote-style-1::before,
    .entry-content .quote-style-3::before {
        left: 42px;
        top: 20px;
        font-size: 68px;
    }
}

/* Blockquotes: Design 2 (Editorial Note) */
.kref-blockquote-design-2 .entry-content blockquote,
.entry-content .quote-style-2 {
    margin: 0 0 1.75em 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px dashed #b9bec7;
    border-radius: 16px;
    box-shadow: none;
    color: #6f7782;
    font-size: inherit;
    line-height: 1.85;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
}

.kref-blockquote-design-2 .entry-content blockquote::before,
.entry-content .quote-style-2::before {
    content: none;
}

.kref-blockquote-design-2 .entry-content blockquote p,
.entry-content .quote-style-2 p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.kref-blockquote-design-2 .entry-content blockquote strong,
.kref-blockquote-design-2 .entry-content blockquote b,
.entry-content .quote-style-2 strong,
.entry-content .quote-style-2 b {
    color: #4f5661;
    font-weight: 700;
}

.kref-blockquote-design-2 .entry-content blockquote mark,
.entry-content .quote-style-2 mark {
    background: #fff15a;
    color: inherit;
    padding: 0 0.12em;
}

.kref-blockquote-design-2 .entry-content blockquote cite,
.kref-blockquote-design-2 .entry-content blockquote footer,
.entry-content .quote-style-2 cite,
.entry-content .quote-style-2 footer {
    display: block;
    margin-top: 14px;
    font-size: 0.95em;
    line-height: 1.6;
    font-style: normal;
    color: #6b7280;
}

@media (max-width: 767px) {
    .kref-blockquote-design-2 .entry-content blockquote,
    .entry-content .quote-style-2 {
        padding: 18px 18px;
        border-radius: 14px;
        line-height: 1.75;
    }
}