:root {
   --color-white: #fff;
   --color-light-gray: #e0e0e0;
   --color-border-gray: #ddd;
   --color-heading: #333;
   --color-subheading: #555;
   --color-text: #444;
   --color-link: #0073aa;
   --color-link-hover: #005177;
   --color-error: #dc3232;
   --color-upload-border: #999;
   --color-drag-text: #999;
   --color-preview-border: #ccc;
   --color-preview-shadow: rgba(0, 0, 0, 0.08);
   --color-shadow-light: rgba(0, 0, 0, 0.05);
   --color-delete-btn: rgba(255, 0, 0, 0.7);
   --color-delete-hover: rgba(255, 0, 0, 1);
   --color-clear-btn: #f44336;
   --color-clear-hover: #d32f2f;
   --color-preview-border-strong: #ddd;
   --color-preview-bg: #fcfcfc;
   --color-border-soft: #eee;
   --color-green: #28a745;

   --padding-default: 1.25rem;
   --padding-small: 0.625rem;
   --padding-large: 1.875rem;
   --margin-bottom-default: 1.25rem;
   --margin-bottom-large: 1.875rem;
   --border-radius: 0.3125rem;
   --box-shadow: 0 0.125rem 0.3125rem var(--color-shadow-light);

   --font-size-heading: 1.8em;
   --font-size-subheading: 1.5em;
   --font-size-label: 1em;
   --font-size-drag-text: 1.125rem;
   --font-size-submit: 1.1em;
   --font-size-small: 0.9em;

   --image-preview-size: 6.25rem;
   --image-max-width: 9.375rem;
   --delete-btn-size: 1.5625rem;
}

.announcement-form-wrapper {
   background-color: var(--color-white);
   padding: var(--padding-default);
   border: 1px solid var(--color-light-gray);
   border-radius: var(--border-radius);
   margin-bottom: var(--margin-bottom-large);
   box-shadow: var(--box-shadow);
}

.announcement-form-wrapper h2 {
   margin-top: 0;
   margin-bottom: var(--margin-bottom-default);
   color: var(--color-heading);
   font-size: var(--font-size-heading);
   text-align: center;
}

.announcement-form-wrapper .form-field {
   margin-bottom: 0.9375rem;
}

.announcement-form-wrapper label {
   display: block;
   margin-bottom: 0.3125rem;
   font-weight: bold;
   color: var(--color-subheading);
}

.announcement-form-wrapper input[type='text'],
.announcement-form-wrapper input[type='email'],
.announcement-form-wrapper textarea {
   width: 100%;
   padding: 0.625rem;
   border: 1px solid var(--color-border-gray);
   border-radius: 0.25rem;
   box-sizing: border-box;
   font-size: var(--font-size-label);
}

.announcement-form-wrapper textarea {
   resize: vertical;
}

.announcement-form-wrapper input[type='submit'] {
   background-color: var(--color-link);
   color: var(--color-white);
   padding: 0.75rem 1.5625rem;
   border-radius: 0.25rem;
   cursor: pointer;
   font-size: var(--font-size-submit);
   transition: background-color 0.3s ease, transform 0.2s ease;
   display: block;
   width: auto;
   margin: var(--padding-default) auto 0;
}

.announcement-form-wrapper input[type='submit']:hover {
   background-color: var(--color-link-hover);
   transform: translateY(-2px);
}

.announcement-form-wrapper .required {
   color: var(--color-error);
   font-weight: normal;
}

.announcement-details strong {
   color: var(--color-heading);
}

.announcement-details a {
   color: var(--color-link);
   text-decoration: none;
}

.announcement-details a:hover {
   text-decoration: underline;
}

.image-upload-section {
   margin-top: 1.25rem;
   border-top: 1px solid var(--color-border-soft);
   padding-top: 1.25rem;
}

.image-preview-container:not(:empty) {
   display: flex;
   flex-wrap: wrap;
   gap: 0.625rem;
   margin-top: 5px;
   border: 1px dashed var(--color-preview-border);
   padding: 0.625rem;
   align-items: center;
   justify-content: center;
   background-color: var(--color-preview-bg);
   border-radius: 0.25rem;
}

.image-preview {
   position: relative;
   width: var(--image-preview-size);
   height: var(--image-preview-size);
   border: 1px solid var(--color-preview-border-strong);
   border-radius: 0.25rem;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0.0625rem 0.1875rem var(--color-preview-shadow);
}

.image-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.delete-image-button {
   position: absolute;
   top: 0.3125rem;
   right: 0.3125rem;
   background-color: var(--color-delete-btn);
   color: var(--color-white);
   border: none;
   border-radius: 50%;
   width: var(--delete-btn-size);
   height: var(--delete-btn-size);
   font-size: 1rem;
   line-height: 1;
   text-align: center;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: background-color 0.2s ease;
   padding-bottom: 3px;
}

.delete-image-button:hover {
   background-color: var(--color-delete-hover);
}

.announcement_images-upload-bl {
   grid-row: 1 / span 1;
   grid-column: 1 / span 1;
   border: 2px dashed #e0e0e0;
   border-radius: 6px;
   padding: 20px 30px;
   text-align: center;
   background: #fafafa;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
}
.announcement_images-upload-bl:hover {
   border-color: #ff6b35;
   background: rgba(255, 107, 53, 0.05);
}

.announcement_images-upload-bl input[type='file'] {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0;
   cursor: pointer;
}

.clear-images-button {
   background-color: var(--color-clear-btn);
   color: var(--color-white);
   padding: 0.5rem 0.9375rem;
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
   font-size: var(--font-size-small);
   transition: background-color 0.3s ease;
   margin: 5px auto 0;
   display: block;
   width: fit-content;
}

.clear-images-button:hover {
   background-color: var(--color-clear-hover);
}

.image-limit-message {
   margin-top: 0.625rem;
   font-size: var(--font-size-small);
   font-weight: bold;
}

.announcement-button-wrapper {
   text-align: center;
   padding: var(--padding-default) 0;
}

.announcement-button {
   display: grid;
   align-items: center;
   padding-right: 15px;
   padding-left: 15px;
}

@media (max-width: 920px) {
   .announcement-button {
      padding: 8px;
   }
   .announcement-button span {
      /* display: none; */
      font-size: 14px;
   }
}

@media (min-width: 921px) {
   .announcement-button svg {
      display: none;
   }
}

.announcement-popup-overlay,
.announcement-popup-overlay:after {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

.announcement-popup-overlay {
   display: grid;
   align-content: center;
   justify-content: center;
   z-index: 99;
}

.announcement-popup-overlay:after {
   content: '';
   background: var(--ast-global-color-8);
   filter: opacity(0.8);
}

.announcement-popup-content {
   position: relative;
   z-index: 1;
   height: 95svh;
   overflow: hidden;
   padding-top: 2.1875rem;
   margin: auto;
   background: var(--ast-global-color-4);
   max-width: 90%;
   max-width: 500px;
   line-height: normal;
   cursor: default;
}

.announcement-upload-icon {
   font-size: 48px;
}
.announcement-upload-text {
   color: #666;
   font-size: 16px;
   margin-bottom: 10px;
}
.announcement-upload-hint {
   color: #999;
   font-size: 14px;
}

.announcement-popup-content h2 {
   padding: 0 var(--padding-default) var(--padding-small);
   border-bottom: 1px solid var(--ast-global-color-7);
}

.announcement-popup-close {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   display: grid;
   justify-content: center;
   align-content: center;
   width: 32px;
   height: 32px;
   cursor: pointer;
   line-height: 1px;
   background: var(--ast-global-color-1);
   color: var(--ast-global-color-4);
}

#announcement-submission-form {
   position: relative;
   display: grid;
   gap: var(--padding-default);
   height: calc(100% - 5rem);
   padding: 0 var(--padding-default) var(--padding-default);
   overflow-x: clip;
   overflow-y: auto;
}

.announcement-form-inner {
   display: grid;
   gap: 22px;
}

#announcement-submission-form .form-field,
#announcement-submission-form .form-submit {
   margin-bottom: 0;
}

#announcement-submission-form .form-submit {
   display: grid;
   gap: 15px;
   justify-content: center;
}

#announcement-submission-form .image-upload-section {
   display: grid;
}

.announcement-popup-overlay .invalid-prefix {
   border-color: var(--color-error) !important;
   background-color: var(--ast-global-color-5) !important;
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.announcement-popup-overlay .prefix-error {
   color: var(--color-error);
   font-size: 12px;
   margin-top: 5px;
   font-weight: normal;
   line-height: 1.4;
}

.announcement-popup-overlay input[type='tel'],
.announcement-popup-overlay input[name*='phone'] {
   font-family: monospace;
   letter-spacing: 0.5px;
}

.announcement-popup-overlay input[type='tel']:focus,
.announcement-popup-overlay input[name*='phone']:focus {
   outline: none;
   border-color: #007cba;
   box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
}

.announcement-popup-overlay .valid-prefix {
   border-color: var(--color-green);
   background-color: #f8fff9;
}

.announcement-popup-overlay input[type='tel'],
.announcement-popup-overlay input[name*='phone'] {
   transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.announcement-popup-overlay textarea {
   resize: vertical;
   max-height: 300px;
}

.announcement-popup-overlay .prefix-success {
   color: var(--color-green);
   font-size: 12px;
   margin-top: 5px;
   font-weight: normal;
   line-height: 1.4;
}

.otp-verification-section {
   text-align: center;
   padding: var(--padding-large);
   border: 1px solid var(--color-border-gray);
   border-radius: var(--border-radius);
   background-color: #f8f9fa;
   margin-top: var(--margin-bottom-default);
}

.otp-verification-section h3 {
   margin-top: 0;
   margin-bottom: var(--margin-bottom-default);
   color: var(--color-heading);
   font-size: var(--font-size-subheading);
}

.otp-verification-section p {
   margin-bottom: var(--margin-bottom-default);
   color: var(--color-text);
   line-height: 1.6;
}

#phone-display {
   font-weight: bold;
   color: var(--color-link);
   font-family: monospace;
}

#otp_code {
   width: 200px !important;
   text-align: center;
   font-size: 1.5em;
   font-family: monospace;
   letter-spacing: 8px;
   padding: 1rem;
   border: 2px solid var(--color-border-gray);
   border-radius: var(--border-radius);
   margin: 0 auto var(--margin-bottom-default);
   display: block;
   background-color: var(--color-white);
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#otp_code:focus {
   outline: none;
   border-color: var(--color-link);
   box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
}

#otp_code::placeholder {
   color: #999;
   letter-spacing: 8px;
}

.otp-verification-section .form-submit {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   align-items: center;
}

.otp-verification-section input[type='submit'],
.resend-otp-button {
   background-color: var(--color-link);
   color: var(--color-white);
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: var(--border-radius);
   cursor: pointer;
   font-size: var(--font-size-submit);
   transition: all 0.3s ease;
   min-width: 200px;
}

.otp-verification-section input[type='submit']:hover,
.resend-otp-button:hover {
   background-color: var(--color-link-hover);
   transform: translateY(-2px);
}

.resend-otp-button {
   background-color: var(--color-border-gray);
   color: var(--color-text);
}

.resend-otp-button:hover {
   background-color: #999;
   color: var(--color-white);
}

.resend-otp-button:disabled {
   background-color: #e0e0e0;
   color: #999;
   cursor: not-allowed;
   transform: none;
}

#back-to-form-button {
   background-color: transparent;
   color: var(--color-text);
   border: 1px solid var(--color-border-gray);
   padding: 0.5rem 1rem;
   font-size: var(--font-size-small);
}

#back-to-form-button:hover {
   background-color: var(--color-light-gray);
   transform: none;
}

#announcement-submission-form,
#otp-verification-form {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

#announcement-submission-form.fade-out,
#otp-verification-form.fade-out {
   opacity: 0;
   transform: translateY(-10px);
}

#otp-form-message {
   margin: var(--margin-bottom-default) 0;
   padding: 0.75rem;
   border-radius: var(--border-radius);
   text-align: center;
   font-weight: 500;
}

#otp-form-message.success {
   background-color: #d4edda;
   color: #155724;
   border: 1px solid #c3e6cb;
}

#otp-form-message.error {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
}

.resend-timer {
   font-size: var(--font-size-small);
   color: var(--color-text);
   margin-top: 0.5rem;
}

@media (max-width: 768px) {
   .otp-verification-section {
      padding: var(--padding-default);
   }

   #otp_code {
      width: 180px !important;
      font-size: 1.3em;
      letter-spacing: 6px;
   }

   #otp_code::placeholder {
      letter-spacing: 6px;
   }

   .otp-verification-section .form-submit {
      gap: 0.5rem;
   }

   .otp-verification-section input[type='submit'],
   .resend-otp-button {
      min-width: 160px;
      padding: 0.6rem 1.2rem;
      font-size: 1em;
   }
}

.form-loading {
   position: relative;
   pointer-events: none;
}

.form-loading::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 10;
}

@keyframes shake {
   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateX(0);
   }
   10%,
   30%,
   70%,
   90% {
      transform: translateX(-5px);
   }
   40%,
   60% {
      transform: translateX(5px);
   }
}

#otp_code.error {
   border-color: var(--color-error);
   animation: shake 0.6s ease-in-out;
}

@keyframes checkmark {
   0% {
      transform: scale(0);
   }
   50% {
      transform: scale(1.2);
   }
   100% {
      transform: scale(1);
   }
}

.success-checkmark {
   color: var(--color-green);
   font-size: 2em;
   animation: checkmark 0.6s ease-in-out;
}

#otp_code:focus {
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.25);
   }
   70% {
      box-shadow: 0 0 0 10px rgba(0, 115, 170, 0);
   }
   100% {
      box-shadow: 0 0 0 0 rgba(0, 115, 170, 0);
   }
}