/*
 * Walking Carpet Images
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------
   Global
--------------------------------------------------------- */
* {
   box-sizing: border-box;
}

html,
body {
   min-height: 100%;
}

body {
   margin: 0;
   background: #e9f1f4;
   color: #333333;
   font-family:
      "Exo 2",
      Arial,
      Helvetica,
      sans-serif;
   font-size: 15px;
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.site-header {
   position: relative;
   width: 100%;
   height: 222px;
   margin: 0;
   background-image: url("header.jpg");
   background-repeat: no-repeat;
   background-position: left top;
   background-size: cover;
   box-shadow:
      0 2px 7px rgba(0, 0, 0, 0.20);
}

/* ---------------------------------------------------------
   Header Title
--------------------------------------------------------- */
.storage-info {
   position: absolute;
   top: 20px;
   left: 29px;
   font-size: 18px;
   font-weight: 400;
   color: #ffffff;
}

.site-header h1 {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin: 0;
   padding: 0;
   padding-top: 10px;
   background: none;
   color: #ffffff;
   font-family:
      "Exo 2",
      Arial,
      Helvetica,
      sans-serif;
   font-size: 35px;
   font-weight: 300;
   letter-spacing: 0;
   white-space: nowrap;
   text-shadow: 2px 2px 2px #000000;
}

.login-link {
   color: #000;
   font-size: 18px;
   text-decoration: none;
}

.login-link:hover {
   color: #105289;
   text-decoration: underline;
}

/* ---------------------------------------------------------
   User
--------------------------------------------------------- */
.user-info {
   position: absolute;
   top: 20px;
   right: 29px;
   color: rgba(255, 255, 255, 0.90);
   font-size: 18px;
   font-weight: 400;
}

.user-info strong {
   color: #bec4c9;
   font-weight: 400;
}

.forum-link,
.header-link {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: #fff;
   text-decoration: none;
}

.forum-link:hover,
.header-link:hover {
   color: #fff;
   text-decoration: underline;
}

.forum-link-icon {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* --------------------------------------------------------
   Main Card
--------------------------------------------------------- */
.container {
   position: relative;
   width: min(1180px, calc(100% - 40px));
   margin: 30px auto 60px;
   padding: 30px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow:
      0 8px 25px rgba(35, 70, 95, 0.10);
}

/* ---------------------------------------------------------
   Drop Zone
--------------------------------------------------------- */
.drop-zone {
   min-height: 390px;
   border: 2px dashed #82afd0;
   border-radius: 10px;
   background:
      linear-gradient(
         180deg,
         #f8fbfd 0%,
         #f1f7fa 100%
      );
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
   text-align: center;
   transition:
      border-color 0.15s,
      background 0.15s,
      box-shadow 0.15s;
}

.drop-zone:hover {
   border-color: #0b67ad;
   background: #f4faff;
}

.drop-zone.dragover {
   border-color: #0b67ad;
   background: #eaf5fb;
   box-shadow:
      inset 0 0 20px
      rgba(11, 103, 173, 0.08);
}

/* ---------------------------------------------------------
   Drop Content
--------------------------------------------------------- */
.drop-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
}

/* ---------------------------------------------------------
   Upload Icon
--------------------------------------------------------- */
.upload-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 68px;
   height: 68px;
   margin-bottom: 6px;
   border-radius: 50%;
   background: #e2eff7;
   color: #0b67ad;
   font-size: 34px;
   font-weight: 300;
   line-height: 1;
   padding-bottom: 10px;
}

/* ---------------------------------------------------------
   Drop Text
--------------------------------------------------------- */
.drop-content strong {
   color: #333333;
   font-size: 22px;
   font-weight: 400;
}

.drop-content span {
   color: #999999;
   font-size: 15px;
}

.drop-content small {
   margin-top: 5px;
   color: #777777;
   font-size: 13px;
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
button {
   border: 1px solid #07538c;
   border-radius: 5px;
   padding: 10px 21px;
   background: #0b67ad;
   color: #ffffff;
   font-family:
      "Exo 2",
      Arial,
      Helvetica,
      sans-serif;
   font-size: 15px;
   font-weight: 400;
   cursor: pointer;
   box-shadow:
      0 1px 2px
      rgba(0, 0, 0, 0.10);
   transition:
      background 0.15s,
      border-color 0.15s;
}

button:hover {
   background: #095993;
   border-color: #064a7c;
}

button:active {
   background: #074f84;
}

/* ---------------------------------------------------------
   Results
--------------------------------------------------------- */
.results {
   margin-top: 24px;
   padding: 20px;
   background: #f7fafb;
   border: 1px solid #d9e2e7;
   border-radius: 8px;
}

/* ---------------------------------------------------------
   Image Preview
--------------------------------------------------------- */
.image-preview {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 0;
   border-bottom: 1px solid #dde5e9;
}

.image-preview:last-child {
   border-bottom: 0;
}

.image-preview img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 5px;
   border: 1px solid #d6dfe4;
}

.image-info {
   min-width: 0;
}

.image-name {
   color: #333333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.image-size {
   margin-top: 4px;
   color: #888888;
   font-size: 12px;
}

/* ---------------------------------------------------------
   Copy BBCode
--------------------------------------------------------- */
#copy-bbcode {
   width: 100%;
   margin-top: 20px;
}

/* ---------------------------------------------------------
   Delete Button
--------------------------------------------------------- */
.delete-image {
   margin-left: auto;
   padding: 8px;
   border: 0;
   background: transparent;
   color: #777;
   cursor: pointer;
   line-height: 1;
   box-shadow: none;
}

.delete-image:hover {
   background: transparent;
   border: 0;
   color: #c62828;
}

.delete-image:disabled {
   opacity: 0.4;
   cursor: default;
}

.delete-image svg {
   display: block;
   width: 20px;
   height: 20px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Library Header
--------------------------------------------------------- */
.library-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 25px;
}

.library-heading h2 {
   margin: 0;
   color: #333333;
   font-size: 25px;
   font-weight: 400;
}

.library-summary {
   color: #777777;
   font-size: 14px;
}

.upload-link {
   display: inline-block;
   border: 1px solid #07538c;
   border-radius: 5px;
   padding: 9px 18px;
   background: #0b67ad;
   color: #ffffff;
   text-decoration: none;
   white-space: nowrap;
}

.upload-link:hover {
   background: #095993;
   border-color: #064a7c;
   color: #ffffff;
   text-decoration: none;
}

/* ---------------------------------------------------------
   Library Grid
--------------------------------------------------------- */
.library-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 20px;
}

.library-card {
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
   background: #f7fafb;
   border: 1px solid #d9e2e7;
   border-radius: 8px;
}

.library-thumbnail {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 210px;
   padding: 10px;
   background: #eef3f6;
   border-bottom: 1px solid #d9e2e7;
}

.library-thumbnail img {
   display: block;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.library-details {
   padding: 14px;
}

.library-filename {
   margin-bottom: 7px;
   color: #333333;
   font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.library-meta {
   color: #888888;
   font-size: 12px;
   line-height: 1.6;
}

.library-actions {
   display: flex;
   gap: 8px;
   margin-top: auto;
   padding: 0 14px 14px;
}

.library-actions button {
   flex: 1;
   min-height: 50px;
   padding: 8px 10px;
   font-size: 13px;
}

.library-actions .library-delete {
   flex: 0 0 auto;
   padding: 8px 10px;
   background: #ffffff;
   border-color: #d2d8dc;
   color: #777777;
   box-shadow: none;
}

.library-actions .library-delete:hover {
   background: #fff5f5;
   border-color: #c62828;
   color: #c62828;
}

.library-actions .library-delete:disabled {
   opacity: 0.4;
   cursor: default;
}

/* ---------------------------------------------------------
   Empty Library
--------------------------------------------------------- */
.library-empty {
   padding: 80px 20px;
   text-align: center;
}

.library-empty h2 {
   margin: 0 0 10px;
   font-size: 24px;
   font-weight: 400;
}

.library-empty p {
   margin: 0 0 24px;
   color: #777777;
}

/* ---------------------------------------------------------
   Delete Modal
--------------------------------------------------------- */
body.modal-open {
   overflow: hidden;
}

.modal-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(20, 35, 45, 0.60);
}

.modal-backdrop[hidden] {
   display: none;
}

.delete-modal {
   width: min(440px, 100%);
   padding: 28px;
   background: #ffffff;
   border-radius: 10px;
   box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.28);
}

.delete-modal h2 {
   margin: 0 0 12px;
   color: #333333;
   font-size: 23px;
   font-weight: 400;
}

.delete-modal p {
   margin: 0;
   color: #666666;
   font-size: 15px;
   line-height: 1.55;
}

.delete-modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 26px;
}

.delete-modal-actions button {
   min-width: 110px;
}

.modal-cancel {
   background: #ffffff;
   border-color: #cbd4d9;
   color: #555555;
   box-shadow: none;
}

.modal-cancel:hover {
   background: #f3f6f7;
   border-color: #aebbc2;
   color: #333333;
}

.modal-delete {
   background: #b3261e;
   border-color: #9d211a;
}

.modal-delete:hover {
   background: #9d211a;
   border-color: #861c16;
}

.modal-delete:disabled,
.modal-cancel:disabled {
   opacity: 0.6;
   cursor: default;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 700px) {
   .site-header {
      height: 190px;
      background-position: left top;
      background-size: cover;
   }

   .site-header h1 {
      font-size: 25px;
   }

   .storage-info {
      top: 14px;
      left: 16px;
      font-size: 12px;
   }

   .user-info {
      top: 14px;
      right: 16px;
      font-size: 12px;
   }

   .container {
      width: calc(100% - 20px);
      margin: 16px auto 30px;
      padding: 15px;
   }

   .drop-zone {
      min-height: 330px;
      padding: 25px 15px;
   }

   .drop-content strong {
      font-size: 19px;
   }

   .library-heading {
      align-items: flex-start;
      flex-direction: column;
   }

   .library-grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
   }

   .library-thumbnail {
      height: 180px;
   }

   .delete-modal {
      padding: 22px;
   }

   .delete-modal-actions {
      flex-direction: column-reverse;
   }

   .delete-modal-actions button {
      width: 100%;
   }
}