/* =========================================================
   OBAT SANITAS - MY ACCOUNT.PHP ONLY
   Sidebar + Main Account Layout
========================================================= */

 :root {
     --obat-green: #4c8f22;
     --obat-green-light: #f3f7ee;
     --obat-blue: #064b9b;
     --obat-text: #171717;
     --obat-muted: #666;
     --obat-border: #e8e8e8;
     --obat-white: #fff;
 }


 /* =========================================================
   MAIN ACCOUNT WRAPPER
========================================================= */

 .obat-account-page {
     width: 100%;
     max-width: 1500px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 300px minmax(0, 1fr);
     gap: 38px;

     box-sizing: border-box;
 }

 .woocommerce-account .woocommerce-MyAccount-content {
     width: 100% !important;
 }

 /* =========================================================
   LEFT SIDEBAR
========================================================= */

 .obat-account-sidebar {
     width: 100%;
     padding: 25px;

     background: #fff;

     border-radius: 0 0 18px 18px;

     box-shadow:
         0 5px 25px rgba(0, 0, 0, 0.05);

     box-sizing: border-box;

     align-self: start;
 }


 /* =========================================================
   PROFILE AREA
========================================================= */

 .obat-account-profile {
     display: flex;
     align-items: center;
     gap: 15px;

     padding: 5px 12px 25px;

     margin-bottom: 15px;

     border-bottom: 1px solid #eeeeee;
 }


 .obat-account-avatar {
     width: 64px;
     height: 64px;

     min-width: 64px;

     overflow: hidden;

     border-radius: 50%;

     background: #f1f5ed;
 }


 .obat-account-avatar img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }


 .obat-account-profile-info {
     min-width: 0;
 }


 .obat-account-profile-info h3 {
     margin: 0 0 4px;

     color: var(--obat-text);

     font-size: 17px;
     font-weight: 600;

     line-height: 1.3;
 }


 .obat-account-profile-info p {
     margin: 0 0 6px;

     color: var(--obat-muted);

     font-size: 12px;

     line-height: 1.4;

     word-break: break-word;
 }


 .obat-account-profile-info a {
     color: var(--obat-blue);

     font-size: 13px;
     font-weight: 500;

     text-decoration: none;
 }


 .obat-account-profile-info a:hover {
     color: var(--obat-green);
 }


 /* =========================================================
   WOOCOMMERCE ACCOUNT NAVIGATION
========================================================= */

 .obat-account-navigation {
     width: 100%;
 }


 /* Remove WooCommerce default layout */

 .obat-account-navigation .woocommerce-MyAccount-navigation {
     width: 100% !important;

     float: none !important;

     margin: 0 !important;
     padding: 0 !important;
 }


 /* Navigation UL */

 .obat-account-navigation .woocommerce-MyAccount-navigation ul {
     display: flex;

     flex-direction: column;

     gap: 3px;

     width: 100%;

     margin: 0 !important;
     padding: 0 !important;

     list-style: none !important;
 }


 /* Navigation LI */

 .obat-account-navigation .woocommerce-MyAccount-navigation li {
     width: 100%;

     margin: 0 !important;
     padding: 0 !important;

     list-style: none !important;
 }


 /* Navigation link */

 .obat-account-navigation .woocommerce-MyAccount-navigation li a {
     position: relative;

     display: flex !important;

     align-items: center;

     width: 100%;

     min-height: 46px;

     padding: 11px 14px !important;

     box-sizing: border-box;

     border-radius: 10px;

     color: var(--obat-text) !important;

     background: transparent;

     font-size: 15px;

     font-weight: 500;

     line-height: 1.4;

     text-decoration: none !important;

     transition:
         background .25s ease,
         color .25s ease,
         transform .25s ease;
 }


 /* Hover */

 .obat-account-navigation .woocommerce-MyAccount-navigation li a:hover {
     color: var(--obat-green) !important;

     background: var(--obat-green-light);

     transform: translateX(2px);
 }


 /* Active */

 .obat-account-navigation .woocommerce-MyAccount-navigation li.is-active a {
     color: var(--obat-green) !important;

     background: var(--obat-green-light);

     font-weight: 600;
 }


 /* =========================================================
   SIDEBAR ICONS
========================================================= */

 .obat-account-navigation .woocommerce-MyAccount-navigation li a::before {
     width: 24px;

     min-width: 24px;

     margin-right: 8px;

     display: inline-flex;

     align-items: center;

     justify-content: center;

     color: currentColor;

     font-size: 18px;

     font-weight: 400;

     line-height: 1;
 }


 /* Dashboard */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--dashboard a::before {
     content: "⌂";
 }


 /* Orders */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--orders a::before {
     content: "♧";
 }


 /* Downloads */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--downloads a::before {
     content: "↓";
 }


 /* Addresses */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--edit-address a::before {
     content: "⌖";
 }


 /* Payment Methods */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--payment-methods a::before {
     content: "▤";
 }


 /* Account Details */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--edit-account a::before {
     content: "♙";
 }


 /* Logout */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--customer-logout a::before {
     content: "→";
 }


 /* Wishlist */

 .obat-account-navigation .woocommerce-MyAccount-navigation-link--wishlist a::before {
     content: "♡";
 }


 /* =========================================================
   HELP BOX
========================================================= */

 .obat-account-help {
     width: 100%;

     margin-top: 25px;

     padding: 22px;

     box-sizing: border-box;

     border-radius: 13px;

     background: var(--obat-green-light);
 }


 /* Help icon */

 .obat-help-icon {
     width: 44px;
     height: 44px;

     display: grid;

     place-items: center;

     margin-bottom: 10px;

     background: #fff;

     border-radius: 50%;
 }


 .obat-help-icon::before {
     content: "♧";

     color: var(--obat-green);

     font-size: 22px;

     line-height: 1;
 }


 /* Help heading */

 .obat-help-content h3 {
     margin: 0 0 6px;

     color: var(--obat-green);

     font-size: 18px;

     font-weight: 600;
 }


 /* Help text */

 .obat-help-content p {
     margin: 0 0 15px;

     color: #444;

     font-size: 13px;

     line-height: 1.5;
 }


 /* Support button */

 .obat-help-content a {
     display: inline-flex;

     align-items: center;

     justify-content: center;

     padding: 10px 17px;

     border: 1px solid var(--obat-blue);

     border-radius: 6px;

     background: transparent;

     color: var(--obat-blue);

     font-size: 13px;

     font-weight: 600;

     line-height: 1.3;

     text-decoration: none;

     transition:
         background .25s ease,
         color .25s ease;
 }


 .obat-help-content a:hover {
     background: var(--obat-blue);

     color: #fff;
 }


 /* =========================================================
   RIGHT CONTENT AREA
========================================================= */

 .obat-account-main {
     width: 100%;

     min-width: 0;
 }


 /* WooCommerce content */

 .obat-account-main .woocommerce-MyAccount-content {
     width: 100% !important;

     float: none !important;

     margin: 0 !important;

     padding: 0 !important;
 }


 /* =========================================================
   REMOVE DEFAULT WOOCOMMERCE FLOATS
========================================================= */

 .obat-account-page .woocommerce-MyAccount-navigation,
 .obat-account-page .woocommerce-MyAccount-content {
     float: none !important;
 }


 /* =========================================================
   THEME / WOOCOMMERCE CONFLICT FIXES
========================================================= */

 .woocommerce-account .obat-account-page {
     width: 100%;
 }


 .woocommerce-account .obat-account-page * {
     box-sizing: border-box;
 }


 /* Prevent theme from adding width */

 .woocommerce-account .obat-account-navigation .woocommerce-MyAccount-navigation {
     width: 100% !important;
 }


 /* =========================================================
   DESKTOP
========================================================= */

 @media (min-width: 1201px) {

     .obat-account-page {
         grid-template-columns: 300px minmax(0, 1fr);
     }

 }


 /* =========================================================
   LAPTOP
========================================================= */

 @media (max-width: 1200px) {

     .obat-account-page {

         gap: 25px;

     }

 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 1000px) {

     .obat-account-page {
         grid-template-columns: 1fr;

         gap: 25px;
     }


     .obat-account-sidebar {
         border-radius: 14px;
     }


     /* Navigation becomes 2 columns */

     .obat-account-navigation .woocommerce-MyAccount-navigation ul {
         display: grid;

         grid-template-columns:
             repeat(2, minmax(0, 1fr));

         gap: 5px;
     }

     .obat-account-navigation .woocommerce-MyAccount-navigation li a {
         min-height: 48px;
     }

 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 600px) {

     .obat-account-page {
         display: block;

     }

     .obat-account-sidebar {
         margin-bottom: 25px;

         padding: 18px;

         border-radius: 14px;
     }

     .obat-account-profile {
         padding-left: 5px;
         padding-right: 5px;
     }

     .obat-account-navigation .woocommerce-MyAccount-navigation ul {
         display: flex;
         flex-direction: column;
         gap: 3px;
     }


     .obat-account-navigation .woocommerce-MyAccount-navigation li a {
         min-height: 45px;
     }


     .obat-account-help {
         margin-top: 20px;
     }

 }


 /* =========================================================
   SMALL MOBILE
========================================================= */

 @media (max-width: 400px) {

     .obat-account-page {
         padding-left: 12px;
         padding-right: 12px;
     }


     .obat-account-sidebar {
         padding: 15px;
     }


     .obat-account-profile {
         gap: 12px;
     }


     .obat-account-avatar {
         width: 55px;
         height: 55px;
         min-width: 55px;
     }


     .obat-account-profile-info h3 {
         font-size: 16px;
     }


     .obat-account-navigation .woocommerce-MyAccount-navigation li a {
         font-size: 14px;
     }

 }




 /* =========================================================
   OBAT SANITAS - DASHBOARD
========================================================= */

 .obat-dashboard {
     width: 100%;
     min-width: 0;
 }


 /* =========================================================
   WELCOME
========================================================= */

 .obat-dashboard-welcome {
     margin-bottom: 25px;
 }

 .obat-dashboard-welcome h1 {
     margin: 0 0 5px;
     color: #111;
     font-size: 34px;
     font-weight: 600;
     line-height: 1.25;
 }

 .obat-welcome-hand {
     display: inline-block;
     margin-left: 3px;
 }

 .obat-dashboard-welcome p {
     margin: 0;
     color: #62666d;
     font-size: 15px;
     line-height: 1.6;
 }


 /* =========================================================
   STAT CARDS
========================================================= */

 .obat-dashboard-stats {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 18px;
     width: 100%;
     margin-bottom: 22px;
 }


 .obat-stat-card {
     display: flex;
     align-items: center;
     gap: 16px;
     min-width: 0;
     min-height: 122px;
     padding: 20px;
     background: #fff;
     border: 1px solid #e7e7e7;
     border-radius: 14px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, .035);
     box-sizing: border-box;
     transition:
         transform .25s ease,
         box-shadow .25s ease;
 }


 .obat-stat-card:hover {
     transform: translateY(-2px);

     box-shadow:
         0 8px 24px rgba(0, 0, 0, .07);
 }


 /* =========================================================
   STAT ICON
========================================================= */

 .obat-stat-icon {
     width: 58px;
     height: 58px;
     min-width: 58px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
 }


 .obat-stat-icon.green {
     color: #4c8f22;
     background: #f0f6e9;
 }


 .obat-stat-icon.blue {
     color: #064b9b;
     background: #eef4fb;
 }


 .obat-stat-icon svg {
     width: 29px;
     height: 29px;
 }


 /* =========================================================
   STAT CONTENT
========================================================= */

 .obat-stat-content {
     min-width: 0;

     flex: 1;
 }


 .obat-stat-title {
     display: block;
     margin-bottom: 4px;
     color: #333;
     font-size: 13px;
     line-height: 1.35;
 }


 .obat-stat-number {
     display: block;
     margin: 0 0 6px;
     color: #111;
     font-size: 27px;
     font-weight: 600;
     line-height: 1.1;
     white-space: nowrap;
 }


 .obat-stat-number .woocommerce-Price-amount {
     font-size: inherit;
 }


 .obat-stat-number .woocommerce-Price-currencySymbol {
     font-size: .85em;
 }


 .obat-stat-content a {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: #064b9b;
     font-size: 12px;
     line-height: 1.4;
     text-decoration: none;
     white-space: nowrap;
 }


 .obat-stat-content a span {
     font-size: 16px;
     line-height: 1;
     transition: transform .2s ease;
 }


 .obat-stat-content a:hover {
     color: #4c8f22;
 }


 .obat-stat-content a:hover span {
     transform: translateX(3px);
 }

 .page-id-26 #Subheader {
     display: none;
 }

 /* =========================================================
   MAIN GRID
========================================================= */

 .obat-dashboard-grid {
     width: 100%;
 }


 /* =========================================================
   COMMON CARD
========================================================= */

 .obat-dashboard-card {
     min-width: 0;
     background: #fff;
     border: 1px solid #e7e7e7;
     border-radius: 14px;
     box-shadow:
         0 4px 16px rgba(0, 0, 0, .035);
     padding: 24px;
     margin-bottom: 50px;
     box-sizing: border-box;
 }


 /* =========================================================
   CARD HEADER
========================================================= */

 .obat-dashboard-card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     padding-bottom: 14px;
     border-bottom: 1px solid #e6e6e6;
 }


 .obat-dashboard-card-header h2 {
     margin: 0;
     color: #151515;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.4;
 }


 .obat-dashboard-card-header a {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: #064b9b;
     font-size: 13px;
     font-weight: 500;
     text-decoration: none;
     white-space: nowrap;
 }


 .obat-dashboard-card-header a span {
     font-size: 17px;
 }


 .obat-dashboard-card-header a:hover {
     color: #4c8f22;
 }


 /* =========================================================
   ORDERS LIST
========================================================= */

 .obat-orders-list {
     width: 100%;
 }


 .obat-order-item {
     display: grid;

     grid-template-columns:
         72px minmax(130px, 1fr) 105px 90px 22px;

     align-items: center;
     gap: 14px;
     min-width: 0;
     padding: 14px 0;
     border-bottom: 1px solid #ededed;
 }


 .obat-order-item:last-child {
     border-bottom: 0;
 }


 /* =========================================================
   ORDER THUMBNAIL
========================================================= */

 .obat-order-thumb {
     width: 72px;
     height: 72px;
     overflow: hidden;
     border-radius: 9px;
     background: #f7f7f7;
 }


 .obat-order-thumb a {
     display: block;
     width: 100%;
     height: 100%;
 }


 .obat-order-thumb img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: contain;
 }


 .obat-order-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #aaa;
 }


 .obat-order-placeholder svg {
     width: 30px;
     height: 30px;
 }


 /* =========================================================
   ORDER DETAILS
========================================================= */

 .obat-order-details {
     min-width: 0;
 }


 .obat-order-number {
     display: block;
     margin-bottom: 5px;
     color: #151515;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.3;
     text-decoration: none;
 }


 .obat-order-number:hover {
     color: #064b9b;
 }


 .obat-order-date {
     display: block;
     margin-bottom: 2px;
     color: #555;
     font-size: 12px;
     line-height: 1.4;
 }


 .obat-order-items {
     display: block;
     color: #777;
     font-size: 12px;
     line-height: 1.4;
 }


 /* =========================================================
   ORDER STATUS
========================================================= */

 .obat-order-status {
     min-width: 0;
 }


 .obat-order-status span {
     display: inline-block;
     padding: 7px 11px;
     border-radius: 8px;
     font-size: 11px;
     font-weight: 600;
     line-height: 1.3;
     white-space: nowrap;
     background: #eef4fb;
     color: #064b9b;
 }


 /* Completed */

 .obat-order-status .status-completed {
     background: #edf7e7;
     color: #4c8f22;
 }


 /* Processing */

 .obat-order-status .status-processing {
     background: #fff4d5;
     color: #d58b00;
 }


 /* Pending */

 .obat-order-status .status-pending {
     background: #fff4d5;
     color: #d58b00;
 }


 /* On Hold */

 .obat-order-status .status-on-hold {
     background: #f3efe5;
     color: #856404;
 }


 /* Cancelled */

 .obat-order-status .status-cancelled {
     background: #fff0f0;
     color: #c62828;
 }


 /* Failed */

 .obat-order-status .status-failed {
     background: #fff0f0;
     color: #c62828;
 }


 /* =========================================================
   ORDER PRICE
========================================================= */

 .obat-order-price {
     color: #151515;
     font-size: 14px;
     font-weight: 600;
     white-space: nowrap;
 }


 .obat-order-price .woocommerce-Price-amount {
     font-size: inherit;
 }


 /* =========================================================
   ORDER ARROW
========================================================= */

 .obat-order-view {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #222;
     font-size: 20px;
     line-height: 1;
     text-decoration: none;
     transition:
         color .2s ease,
         transform .2s ease;
 }


 .obat-order-view:hover {
     color: #064b9b;
     transform: translateX(3px);
 }


 /* =========================================================
   EMPTY ORDERS
========================================================= */

 .obat-empty-orders {
     padding: 40px 20px;
     text-align: center;
 }


 .obat-empty-orders-icon {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     border-radius: 50%;
     background: #f0f6e9;
     color: #4c8f22;
 }


 .obat-empty-orders-icon svg {
     width: 28px;
     height: 28px;
 }


 .obat-empty-orders h3 {
     margin: 0 0 5px;
     color: #151515;
     font-size: 17px;
 }


 .obat-empty-orders p {
     margin: 0 0 18px;

     color: #666;

     font-size: 13px;
 }


 .obat-empty-orders a {
     display: inline-flex;

     padding: 11px 20px;

     border-radius: 7px;

     background: #064b9b;

     color: #fff;

     font-size: 13px;

     font-weight: 600;

     text-decoration: none;
 }


 /* =========================================================
   QUICK LINKS
========================================================= */

 .obat-quick-links-list {
     display: flex;

     flex-direction: column;

     width: 100%;
 }


 .obat-quick-links-list>a {
     display: flex;

     align-items: center;

     gap: 12px;

     min-height: 57px;

     border-bottom: 1px solid #ededed;

     color: #171717;

     font-size: 14px;

     text-decoration: none;

     transition:
         color .2s ease,
         padding .2s ease;
 }


 .obat-quick-links-list>a:last-child {
     border-bottom: 0;
 }


 .obat-quick-links-list>a:hover {
     padding-left: 3px;

     color: #064b9b;
 }


 .obat-quick-icon {
     width: 24px;
     height: 24px;

     min-width: 24px;

     display: flex;

     align-items: center;
     justify-content: center;

     color: #222;
 }


 .obat-quick-icon svg {
     width: 20px;
     height: 20px;
 }


 .obat-quick-links-list>a:hover .obat-quick-icon {
     color: #064b9b;
 }


 .obat-quick-text {
     flex: 1;
 }


 .obat-quick-arrow {
     color: #222;

     font-size: 21px;

     font-weight: 400;

     line-height: 1;
 }


 .obat-quick-links-list>a:hover .obat-quick-arrow {
     color: #064b9b;
 }


 /* =========================================================
   PROMO
========================================================= */

 .obat-dashboard-promo {
     display: flex;

     align-items: center;

     gap: 22px;

     width: 100%;

     padding: 22px 28px;

     box-sizing: border-box;

     border: 1px solid #e5eddc;

     border-radius: 14px;

     background:
         linear-gradient(100deg,
             #f1f7e9 0%,
             #f8faf5 100%);
 }


 .obat-promo-icon {
     width: 58px;
     height: 58px;

     min-width: 58px;

     display: flex;

     align-items: center;
     justify-content: center;

     border-radius: 50%;

     background: #fff;

     color: #4c8f22;
 }


 .obat-promo-icon svg {
     width: 31px;
     height: 31px;
 }


 .obat-promo-content {
     flex: 1;

     min-width: 0;
 }


 .obat-promo-content h3 {
     margin: 0 0 5px;

     color: #4c8f22;

     font-size: 17px;

     font-weight: 600;

     line-height: 1.4;
 }


 .obat-promo-content p {
     margin: 0;

     color: #555;

     font-size: 13px;

     line-height: 1.5;
 }


 .obat-promo-button {
     display: inline-flex;

     align-items: center;
     justify-content: center;

     min-width: 120px;

     padding: 12px 22px;

     border-radius: 7px;

     background: #064b9b;

     color: #fff;

     font-size: 13px;

     font-weight: 600;

     text-decoration: none;

     transition:
         background .25s ease,
         transform .25s ease;
 }


 .obat-promo-button:hover {
     background: #043b7c;

     color: #fff;

     transform: translateY(-2px);
 }


 /* =========================================================
   RESPONSIVE - 1300px
========================================================= */

 @media (max-width: 1300px) {

     .obat-dashboard-stats {
         grid-template-columns:
             repeat(2, minmax(0, 1fr));
     }

 }


 /* =========================================================
   RESPONSIVE - 1100px
========================================================= */

 @media (max-width: 1100px) {



     .obat-order-item {
         grid-template-columns:
             65px minmax(100px, 1fr) 90px 80px 18px;

         gap: 10px;
     }

     .obat-order-thumb {
         width: 65px;
         height: 65px;
     }

 }


 /* =========================================================
   RESPONSIVE - 900px
========================================================= */

 @media (max-width: 900px) {



     .obat-stat-card {
         min-height: 115px;
     }

 }


 /* =========================================================
   RESPONSIVE - 700px
========================================================= */

 @media (max-width: 700px) {

     .obat-dashboard-welcome h1 {
         font-size: 28px;
     }

     .obat-dashboard-welcome p {
         font-size: 14px;
     }

     .obat-dashboard-stats {
         grid-template-columns: 1fr;
         gap: 12px;
     }

     .obat-dashboard-card {
         padding: 18px;
     }

     .obat-order-item {
         grid-template-columns:
             62px minmax(0, 1fr) 22px;

         gap: 12px;
     }

     .obat-order-thumb {
         width: 62px;
         height: 62px;
     }

     .obat-order-status,
     .obat-order-price {
         display: none;
     }

     .obat-order-view {
         font-size: 18px;
     }

     .obat-dashboard-promo {
         flex-direction: column;

         align-items: center;

         text-align: center;

         padding: 25px 20px;
     }

     .obat-promo-button {
         width: 100%;
     }

 }


 /* =========================================================
   RESPONSIVE - 500px
========================================================= */

 @media (max-width: 500px) {

     .obat-dashboard-welcome h1 {
         font-size: 24px;
     }

     .obat-dashboard-card-header {
         align-items: flex-start;

         flex-direction: column;

         gap: 7px;
     }

     .obat-stat-card {
         padding: 18px;
     }

     .obat-stat-icon {
         width: 52px;
         height: 52px;

         min-width: 52px;
     }

     .obat-stat-number {
         font-size: 25px;
     }

     .obat-order-item {
         padding: 12px 0;
     }

     .obat-order-thumb {
         width: 58px;
         height: 58px;
     }

     .obat-order-number {
         font-size: 13px;
     }

     .obat-order-date,
     .obat-order-items {
         font-size: 11px;
     }

 }