.king-addons-event-calendar { width: 100%; } .king-addons-event-calendar__list { display: grid; grid-template-columns: 1fr; gap: 16px; } .king-addons-event-calendar__item { width: 100%; } .king-addons-event-calendar__card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .king-addons-event-calendar__card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12); } .king-addons-event-calendar__badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; padding: 10px 12px; background-color: #0ea5e9; color: #ffffff; border-radius: 10px; text-align: center; font-weight: 700; line-height: 1.1; gap: 4px; } .king-addons-event-calendar__badge-day { font-size: 18px; } .king-addons-event-calendar__badge-month { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .king-addons-event-calendar__body { display: flex; flex-direction: column; gap: 10px; } .king-addons-event-calendar__header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .king-addons-event-calendar__title { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; } .king-addons-event-calendar__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid #94a3b8; color: #475569; font-size: 12px; font-weight: 700; } .king-addons-event-calendar__meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #475569; font-weight: 600; } .king-addons-event-calendar__meta-item { display: inline-flex; align-items: center; gap: 6px; } .king-addons-event-calendar__description { color: #475569; line-height: 1.6; } .king-addons-event-calendar__actions { display: flex; align-items: center; } .king-addons-event-calendar__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background-color: #111827; color: #ffffff; border-radius: 8px; border: 1px solid #111827; text-decoration: none; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .king-addons-event-calendar__button:hover { background-color: #0b1220; border-color: #0b1220; } .king-addons-event-calendar__card.is-compact { padding: 12px; gap: 10px; } .king-addons-event-calendar__card.is-ongoing { border-color: #0ea5e9; box-shadow: 0 12px 30px rgba(14, 165, 233, 0.16); } .king-addons-event-calendar__card.is-anim-hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .king-addons-event-calendar__card.is-anim-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16); } .king-addons-event-calendar__card.is-anim-hover-fade { transition: opacity 0.25s ease, transform 0.25s ease; } .king-addons-event-calendar__card.is-anim-hover-fade:hover { opacity: 0.92; transform: translateY(-4px); } .king-addons-event-calendar__card.is-anim-hover-zoom { transition: transform 0.25s ease, box-shadow 0.25s ease; } .king-addons-event-calendar__card.is-anim-hover-zoom:hover { transform: scale(1.02); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18); } /* Filters (Pro) */ .king-addons-event-calendar__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .king-addons-event-calendar__filter { display: inline-flex; align-items: center; gap: 8px; } .king-addons-event-calendar__filter input, .king-addons-event-calendar__filter select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; font-size: 14px; } @media (max-width: 768px) { .king-addons-event-calendar__card { grid-template-columns: 1fr; } .king-addons-event-calendar__badge { width: fit-content; } .king-addons-event-calendar__filters { flex-direction: column; align-items: stretch; } .king-addons-event-calendar__filter { width: 100%; justify-content: flex-start; } }