/* ================================================================
   Year Calendar Plugin — Frontend CSS
   Faithful replica of calendarr.com visual style
   ================================================================ */

/* ── Variables ── */
.ycal-wrap {
  --ycal-font:           Arial, Helvetica, sans-serif;
  --ycal-blue:           #2d6cdf;
  --ycal-blue-dark:      #1a4fa3;
  --ycal-blue-light:     #e8f0fc;
  --ycal-red:            #d0021b;
  --ycal-red-light:      #fde8eb;
  --ycal-today-bg:       #f5a623;
  --ycal-today-color:    #fff;
  --ycal-weekend-color:  #d0021b;
  --ycal-pad-color:      #aaa;
  --ycal-pad-bg:         #f9f9f9;
  --ycal-border:         #dde3ef;
  --ycal-shadow:         0 1px 4px rgba(0,0,0,.10);
  --ycal-header-h:       36px;
  --ycal-cell-size:      32px;
  --ycal-gap:            12px;

  font-family:  var(--ycal-font);
  font-size:    14px;
  color:        #333;
  line-height:  1.3;
  width:        100%;
  box-sizing:   border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ── Year title bar ── */
.ycal-year-title {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   18px;
}

.ycal-h2 {
  font-size:    22px;
  font-weight:  700;
  color:        var(--ycal-blue-dark);
  margin:       0;
  padding:      0;
  border:       none;
  line-height:  1;
}

.ycal-country-badge {
  display:          inline-block;
  background:       var(--ycal-blue);
  color:            #fff;
  font-size:        11px;
  font-weight:      700;
  padding:          3px 8px;
  border-radius:    3px;
  letter-spacing:   .06em;
  text-transform:   uppercase;
}

/* ── 12-month grid: 3 columns on desktop ── */
.ycal-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--ycal-gap);
}

/* ── Single month card ── */
.ycal-month {
  background:     #fff;
  border:         1px solid var(--ycal-border);
  border-radius:  4px;
  box-shadow:     var(--ycal-shadow);
  overflow:       hidden;
}

/* ── Month header (blue bar) ── */
.ycal-month-header {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  background:       var(--ycal-blue);
  color:            #fff;
  padding:          0 10px;
  height:           var(--ycal-header-h);
}

.ycal-month-name {
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .04em;
}

.ycal-month-year {
  font-size:   12px;
  opacity:     .8;
  font-weight: 400;
}

/* ── Day-of-week header row ── */
.ycal-dow-row {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  background:            var(--ycal-blue-light);
  border-bottom:         1px solid var(--ycal-border);
}

.ycal-dow-row.ycal-dow-row-weeks {
  grid-template-columns: 42px repeat(7, 1fr);
}

.ycal-dow {
  text-align:   center;
  font-size:    11px;
  font-weight:  700;
  color:        var(--ycal-blue-dark);
  padding:      5px 0 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ycal-dow-weekend {
  color: var(--ycal-red);
}

/* ── Day cells grid ── */
.ycal-days {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
}

.ycal-days.ycal-days-weeks {
  grid-template-columns: 42px repeat(7, 1fr);
}

.ycal-week-header,
.ycal-week-num {
  background: #f2f6fd;
  color: var(--ycal-blue-dark);
  font-weight: 700;
}

.ycal-week-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ycal-cell-size);
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
}

.ycal-day {
  position:    relative;
  text-align:  center;
  padding:     4px 2px;
  min-height:  var(--ycal-cell-size);
  border-right:  1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  cursor:        default;
  transition:    background .1s;
}

.ycal-day:hover {
  background: #f5f8ff;
}

.ycal-dn {
  display:     block;
  font-size:   13px;
  font-weight: 400;
  line-height: 22px;
  color:       #333;
}

/* ── Out-of-month padding days ── */
.ycal-day-pad {
  background: var(--ycal-pad-bg);
}

.ycal-day-pad .ycal-dn {
  color: var(--ycal-pad-color);
}

.ycal-day-pad:hover {
  background: var(--ycal-pad-bg);
}

/* ── Weekend days ── */
.ycal-weekend .ycal-dn {
  color: var(--ycal-red);
}

/* ── Today ── */
.ycal-today {
  background: var(--ycal-today-bg) !important;
}

.ycal-today .ycal-dn {
  color:       var(--ycal-today-color) !important;
  font-weight: 700;
}

.ycal-today:hover {
  background: #e09520 !important;
}

/* ── Holiday cell ── */
.ycal-holiday {
  background: var(--ycal-red-light);
  cursor:     pointer;
}

.ycal-holiday .ycal-dn {
  color:       var(--ycal-red);
  font-weight: 700;
}

.ycal-holiday:hover {
  background: #f9ccd2;
}

/* ── Tooltip on holiday hover ── */
.ycal-day[data-holiday]:hover::after {
  content:         attr(data-holiday);
  position:        absolute;
  bottom:          calc(100% + 6px);
  left:            50%;
  transform:       translateX(-50%);
  background:      #222;
  color:           #fff;
  font-size:       11px;
  font-family:     var(--ycal-font);
  padding:         5px 9px;
  border-radius:   3px;
  white-space:     nowrap;
  z-index:         999;
  pointer-events:  none;
  box-shadow:      0 2px 8px rgba(0,0,0,.25);
  max-width:       180px;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.ycal-day[data-holiday]:hover::before {
  content:        '';
  position:       absolute;
  bottom:         calc(100% + 2px);
  left:           50%;
  transform:      translateX(-50%);
  border:         4px solid transparent;
  border-top-color: #222;
  z-index:        1000;
  pointer-events: none;
}

/* ── Holiday list below month ── */
.ycal-hlist {
  border-top:  2px solid var(--ycal-blue-light);
  padding:     6px 8px 8px;
  background:  #fafbff;
}

.ycal-hitem {
  display:       flex;
  align-items:   flex-start;
  gap:           7px;
  padding:       3px 0;
  border-bottom: 1px solid #eef0f8;
  font-size:     11px;
  line-height:   1.35;
}

.ycal-hitem:last-child {
  border-bottom: none;
}

.ycal-hitem-day {
  flex-shrink:  0;
  width:        20px;
  font-weight:  700;
  color:        var(--ycal-red);
  text-align:   right;
}

.ycal-hitem-name {
  color: #444;
}

/* ── Legend ── */
.ycal-legend {
  display:     flex;
  flex-wrap:   wrap;
  gap:         16px;
  margin-top:  14px;
  padding:     10px 12px;
  background:  #f7f9ff;
  border:      1px solid var(--ycal-border);
  border-radius: 4px;
  font-size:   12px;
  color:       #555;
}

.ycal-legend-item {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.ycal-legend-swatch {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border-radius: 2px;
  border:        1px solid rgba(0,0,0,.1);
  flex-shrink:   0;
}

.ycal-legend-today   { background: var(--ycal-today-bg); }
.ycal-legend-holiday { background: var(--ycal-red-light); border: 1px solid var(--ycal-red); }
.ycal-legend-weekend { background: #fff; }
.ycal-legend-weekend::after {
  content:     '7';
  display:     block;
  text-align:  center;
  font-size:   10px;
  font-weight: 700;
  color:       var(--ycal-red);
  line-height: 16px;
}

/* ================================================================
   Responsive
   ================================================================ */

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .ycal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 560px) {
  .ycal-grid {
    grid-template-columns: 1fr;
  }

  .ycal-wrap {
    --ycal-cell-size: 38px;
  }

  .ycal-dn {
    font-size:   14px;
    line-height: 26px;
  }

  .ycal-dow {
    font-size: 10px;
  }
}

/* ================================================================
   Moon Phase Styles
   ================================================================ */

/* ── Small moon icon in the day cell (top-right corner) ── */
.ycal-cell-moon {
  position:    absolute;
  top:         1px;
  right:       2px;
  width:       10px;
  height:      10px;
  display:     block;
  cursor:      help;
  z-index:     2;
}

.ycal-cell-moon .ycal-moon-svg {
  width:   10px;
  height:  10px;
  display: block;
}

/* Tooltip on moon icon in cell */
.ycal-cell-moon:hover::after {
  content:        attr(data-moon);
  position:       absolute;
  bottom:         calc(100% + 5px);
  right:          0;
  background:     #333;
  color:          #fff;
  font-size:      10px;
  padding:        3px 7px;
  border-radius:  3px;
  white-space:    nowrap;
  z-index:        999;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.3);
}

/* ── Moon phase strip (below day grid, above holiday list) ── */
.ycal-moon-strip {
  display:          flex;
  flex-wrap:        wrap;
  align-items:      center;
  gap:              6px 10px;
  padding:          6px 8px 5px;
  background:       #f4f6fb;
  border-top:       1px solid #dde3ef;
  border-bottom:    1px solid #dde3ef;
  font-size:        11px;
  color:            #555;
}

.ycal-moon-item {
  display:      inline-flex;
  align-items:  center;
  gap:          3px;
  cursor:       help;
  position:     relative;
}

.ycal-moon-item .ycal-moon-svg {
  width:    14px;
  height:   14px;
  flex-shrink: 0;
}

.ycal-moon-day {
  font-weight:   600;
  color:         #444;
  font-size:     11px;
  font-variant-numeric: tabular-nums;
}

/* Tooltip on moon strip item */
.ycal-moon-item:hover::after {
  content:        attr(data-moon);
  position:       absolute;
  bottom:         calc(100% + 5px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #333;
  color:          #fff;
  font-size:      10px;
  padding:        3px 7px;
  border-radius:  3px;
  white-space:    nowrap;
  z-index:        999;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.3);
}

.ycal-moon-item:hover::before {
  content:        '';
  position:       absolute;
  bottom:         calc(100% + 1px);
  left:           50%;
  transform:      translateX(-50%);
  border:         4px solid transparent;
  border-top-color: #333;
  z-index:        1000;
  pointer-events: none;
}

/* ── Moon SVG base style ── */
.ycal-moon-svg {
  display:  inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Legend moon icons ── */
.ycal-legend .ycal-moon-svg {
  width:   16px;
  height:  16px;
  margin-right: 2px;
}

/* ================================================================
   Month header link (calendarr.com style)
   ================================================================ */

.ycal-month-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  text-decoration: none;
  color:           inherit;
  transition:      background .15s;
}

.ycal-month-link:hover {
  background: var(--ycal-blue-dark);
}

.ycal-month-link:hover .ycal-month-arrow {
  transform:   translateX(3px);
  opacity:     1;
}

/* Arrow ›  */
.ycal-month-arrow {
  font-size:   16px;
  font-weight: 400;
  opacity:     .65;
  margin-left: 4px;
  flex-shrink: 0;
  transition:  transform .15s, opacity .15s;
  line-height: 1;
}

/* Holiday list — clickable items */
.ycal-hitem-link {
  color:           var(--ycal-red);
  text-decoration: none;
}

.ycal-hitem-link:hover {
  text-decoration: underline;
  color:           var(--ycal-blue-dark);
}

/* ================================================================
   Export Bar & Dropdown
   ================================================================ */

.ycal-export-bar {
  display:         flex;
  justify-content: flex-end;
  margin-bottom:   12px;
  position:        relative;
  z-index:         50;
  font-family:     var(--ycal-font);
}

/* ── Trigger button ── */
.ycal-export-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 16px;
  background:    var(--ycal-blue);
  color:         #fff;
  border:        none;
  border-radius: 5px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
  user-select:   none;
  letter-spacing:.02em;
}

.ycal-export-btn:hover { background: var(--ycal-blue-dark); }

.ycal-export-icon {
  width:   15px;
  height:  15px;
  flex-shrink: 0;
}

.ycal-export-caret {
  font-size:   9px;
  margin-left: 2px;
  transition:  transform .2s;
}

.ycal-export-btn[aria-expanded="true"] .ycal-export-caret {
  transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.ycal-export-dropdown {
  position: relative;
  display:  inline-block;
}

.ycal-export-panel {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  min-width:     240px;
  background:    #fff;
  border:        1px solid var(--ycal-border);
  border-radius: 6px;
  box-shadow:    0 6px 24px rgba(0,0,0,.13);
  padding:       14px 16px 12px;
  z-index:       200;
}

.ycal-export-panel.open { display: block; }

/* ── Form sections ── */
.ycal-export-section {
  margin-bottom: 12px;
}

.ycal-export-section-title {
  font-size:     10px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:         #999;
  margin-bottom: 6px;
}

.ycal-export-radio {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   13px;
  color:       #333;
  padding:     4px 0;
  cursor:      pointer;
  line-height: 1.3;
}

.ycal-export-radio input { cursor: pointer; }

/* Month picker row */
.ycal-export-month-row {
  display:       none;
  margin-bottom: 10px;
}

.ycal-export-month-row.visible { display: block; }

.ycal-export-select {
  width:         100%;
  padding:       6px 8px;
  border:        1px solid var(--ycal-border);
  border-radius: 4px;
  font-size:     12px;
  color:         #333;
}

/* Format badges */
.ycal-fmt-badge {
  display:       inline-block;
  font-size:     9px;
  font-weight:   700;
  padding:       2px 5px;
  border-radius: 3px;
  letter-spacing:.04em;
  min-width:     34px;
  text-align:    center;
  flex-shrink:   0;
}

.ycal-fmt-xlsx { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.ycal-fmt-pdf  { background: #fde8eb; color: #c62828; border: 1px solid #ef9a9a; }
.ycal-fmt-docx { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

/* Divider between sections */
.ycal-export-section + .ycal-export-section {
  border-top:  1px solid #f0f0f0;
  padding-top: 10px;
}

/* ── Submit button ── */
.ycal-export-submit {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         100%;
  margin-top:    10px;
  padding:       9px 14px;
  background:    var(--ycal-blue);
  color:         #fff;
  border:        none;
  border-radius: 5px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
}

.ycal-export-submit:hover { background: var(--ycal-blue-dark); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .ycal-export-panel {
    right:     auto;
    left:      0;
    min-width: 220px;
  }
}