﻿/* =========================================================
   Axo Calendar - Base
========================================================= */

.axo-cal { position: relative; }

.axo-cal.is-loading > :not(.axo-loading-overlay) { opacity: .45; }

.axo-loading-overlay{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.55);
  z-index: 50;
  pointer-events: all;
  border-radius: 12px;
}
.axo-cal.is-loading .axo-loading-overlay { display: flex; }
.axo-loading-text{
  font-size: 12px;
  opacity: .82;
}

/* Loader */
.loader{
  width: 32px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,var(--e-global-color-el_color_1, #c6aa6b) 90%,#0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 40% 40%;
  animation: l46 1s infinite;
}
@keyframes l46{
  0%   { background-position: 0 0      ,100% 0,100% 100%,0 100%; }
  40%,
  50%  { background-position: 100% 100%,100% 0,0    0   ,0 100%; }
  90%,
  100% { background-position: 100% 100%,0 100%,0    0   ,100% 0; }
}

/* =========================================================
   Calendar Header (Original)
========================================================= */

.axo-cal-top{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px 12px 14px;
  background-color: var(--e-global-color-el_color_7_6);
  border-radius: 7px;
}

.axo-cal-title{
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.axo-cal-prev,
.axo-cal-next{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--e-global-color-el_color_1) !important;
  padding: 0 !important;
  min-height: auto;
}

.axo-cal-prev::before,
.axo-cal-next::before{
  color: var(--e-global-color-el_color_1);
  font-size: 16px;
  font-weight: 700;
  margin: 0 6px;
}

.axo-cal-prev::before { content: "→"; }
.axo-cal-next::before { content: "←"; }

.axo-cal-prev:hover,
.axo-cal-next:hover,
.axo-cal-prev:focus,
.axo-cal-next:focus{
  background: transparent !important;
  color: var(--e-global-color-el_color_1) !important;
  box-shadow: none !important;
}

/* =========================================================
   Grid / Responsive Layout
========================================================= */

.axo-cal-scroll { overflow-x: auto; padding-bottom: 6px; }

.axo-cal-grid{
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 10px;
  min-width: 860px;
}

@media (max-width: 1024px){
  .axo-cal-grid { min-width: 820px; }
}

@media (max-width: 768px){
  .axo-cal-top { flex-wrap: wrap; }
  .axo-cal-grid { min-width: 760px; }
}

@media (max-width: 480px){
  .axo-cal-grid { min-width: 720px; }
  .axo-day-panel { padding: 10px; }
  .axo-slotbtn { padding: 9px 10px; }
}

.axo-weekhead{
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
}

/* =========================================================
   Day Cells
========================================================= */

.axo-daycell{
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px;
  min-height: 78px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, opacity .15s;
}

.axo-daycell:hover { box-shadow: 0 0 0 2px rgba(0,0,0,.06); }

.axo-daycell.is-empty{
  visibility: hidden;
  cursor: default;
}

.axo-daycell .dtop{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.axo-daycell .gsmall{
  opacity: .55;
  font-size: 11px;
  margin-top: 6px;
}
.axo-daycell .dtop .jday{
  font-size: 18px;
  font-weight: 700;
}

.axo-badge{
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  opacity: .9;
}

.axo-badge.has-free { opacity: 1; font-weight: 700; }
.axo-badge.today    { opacity: 1; font-weight: 700; }

/* Today highlight (NOT faded) */
.axo-daycell.is-today{
  border-color: #bfa56b;
  box-shadow: 0 0 0 2px rgba(191,165,107,.18);
}

.axo-daycell.is-selected{
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}

/* Disabled: today and past */
.axo-daycell.is-disabled { cursor: not-allowed; }
.axo-daycell.is-disabled:hover { box-shadow: none; }
.axo-daycell.is-disabled:not(.is-today) { opacity: .55; }

/* Day states */
.axo-daycell.is-closed  { background: #fff2f2; border-color: #f3c9c9; }
.axo-daycell.is-full    { background: #fff4e8; border-color: #ffd8b0; }
.axo-daycell.is-booked  { background: #eef6ff; border-color: #c7dcff; }
.axo-daycell.is-open    { background: #effaf0; border-color: #cfe8d2; }

/* =========================================================
   Day Panel / Slots
========================================================= */

.axo-day-panel{
  margin-top: 14px;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.axo-day-title{ font-weight: 700; margin-bottom: 10px; }
.axo-day-controls{ display: none; margin: 8px 0; }
.axo-day-slots{ display: flex; flex-wrap: wrap; }
.axo-msg{ margin-top: 12px; }

.axo-slotbtn{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  font-size: 13px;
  line-height: 1.2;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  cursor: pointer;
  text-align: right;
  margin: 6px 6px 0 0;
  transition: box-shadow .15s, border-color .15s;
}

.axo-slotbtn[disabled]{ cursor: not-allowed; }
.axo-slotbtn.is-locked { opacity: .45; background: #efefef; border-color: #ddd; }
.axo-slotbtn.is-booked { opacity: 1; background: #fff4e8; border-color: #ffd8b0; }
.axo-slotbtn.is-hold   { opacity: 1; background: #fffbe6; border-color: #f0de99; }
.axo-slotbtn.is-free   { opacity: 1; }

.axo-slot-time{ display: block; width: 100%; text-align: right; }

.axo-slotbtn.is-selected{
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,.10);
}

.axo-actions{
  margin-top: 12px;
  display: none;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.axo-day-bulk-actions,
.axo-slot-bulk-actions{
  margin: 8px 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.axo-days-selected-count,
.axo-slots-selected-count{
  opacity: .7;
  font-size: 12px;
}

.axo-daycell-check{
  margin-inline-start: auto;
  transform: scale(1.05);
}

.axo-daycell.is-multi-selected{
  box-shadow: 0 0 0 2px rgba(0,0,0,.22);
}

.axo-slot-item{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px 0;
}

.axo-slot-check{
  transform: scale(1.05);
}

.axo-day-slots{
  display: flex;
  flex-direction: column;
}

.axo-slot-item .axo-slotbtn{
  width: 100%;
  margin: 0;
  text-align: right;
}

.axo-assign-user-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.axo-assign-user-wrap label{
  font-size: 12px;
  opacity: .85;
}

.axo-assign-user-search{
  min-width: 240px;
}

.axo-toggle-slot { display: none; }

/* =========================================================
   Modal (admin list move)
========================================================= */

.axo-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.axo-modal{
  background: #fff;
  border-radius: 14px;
  max-width: 980px;
  width: 92vw;
  max-height: 90vh;
  overflow: auto;
  padding: 14px;
}

.axo-modal-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* =========================================================
   Axo Calendar Header tweaks (Overrides)
========================================================= */

/* ===== Desktop (پیش‌فرض) ===== */
.axo-cal-top .axo-cal-title{
  font-size: 19px !important;
}

.axo-cal-top .axo-cal-prev,
.axo-cal-top .axo-cal-next{
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

/* ===== Tablet ===== */
@media (max-width: 1024px){
  .axo-cal-top .axo-cal-title{
    font-size: 15px !important;
  }

  .axo-cal-top .axo-cal-prev,
  .axo-cal-top .axo-cal-next{
    font-size: 14px !important;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px){
  .axo-cal-top .axo-cal-title{
    font-size: 12px !important;
  }

  .axo-cal-top .axo-cal-prev,
  .axo-cal-top .axo-cal-next{
    font-size: 12px !important;
  }
}

/* Remove any existing icon backgrounds (safe reset) */
.axo-cal-top .axo-cal-prev::before,
.axo-cal-top .axo-cal-prev::after,
.axo-cal-top .axo-cal-next::before,
.axo-cal-top .axo-cal-next::after{
  content: "" !important;
  background: none !important;
}

/* === Icons === */

/* ماه قبل */
.axo-cal-top .axo-cal-prev::before{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  background: url("https://dadphone.ir/wp-content/uploads/2025/12/chevron-right-solid-full.svg") no-repeat center / contain !important;
}

/* ماه بعد */
.axo-cal-top .axo-cal-next{
  flex-direction: row-reverse !important;
}

.axo-cal-top .axo-cal-next::before{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  background: url("https://dadphone.ir/wp-content/uploads/2025/12/chevron-left-solid-full.svg") no-repeat center / contain !important;
}

/* تغییر رنگ آیکون‌ها بدون تغییر اندازه */
.axo-cal-top .axo-cal-prev::before,
.axo-cal-top .axo-cal-next::before{
  filter: brightness(0) saturate(100%) invert(79%) sepia(16%) saturate(398%) hue-rotate(356deg) brightness(92%) contrast(88%) !important;
}

/* =========================================================
   My Appointments (Frontend endpoint: /appointments/)
========================================================= */
.woocommerce-account .woocommerce-MyAccount-content .axo-my-appointments,
.woocommerce-account .woocommerce-MyAccount-content .axo-my-appointments *{
  font-family: var( --e-global-typography-el_content_1-font-family ), Sans-serif !important;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-my-appointments-top{
  text-align: left;
  margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-my-appointments h3{
  margin-bottom: 20px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-empty-reservation{
  width: 148px;
  min-height: 90px;
  margin: 56px auto 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 12px;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-empty-reservation__icon{
  width: 52.05px;
  height: 50.75px;
  display: block;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-empty-reservation__text{
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  color: #000;
  text-align: center;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn{
  display: inline-block;
  width: auto;
  background: #323040;
  color: #fff;
  padding: 15px 20px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}
.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn,
.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn:visited,
.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn:focus{
  color: #fff !important;
  text-decoration: none;
  font-family: var( --e-global-typography-el_content_1-font-family ), Sans-serif !important;
}
.woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn:hover{
  background: #4B4960;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table-wrap{
  background: #fff;
  padding: 20px;
  border-radius: 13px;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table{
  margin: 0;
  border-bottom: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table,
.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table th,
.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table td{
  font-family: var( --e-global-typography-el_content_1-font-family ), Sans-serif !important;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table th,
.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table td{
  text-align: center !important;
  vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content .axo-appointments-table thead th{
  font-weight: 700;
  border-bottom: 2px solid var(--e-global-color-el_color_1) !important;
}

.axo-status-pill{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.axo-status-pill--confirmed{
  background: #eaf8ef;
  color: #1f7a3d;
}
.axo-status-pill--hold{
  background: #fff9e8;
  color: #8a6c00;
}
.axo-status-pill--cancelled{
  background: #fdecec;
  color: #b42318;
}

@media (max-width: 1024px){
  .woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn{
    font-size: 14px;
  }
}

@media (max-width: 767px){
  .woocommerce-account .woocommerce-MyAccount-content .axo-new-booking-btn{
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  table.axo-appointments-table.shop_table_responsive{
    width: 100%;
    border-collapse: separate;
    background: transparent;
  }

  table.axo-appointments-table.shop_table_responsive thead{
    display: none !important;
  }

  table.axo-appointments-table.shop_table_responsive tbody,
  table.axo-appointments-table.shop_table_responsive tr{
    display: block;
    width: 100%;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr{
    direction: rtl;
    margin-bottom: 20px !important;
    border-top: 2px solid #D2BA93 !important;
    border-bottom: 2px solid #D2BA93 !important;
    border-right: 2px solid #D2BA93 !important;
    border-left: 2px solid #D2BA93 !important;
    border-radius: 18px;
    background: #fff !important;
    padding: 16px 16px 12px;
    color: #323040;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "date   status"
      "day    time"
      "divider divider"
      "id     created";
    row-gap: 10px;
    column-gap: 12px;
    box-shadow: none !important;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr:last-child{
    margin-bottom: 0 !important;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td{
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #323040 !important;
    display: block;
    min-width: 0;
    line-height: 1.6;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(1){ grid-area: id; }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(2){ grid-area: status; }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(3){
    grid-area: divider;
    height: 0;
    border-top: 2px solid #D2BA93 !important;
    margin: 6px 0 4px;
    padding: 0 !important;
    color: transparent !important;
    overflow: hidden;
  }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(4){ grid-area: day; }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(5){ grid-area: date; }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(6){ grid-area: time; }
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(7){ grid-area: created; }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(2),
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(4),
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(5),
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(6){
    font-size: 14px !important;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(1),
  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(7){
    font-size: 13px !important;
    opacity: 0.75;
    white-space: nowrap;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(1){
    text-align: left;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(1)::before{
    content: "شناسه نوبت: ";
    font-weight: 500;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(7){
    text-align: right;
  }

  table.axo-appointments-table.shop_table_responsive > tbody > tr > td:nth-child(2) .axo-status-pill{
    font-size: 13px !important;
    font-weight: 700 !important;
  }
}

/* =========================================================
   AXO Calendar - Elementor Pro (Full Unified Version)
   Desktop + Tablet: synced width
   Mobile: 1-column cards + weekday label + fake-sticky header
========================================================= */

/* ===================== BASE ===================== */
.axo-cal{
  --axo-gap: 8px;
  --axo-cell: 110px;
  --axo-cal-w: calc((7 * var(--axo-cell)) + (6 * var(--axo-gap)));
}

/* hide horizontal overflow only */
.axo-cal,
.axo-cal *{
  overflow-x: clip !important;
  overflow-x: hidden !important;
}

.axo-cal .axo-cal-grid{
  display: grid !important;
  gap: var(--axo-gap) !important;
  grid-template-columns: repeat(7, var(--axo-cell)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.axo-cal .axo-daycell,
.axo-cal .axo-weekhead,
.axo-cal .axo-cal-title{
  min-width: 0 !important;
}

.axo-cal .axo-daycell .axo-weekday{
  display: none !important;
}

/* ===================== DESKTOP + TABLET ONLY ===================== */
@media (min-width: 601px){
  .axo-cal .axo-cal-top,
  .axo-cal .axo-cal-scroll,
  .axo-cal .axo-day-panel{
    width: var(--axo-cal-w) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .axo-cal.is-loading .axo-loading-overlay{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 100001 !important;
  }
}

/* ===================== TABLET ===================== */
@media (max-width: 1024px) and (min-width: 601px){
  .axo-cal{
    --axo-cell: 90px;
  }
}

/* ===================== MOBILE ===================== */
@media (max-width: 600px) {
  .axo-cal.is-loading .axo-loading-overlay{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 100001 !important;
  }

  .axo-cal,
  .axo-cal .axo-cal-scroll {
    overflow: visible !important;
  }

  .axo-cal .axo-daycell .axo-weekday {
    display: inline-block !important;
  }

  .axo-cal .axo-cal-grid {
    min-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .axo-cal .axo-weekhead {
    display: none !important;
  }

  .axo-cal .axo-daycell.is-empty {
    display: none !important;
  }

  .axo-cal .axo-daycell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .axo-cal .axo-daycell * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .axo-cal .axo-daycell .gsmall {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    direction: ltr !important;
  }

  .axo-cal .axo-daycell .gsmall .axo-weekday {
    order: 1 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    direction: rtl !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: .75;
  }

  .axo-cal .axo-daycell .gsmall .axo-badge {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    direction: rtl !important;
    text-align: right !important;
  }

  .axo-cal .axo-daycell .gsmall .axo-badge + .axo-badge {
    margin-left: 0 !important;
    margin-right: 6px !important;
  }

  /* ===================== Fake-Sticky Header (Mobile) ===================== */

  .axo-cal .axo-cal-top{
    background-color: var(--e-global-color-el_color_7_6) !important;
    backdrop-filter: blur(4px);
    opacity: 0.95;
  }

  .axo-cal .axo-cal-top.is-fake-sticky{
    position: fixed !important;
    top: 90px !important;
    z-index: 9999 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .axo-cal .axo-cal-top.is-fake-sticky{
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    width: 90% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}
