:root{
  --burgundy:#641f24;
  --burgundy-dark:#421419;
  --gold:#b99752;
  --cream:#f6f1e8;
  --text:#2f2925;
  --muted:#756d65;
  --white:#fff;
  --border:#e5d9c8;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--cream);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    system-ui,
    sans-serif;

  color:var(--text);

  background:
    linear-gradient(
      180deg,
      #fffaf2 0%,
      var(--cream) 100%
    );

  -webkit-font-smoothing:antialiased;
}


/* =========================================
   ΕΠΑΝΩ ΓΡΑΜΜΗ
   ========================================= */

body:before{
  content:"";
  display:block;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--burgundy),
      var(--gold),
      var(--burgundy)
    );
}


/* =========================================
   ΚΥΡΙΟ CONTAINER
   ========================================= */

.container{
  width:calc(100% - 28px);
  max-width:720px;

  margin:0 auto;

  padding:22px 0 44px;
}


/* =========================================
   ΠΑΛΙΟ H1
   ========================================= */

h1{
  margin:0 0 18px;

  padding:28px 20px;

  color:#fff;

  text-align:center;

  font-size:clamp(25px,7vw,36px);

  line-height:1.16;

  letter-spacing:-.02em;

  font-weight:750;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(185,151,82,.25),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--burgundy-dark),
      var(--burgundy)
    );

  box-shadow:
    0 14px 32px rgba(66,20,25,.18);
}


/* =========================================
   ΟΝΟΜΑ ΝΑΟΥ
   ========================================= */

.church-title{
  background:#ffffff;

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

  border-radius:26px;

  padding:25px 22px;

  margin:14px 0 22px;

  text-align:center;

  color:var(--burgundy);

  font-size:clamp(21px,5.5vw,28px);

  font-weight:800;

  line-height:1.35;

  box-shadow:
    0 10px 26px rgba(55,38,25,.10);
}


/* =========================================
   ΕΙΚΟΝΑ ΝΑΟΥ
   ========================================= */

.church-image{
  text-align:center;

  margin:10px auto 20px;
}

.church-image img{
  display:block;

  width:135px;
  height:135px;

  object-fit:contain;

  margin:0 auto;

  border-radius:18px;
}


/* =========================================
   ΚΟΥΜΠΙΑ
   ========================================= */

.container>p{
  margin:0 0 22px;

  text-align:center;
}

.btn{
  display:inline-flex;

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

  min-height:52px;

  width:100%;

  padding:0 20px;

  border-radius:16px;

  background:var(--burgundy);

  color:#fff;

  text-decoration:none;

  font-weight:700;

  font-size:16px;

  box-shadow:
    0 8px 20px rgba(100,31,36,.20);

  border:1px solid rgba(255,255,255,.15);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.btn:active{
  transform:scale(.98);

  box-shadow:
    0 4px 12px rgba(100,31,36,.16);
}

button.btn{
  font-family:inherit;
  cursor:pointer;
}

.btn.secondary{
  background:#fff;

  color:var(--burgundy);

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

  box-shadow:
    0 7px 18px rgba(55,38,25,.06);
}


/* =========================================
   ΕΠΟΜΕΝΗ ΑΚΟΛΟΥΘΙΑ
   ========================================= */

.next-event-card{
  position:relative;

  overflow:hidden;

  margin:0 0 22px;

  padding:25px 22px;

  border-radius:26px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(185,151,82,.25),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--burgundy-dark),
      var(--burgundy)
    );

  color:#fff;

  text-align:center;

  border:
    1px solid rgba(185,151,82,.35);

  box-shadow:
    0 14px 32px rgba(66,20,25,.22);
}


/* Τίτλος */

.next-card-label{
  position:relative;

  z-index:1;

  font-size:21px;

  font-weight:800;

  letter-spacing:1px;

  margin-bottom:10px;
}


/* Ημερομηνία */

.next-card-date{
  position:relative;

  z-index:1;

  font-size:20px;

  font-weight:700;

  margin-bottom:5px;
}


/* Ώρα */

.next-card-time{
  position:relative;

  z-index:1;

  font-size:32px;

  line-height:1.15;

  font-weight:800;

  margin:8px 0 12px;
}


/* Τίτλος ακολουθίας */

.next-card-title{
  position:relative;

  z-index:1;

  font-size:23px;

  font-weight:700;

  line-height:1.35;
}


/* Τοποθεσία */

.next-card-location{
  position:relative;

  z-index:1;

  margin-top:10px;

  font-size:16px;

  font-weight:600;
}


/* Αντίστροφη μέτρηση */

.next-card-countdown{
  position:relative;

  z-index:1;

  margin:16px auto 0;

  padding:11px 16px;

  border-radius:14px;

  background:rgba(255,255,255,.12);

  font-size:17px;

  font-weight:700;

  display:inline-block;
}


/* Απενεργοποίηση τυχόν παλιού εφέ */

.next-event-card::after{
  display:none !important;

  content:none !important;
}


/* =========================================
   RADIO FLOGA
   ========================================= */

.radio-player{
  width:100%;

  display:flex;

  justify-content:center;

  margin:15px auto 20px;
}

.radio-player iframe{
  width:100%;

  max-width:400px;

  height:120px;

  border:0;

  border-radius:16px;
}


/* =========================================
   ΠΡΟΓΡΑΜΜΑ ΙΕΡΩΝ ΑΚΟΛΟΥΘΙΩΝ
   ========================================= */

.schedule-title{
  background:#ffffff;

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

  border-radius:20px;

  padding:18px 16px;

  margin:22px 0 14px;

  text-align:center;

  color:var(--burgundy);

  font-size:24px;

  font-weight:800;

  line-height:1.25;

  box-shadow:
    0 8px 22px rgba(55,38,25,.09);
}


/* =========================================
   ΛΙΣΤΑ ΑΚΟΛΟΥΘΙΩΝ
   ========================================= */

#events{
  list-style:none;

  padding:0;

  margin:0;

  display:grid;

  gap:11px;
}

#events li{
  position:relative;

  margin:0;

  padding:16px 17px 16px 21px;

  background:
    rgba(255,255,255,.96);

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

  border-radius:18px;

  box-shadow:
    0 5px 16px rgba(55,38,25,.065);

  line-height:1.5;

  overflow:hidden;
}

#events li:before{
  content:"";

  position:absolute;

  left:0;

  top:0;

  bottom:0;

  width:4px;

  background:var(--gold);
}

#events li strong{
  color:var(--burgundy);

  font-weight:800;
}

#events li small{
  display:inline-block;

  margin-top:3px;

  color:var(--muted);

  font-size:13px;
}


/* =========================================
   ΤΡΕΧΟΥΣΑ ΑΚΟΛΟΥΘΙΑ ΣΤΗ ΛΙΣΤΑ
   ========================================= */

#events li.next-event{
  background:#641f24 !important;

  color:#ffffff !important;

  border:
    1px solid #421419 !important;

  box-shadow:
    0 8px 22px rgba(66,20,25,.22);
}

#events li.next-event:before{
  background:#b99752 !important;
}

#events li.next-event strong{
  color:#ffffff !important;
}

#events li.next-event small{
  color:#ffffff !important;
}


/* =========================================
   ΓΛΩΣΣΑ
   ========================================= */

.language-switcher{
  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:5px;

  margin:0 0 8px;
}

.lang-btn{
  width:42px;

  height:36px;

  padding:0;

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

  border-radius:12px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 4px 10px rgba(55,38,25,.06);

  font-size:21px;

  line-height:1;

  cursor:pointer;

  opacity:.55;

  transition:all .15s ease;
}

.lang-btn.active{
  opacity:1;

  background:#fff;

  border-color:var(--gold);

  box-shadow:
    0 5px 14px rgba(55,38,25,.10);

  transform:translateY(-1px);
}

.lang-btn:active{
  transform:scale(.96);
}


/* =========================================
   INSTALL / ΠΡΟΣΘΗΚΗ ΣΤΗΝ ΑΦΕΤΗΡΙΑ
   ========================================= */

.install-help{
  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  padding:18px;

  background:
    rgba(40,25,20,.38);

  backdrop-filter:blur(4px);
}

.install-help[hidden]{
  display:none;
}

.install-card{
  position:relative;

  width:min(100%,430px);

  padding:26px 22px 22px;

  background:#fffaf3;

  border:
    1px solid #e5d9c8;

  border-radius:
    26px 26px 20px 20px;

  box-shadow:
    0 20px 50px rgba(40,25,20,.25);

  text-align:center;
}

.install-icon{
  font-size:34px;

  margin-bottom:5px;
}

.install-card h2{
  margin:0 0 8px;

  color:
    var(--burgundy);

  font-size:23px;
}

.install-card p{
  margin:8px 0;

  text-align:left;

  color:var(--text);
}

.install-card ol{
  margin:8px 0 20px;

  padding-left:24px;

  text-align:left;

  line-height:1.65;

  color:var(--text);
}

.install-close{
  position:absolute;

  right:13px;

  top:10px;

  border:0;

  background:transparent;

  font-size:30px;

  color:var(--muted);

  cursor:pointer;
}


/* =========================================
   ΕΟΡΤΟΛΟΓΙΟ
   ========================================= */

#orthodox-calendar-page{
  margin-top:0;
}

.calendar-header{
  padding:20px;

  color:#fff;

  text-align:center;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(185,151,82,.25),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--burgundy-dark),
      var(--burgundy)
    );

  box-shadow:
    0 14px 32px rgba(66,20,25,.18);
}

.calendar-back{
  width:100%;

  margin-bottom:18px;

  padding:12px 14px;

  border:
    1px solid rgba(255,255,255,.25);

  border-radius:14px;

  background:
    rgba(255,255,255,.12);

  color:#fff;

  font:inherit;

  font-weight:700;

  cursor:pointer;
}

.calendar-title{
  font-size:28px;

  font-weight:800;
}

.calendar-date{
  margin-top:8px;

  font-size:16px;

  opacity:.9;
}

.calendar-loading{
  margin-top:20px;
}

.calendar-content{
  display:grid;

  gap:12px;

  margin-top:16px;
}

.calendar-content section{
  padding:18px;

  background:
    rgba(255,255,255,.96);

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

  border-radius:18px;

  box-shadow:
    0 5px 16px rgba(55,38,25,.065);
}

.calendar-content h2{
  margin:0 0 10px;

  color:var(--burgundy);

  font-size:19px;
}

.calendar-content p{
  margin:0;

  line-height:1.55;
}

.calendar-content ul{
  margin:0;

  padding-left:22px;
}

.calendar-content li{
  margin:7px 0;

  line-height:1.45;
}

.reading{
  padding:10px 0;

  border-bottom:
    1px solid var(--border);
}

.reading:last-child{
  border-bottom:0;
}


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

@media(min-width:650px){

  .container{
    padding-top:34px;
  }

  #events{
    grid-template-columns:1fr 1fr;
  }

}


/* =========================================
   ΚΙΝΗΤΑ
   ========================================= */

@media(max-width:480px){

  .language-switcher{
    margin-bottom:4px;
  }

  .lang-btn{
    width:40px;

    height:34px;

    font-size:20px;
  }


  .church-title{
    font-size:21px;

    padding:22px 14px;
  }


  .next-event-card{
    padding:23px 17px;
  }


  .next-card-label{
    font-size:18px;
  }


  .next-card-date{
    font-size:18px;
  }


  .next-card-time{
    font-size:30px;
  }


  .next-card-title{
    font-size:21px;
  }


  .next-card-location{
    font-size:15px;
  }


  .next-card-countdown{
    font-size:16px;
  }


  .schedule-title{
    font-size:22px;

    padding:17px 12px;
  }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media(prefers-reduced-motion:reduce){

  *{
    transition:none !important;
  }

}
/* =========================================
   ΑΝΑΚΟΙΝΩΣΕΙΣ
   ========================================= */

.announcements-box {
  width: 100%;
  margin: 18px 0 24px;
  padding: 20px 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 7px 20px rgba(55, 38, 25, 0.10);
}

.announcements-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);

  color: var(--burgundy);
  text-align: center;

  font-size: 24px;
  font-weight: 800;
}

.announcements-content {
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}

.announcement-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

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

.announcement-date {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}

.announcement-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.announcements-empty {
  color: var(--muted);
  text-align: center;
  font-size: 16px;
}
.services-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(40,25,20,.72);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.services-box {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: 32px 22px;
  background: #fffaf3;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  text-align: center;
}

.services-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #eee6df;
  color: #641f24;
  font-size: 30px;
}

.services-title {
  color: #641f24;
  font-size: 28px;
  font-weight: 800;
}

.services-subtitle {
  margin: 8px 0 28px;
  color: #756d65;
}

.services-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.services-buttons button {
  width: 100%;
  min-height: 82px;
  border: 1px solid #dfd3c5;
  border-radius: 20px;
  background: #fff;
  color: #641f24;
  font-size: 22px;
  font-weight: 800;
}

.services-buttons button:first-child {
  background: #641f24;
  color: #fff;
}
.services-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(40,25,20,.72);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.services-box {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: 32px 22px;
  background: #fffaf3;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  text-align: center;
}

.services-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #eee6df;
  color: #641f24;
  font-size: 30px;
  line-height: 1;
}

.services-title {
  color: #641f24;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.services-subtitle {
  margin: 0 0 28px;
  color: #756d65;
  font-size: 16px;
}

.services-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.services-buttons button {
  width: 100%;
  min-height: 82px;
  border: 1px solid #dfd3c5;
  border-radius: 20px;
  background: #fff;
  color: #641f24;
  font-size: 22px;
  font-weight: 800;
}

.services-buttons button:first-child {
  background: #641f24;
  color: #fff;
}

.ragic-box {
  position: relative;
  width: 100%;
  height: 92vh;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}

.ragic-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}