/* 1. Tambahkan margin atas ke container Amelia untuk menjauhkannya dari menu */ body.page-id-76 .amelia-v2-booking { margin-top: 100px; /* Atur sesuai tinggi header/menu */ } /* Ganti page-id-XXX dengan ID halaman booking Anda Bisa didapat dengan inspect */ @media (max-width: 768px) { /* 2. Untuk layar kecil (HP), beri jarak tambahan */ .amelia-v2-booking { margin-top: 120px; padding: 0 15px; } } /* 3. Pastikan z-index form lebih rendah dari header jika header sticky */ header.site-header { z-index: 9999; position: relative; } .amelia-v2-booking { z-index: 1; position: relative; } /* 1. Menyelaraskan form pencarian dan filter */ .amelia-v2-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 20px; } /* 2. Menyesuaikan tampilan kartu layanan */ .amelia-v2-service-card { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; min-height: 300px; } /* 3. Menempatkan harga di pojok kanan atas */ .amelia-v2-service-price { position: absolute; top: 15px; right: 20px; font-weight: bold; font-size: 16px; color: #333; } /* 4. Menempatkan tombol "Continue" di bagian bawah */ .amelia-v2-service-card .amelia-v2-continue-button { align-self: flex-end; margin-top: auto; margin-right: 0; } /* 5. Menyesuaikan warna dan font sesuai branding */ .amelia-v2-booking { font-family: 'Open Sans', sans-serif; color: #333; } .amelia-v2-booking .el-button--primary { background-color: #007BFF; border-color: #007BFF; color: #fff; } .amelia-v2-booking .el-button--primary:hover { background-color: #0056b3; border-color: #0056b3; } /* === GENERAL TABLE CLEANUP === */ .woocommerce-cart-form table.shop_table, .cart_totals table.shop_table { /* margin-top: 10px !important; */ width: 100%; border-collapse: collapse; background-color: #fff; border: none; font-size: 15px; color: #333; } .woocommerce-cart-form th, .woocommerce-cart-form td, .cart_totals th, .cart_totals td { padding: 14px 10px; text-align: left; border-bottom: 1px solid #eaeaea; vertical-align: top; } .woocommerce-cart-form td.product-thumbnail img { width: 60px; height: auto; border-radius: 4px; } /* === APPOINTMENT INFO STYLING === */ .woocommerce-cart-form td.product-name dl.variation { background-color: #f9f9f9; padding: 12px 15px; margin-top: 10px; margin-bottom: 6px; border-radius: 8px; line-height: 1.6; border: 1px solid #e0e0e0; } .woocommerce-cart-form td.product-name dl.variation dt { font-weight: 600; margin-bottom: 5px; } .woocommerce-cart-form td.product-name dl.variation dd p { margin: 4px 0; } .woocommerce-cart-form td.product-name hr { margin-top: 10px; margin-bottom: 6px; } .woocommerce-cart-form .cart_item td { padding-top: 10px; padding-bottom: 10px; } /* === BUTTON STYLING === */ .woocommerce-cart-form .button, .cart_totals .checkout-button { background-color: #a46d39 !important; color: white !important; border: none; border-radius: 6px; padding: 10px 16px; font-weight: 600; text-transform: uppercase; font-size: 14px; cursor: pointer; transition: background-color 0.3s ease; } .woocommerce-cart-form .button:hover, .cart_totals .checkout-button:hover { background-color: #8c572e !important; } /* === COUPON FORM STYLING (DIRAPATKAN) === */ .woocommerce-cart-form .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 0; margin-bottom: 10px; } .woocommerce-cart-form .coupon input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; flex: 1; min-width: 200px; } /* === CART TOTALS BOX === */ .cart-collaterals .cart_totals { background: #fff; padding: 24px; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); margin-top: 30px; } .cart-collaterals h2 { font-size: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } /* === QUANTITY FIELD FIX === */ .woocommerce-cart-form td.product-quantity .quantity.hidden { display: none !important; } /* === FIX OVERLAP DENGAN MENU === */ .woocommerce-cart-form { padding-top: 90px; /* Sesuaikan dengan tinggi header/menu */ } /* Batasi styling hanya untuk form checkout */ body.woocommerce-checkout .woocommerce-checkout { padding: 20px !important; /* max-width: 960px; */ margin: 0 auto !important; box-sizing: border-box; } /* Layout kolom checkout */ body.woocommerce-checkout #customer_details { display: flex; flex-wrap: wrap; gap: 20px; } body.woocommerce-checkout #customer_details .col-1, body.woocommerce-checkout #customer_details .col-2 { flex: 1 1 48%; min-width: 300px; } /* Tabel order */ body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-top: 30px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table th, body.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; } /* Jarak tombol order */ body.woocommerce-checkout .place-order { margin-top: 30px; } /* Hanya berlaku di halaman Thank You Page */ body.woocommerce-order-received .woocommerce-order { /* max-width: 960px; */ /* margin-bottom: 160px; */ margin: 0 auto; padding: 20px; box-sizing: border-box; font-family: "Helvetica", sans-serif; } /* Notice sukses */ body.woocommerce-order-received .woocommerce-notice--success { position: relative; z-index: 2; background-color: #e0f9e0; border-left: 5px solid #4caf50; padding: 15px; margin-bottom: 30px; font-weight: bold; color: #2d662d; margin-top:70px } /* Order Overview (Nomor, Tanggal, Total, Metode) */ body.woocommerce-order-received .woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; padding: 0; list-style: none; } body.woocommerce-order-received .woocommerce-order-overview li { flex: 1 1 200px; background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px solid #e1e1e1; } /* Judul Section */ body.woocommerce-order-received h2 { margin-top: 40px; margin-bottom: 20px; font-size: 22px; border-bottom: 2px solid #eee; padding-bottom: 5px; } /* Tabel Detail Order */ body.woocommerce-order-received table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 30px; } body.woocommerce-order-received table.shop_table th, body.woocommerce-order-received table.shop_table td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; } body.woocommerce-order-received table.shop_table thead { background-color: #f5f5f5; } /* Bagian Billing Address */ body.woocommerce-order-received .woocommerce-customer-details { background: #fafafa; padding: 20px; border: 1px solid #eee; border-radius: 8px; } body.woocommerce-order-received .woocommerce-customer-details address { font-style: normal; line-height: 1.6; } body.woocommerce-order-received .woocommerce-customer-details--phone, body.woocommerce-order-received .woocommerce-customer-details--email { margin-top: 10px; } /* WooCommerce My Account Page Styling */ .woocommerce-account .woocommerce { max-width: 1000px; margin-top:10px; /* margin: 40px auto; */ } /* Login/Register Container */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); padding: 30px; margin-bottom: 30px; } /* Form Fields */ .woocommerce-account .form-row { margin-bottom: 15px; } .woocommerce-account .form-row label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; } .woocommerce-account .form-row input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; } .woocommerce-account .form-row input:focus { border-color: #b27c48; box-shadow: 0 0 0 2px rgba(178, 124, 72, 0.2); outline: none; } /* Submit Button */ .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register__submit { background-color: #b27c48 !important; color: white !important; border: none !important; padding: 12px 20px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-radius: 4px !important; transition: all 0.3s ease !important; } .woocommerce-account .woocommerce-form-login__submit:hover, .woocommerce-account .woocommerce-form-register__submit:hover { background-color: #9a6c3d !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; } /* Remember Me Checkbox */ .woocommerce-form-login__rememberme { display: block; margin-bottom: 15px; } /* Lost Password Link */ .woocommerce-LostPassword { margin-top: 15px; font-size: 14px; } .woocommerce-LostPassword a { color: #4a6da7; text-decoration: none; } .woocommerce-LostPassword a:hover { text-decoration: underline; } /* Tabs for Login/Register if enabled */ .woocommerce-account .woocommerce-MyAccount-navigation { background-color: #f9f9f9; border-radius: 8px; overflow: hidden; margin-bottom: 30px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; flex-grow: 1; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 15px; text-align: center; color: #333; text-decoration: none; font-weight: 500; transition: all 0.3s ease; border-bottom: 3px solid transparent; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background-color: #fff; border-bottom-color: #b27c48; font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover { background-color: rgba(178, 124, 72, 0.1); } /* Password Strength Meter */ .woocommerce-password-strength { margin-top: 10px; padding: 8px; text-align: center; font-weight: 600; border-radius: 4px; } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { background-color: #ffebee; color: #e53935; } .woocommerce-password-strength.good { background-color: #fff8e1; color: #ffa000; } .woocommerce-password-strength.strong { background-color: #e8f5e9; color: #43a047; } /* Password Hint */ .woocommerce-password-hint { display: block; margin-top: 8px; font-size: 13px; color: #666; } /* WooCommerce My Account - Lost your password Page Styling */ /* Reset Password Form Styling */ .woocommerce-ResetPassword { max-width: 500px; margin-top:100px; padding: 25px; background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .reset-password-description { margin-bottom: 20px; color: #555; line-height: 1.5; } .woocommerce-form-row label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } .woocommerce-Input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; transition: border-color 0.3s; } .woocommerce-Input:focus { border-color: #2c6acf; outline: none; box-shadow: 0 0 0 2px rgba(44, 106, 207, 0.2); } .woocommerce-Button { background-color: #2c6acf; color: white; border: none; padding: 12px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; } .woocommerce-Button:hover { background-color: #1e5bb0; } .required { color: #e74c3c; } .woocommerce-MyAccount-navigation{ margin-top:100px; } /* STYLE TABLE ORDER */ /* Atur header tabel */ .woocommerce-MyAccount-content table.woocommerce-orders-table th { background-color: #f8f5f0; color: #a96b2c; font-weight: bold; padding: 12px 16px; border-bottom: 1px solid #e0e0e0; } /* Atur isi baris tabel */ .woocommerce-MyAccount-content table.woocommerce-orders-table td { padding: 14px 16px; border-bottom: 1px solid #efefef; vertical-align: middle; font-size: 15px; } /* Atur kolom aksi jadi horizontal (tidak bertumpuk) */ .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Style tombol umum */ .woocommerce-MyAccount-content .woocommerce-button { padding: 8px 16px; border-radius: 8px; text-transform: uppercase; font-size: 13px; font-weight: 600; transition: all 0.2s ease-in-out; } /* Tombol View */ .woocommerce-MyAccount-content .woocommerce-button.view { background-color: #a96b2c; color: #fff; } /* .woocommerce-MyAccount-content .woocommerce-button.view:hover { background-color: #875621; } */ /* Tombol Cancel */ .woocommerce-MyAccount-content .woocommerce-button.cancel { background-color: #c0392b; color: #fff; } /* .woocommerce-MyAccount-content .woocommerce-button.cancel:hover { background-color: #a83222; } */ /* Responsive untuk layar kecil */ @media (max-width: 768px) { .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions { flex-direction: column; align-items: flex-start; } .woocommerce-MyAccount-content .woocommerce-button { width: 100%; } }