/*
Theme Name:   Optima - Child theme
Description:  Extra Small child theme of Optima theme
Author:       ALSET
Author URI:   https://alsetdev.com
Template:     oktan
Version:      1.0.1
Text Domain:  optima
Domain Path:  /languages
Tags:         blog, e-commerce, news, custom-background, custom-colors, custom-logo, custom-menu, custom-header, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, block-styles, wide-blocks, left-sidebar, right-sidebar, one-column, two-columns, grid-layout, microformats, post-formats, translation-ready
*/

/* Your styles goes here*/
/* Document Grid Styles */
.body {
  font-family: 'Roboto', sans-serif;
}

.document-grid {
  display: grid;
  grid-gap: 20px;
  margin: 20px 0;
}

.document-grid.columns-1 {
  grid-template-columns: 1fr;
}

.document-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.document-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.document-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .document-grid.columns-3,
  .document-grid.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .document-grid.columns-2,
  .document-grid.columns-3,
  .document-grid.columns-4 {
    grid-template-columns: 1fr;
  }
}

/* Document Card Styles */
.document-card {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.document-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.document-icon {
  flex-shrink: 0;
  width: 32px;
  height: 40px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.document-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.document-pdf::before {
  content: "PDF";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background-color: #e74c3c;
  width: 28px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.document-pdf {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23d9d9d9" d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg>');
}

.document-doc::before {
  content: "DOC";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background-color: #3498db;
  width: 28px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.document-doc {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23d9d9d9" d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg>');
}

.document-xls::before {
  content: "XLS";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background-color: #2ecc71;
  width: 28px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.document-xls {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23d9d9d9" d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg>');
}

.document-ppt::before {
  content: "PPT";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background-color: #e67e22;
  width: 28px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.document-ppt {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23d9d9d9" d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg>');
}

.document-txt::before {
  content: "TXT";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background-color: #95a5a6;
  width: 28px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.document-txt {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23d9d9d9" d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg>');
}

.document-title {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.3;
  color: #333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.document-download {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f8c14b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.document-download:hover {
  background-color: #e5b043;
}

.document-download .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.document-download svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: white;
}

.document-download {
    color: white;
}