/* ============================================================
   Párkák Foglaltsági Naptár – Frontend CSS
   Stílus: parkak.hu – elegáns esküvői esztétika
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Raleway:wght@300;400;500;600&display=swap');

/* ── Variables ── */
.pkc-wrapper {
    --pkc-cream:      #faf6f1;
    --pkc-rose:       #c4887a;
    --pkc-rose-light: #f0dbd7;
    --pkc-rose-dark:  #a06860;
    --pkc-gold:       #c9a060;
    --pkc-gold-light: #f0e0c4;
    --pkc-brown:      #3d2c1e;
    --pkc-brown-mid:  #7a5c4a;
    --pkc-brown-light:#b09880;
    --pkc-border:     #e8d5c6;
    --pkc-shadow:     rgba(61,44,30,0.12);
    --pkc-radius:     14px;
    --pkc-cell-size:  clamp(38px, 9vw, 58px);
    --pkc-font-body:  'Raleway', sans-serif;
    --pkc-font-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ── Wrapper ── */
.pkc-wrapper {
    font-family: var(--pkc-font-body);
    color: var(--pkc-brown);
    background: var(--pkc-cream);
    border: 1px solid var(--pkc-border);
    border-radius: var(--pkc-radius);
    padding: 28px 24px 24px;
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 4px 32px var(--pkc-shadow);
    position: relative;
    overflow: visible;
}

.pkc-wrapper::before {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pkc-gold), transparent);
    margin: 0 auto 24px;
}

/* ── Header ── */
.pkc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.pkc-title {
    text-align: center;
    line-height: 1.1;
}

.pkc-month-name {
    display: block;
    font-family: var(--pkc-font-serif);
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--pkc-brown);
    font-style: italic;
}

.pkc-year {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--pkc-brown-mid);
    text-transform: uppercase;
    margin-top: 2px;
}

.pkc-nav {
    background: none;
    border: 1.5px solid var(--pkc-border);
    color: var(--pkc-brown-mid);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.pkc-nav:hover {
    background: var(--pkc-rose-light);
    border-color: var(--pkc-rose);
    color: var(--pkc-rose-dark);
    transform: scale(1.08);
}

/* ── Grid ── */
.pkc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Day-of-week labels */
.pkc-dow-labels {
    margin-bottom: 6px;
}

.pkc-dow {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pkc-brown-light);
    padding: 4px 0;
}

/* ── Day cells ── */
.pkc-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: default;
    transition: background 0.18s, transform 0.18s;
    min-height: 38px;
}

.pkc-cell.pkc-empty {
    background: transparent;
}

.pkc-cell.pkc-past .pkc-day-num {
    color: var(--pkc-brown-light);
    opacity: 0.55;
}

.pkc-day-num {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--pkc-brown);
    line-height: 1;
    z-index: 1;
}

/* Today */
.pkc-cell.pkc-today {
    background: var(--pkc-gold-light);
}
.pkc-cell.pkc-today .pkc-day-num {
    color: var(--pkc-gold);
    font-weight: 700;
}
.pkc-cell.pkc-today::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pkc-gold);
}

/* Booked */
.pkc-cell.pkc-booked {
    background: var(--pkc-rose-light);
    cursor: pointer;
}
.pkc-cell.pkc-booked .pkc-day-num {
    color: var(--pkc-rose-dark);
    font-weight: 700;
}
.pkc-cell.pkc-booked:hover,
.pkc-cell.pkc-booked:focus {
    background: var(--pkc-rose);
    transform: scale(1.06);
    outline: none;
    z-index: 10;
}
.pkc-cell.pkc-booked:hover .pkc-day-num,
.pkc-cell.pkc-booked:focus .pkc-day-num {
    color: #fff;
}
.pkc-cell.pkc-booked:hover .pkc-dot,
.pkc-cell.pkc-booked:focus .pkc-dot {
    background: rgba(255,255,255,0.7);
}

/* Past booked */
.pkc-cell.pkc-past-booked {
    background: #efe5e0;
    cursor: pointer;
}
.pkc-cell.pkc-past-booked .pkc-day-num {
    color: var(--pkc-brown-light);
}

/* Dots */
.pkc-dot-row {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    z-index: 1;
}
.pkc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pkc-rose);
    flex-shrink: 0;
}

/* ── Popup ── */
.pkc-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 260px;
    pointer-events: none;
}

/* Show popup on hover/focus */
.pkc-cell.pkc-booked:hover .pkc-popup,
.pkc-cell.pkc-booked:focus .pkc-popup,
.pkc-cell.pkc-booked.pkc-popup-open .pkc-popup {
    display: block;
    animation: pkc-fadein 0.18s ease;
}

@keyframes pkc-fadein {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pkc-popup-inner {
    background: #fff;
    border: 1px solid var(--pkc-rose-light);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 32px rgba(61,44,30,0.18);
    pointer-events: auto;
}

/* Arrow */
.pkc-popup-inner::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid var(--pkc-rose-light);
    border-bottom: 1px solid var(--pkc-rose-light);
}

.pkc-popup-header {
    font-family: var(--pkc-font-serif);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--pkc-rose-dark);
    border-bottom: 1px solid var(--pkc-rose-light);
    padding-bottom: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.pkc-booking-item {
    margin-bottom: 10px;
}
.pkc-booking-item:last-child {
    margin-bottom: 0;
}

.pkc-service-icon {
    margin-right: 5px;
    font-size: 0.85rem;
}

.pkc-service-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pkc-brown);
    line-height: 1.3;
    display: inline;
}

.pkc-location {
    font-size: 0.78rem;
    color: var(--pkc-brown-mid);
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.pkc-location-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    margin-top: 1px;
}

/* ── Legend ── */
.pkc-legend {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--pkc-border);
}

.pkc-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: var(--pkc-brown-mid);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.pkc-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pkc-legend-free   { background: var(--pkc-cream); border: 1.5px solid var(--pkc-border); }
.pkc-legend-booked { background: var(--pkc-rose-light); border: 1.5px solid var(--pkc-rose); }
.pkc-legend-today  { background: var(--pkc-gold-light); border: 1.5px solid var(--pkc-gold); }

/* ── Loading overlay ── */
.pkc-loading {
    position: absolute;
    inset: 0;
    background: rgba(250,246,241,0.75);
    border-radius: var(--pkc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    backdrop-filter: blur(2px);
}

.pkc-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--pkc-rose-light);
    border-top-color: var(--pkc-rose);
    border-radius: 50%;
    animation: pkc-spin 0.7s linear infinite;
}

@keyframes pkc-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 420px) {
    .pkc-wrapper {
        padding: 18px 12px 16px;
    }
    .pkc-grid { gap: 3px; }
    .pkc-month-name { font-size: 1.4rem; }
    .pkc-popup { width: 220px; }
}

/* Edge: popup doesn't go off-screen on leftmost days */
.pkc-cell:nth-child(7n+2) .pkc-popup,
.pkc-cell:nth-child(7n+1) .pkc-popup {
    left: 0;
    transform: none;
}
.pkc-cell:nth-child(7n+2) .pkc-popup-inner::after,
.pkc-cell:nth-child(7n+1) .pkc-popup-inner::after {
    left: 20px;
}

/* rightmost */
.pkc-cell:nth-child(7n) .pkc-popup,
.pkc-cell:nth-child(7n-1) .pkc-popup {
    left: auto;
    right: 0;
    transform: none;
}
.pkc-cell:nth-child(7n) .pkc-popup-inner::after,
.pkc-cell:nth-child(7n-1) .pkc-popup-inner::after {
    left: auto;
    right: 20px;
    transform: rotate(45deg);
}