/*
 * WP Download Manager — Frontend Stylesheet
 *
 * Provides complete styling for the [wpdm_browser] shortcode widget,
 * including the search bar, breadcrumb, list view tree, grid view cards,
 * icon sprites (inline SVG data URIs), loading spinner, and responsive
 * breakpoints.
 */

/* ==========================================================================
   1. CSS Custom Properties (design tokens)
   ========================================================================== */

.wpdm-browser {
	--wpdm-color-primary:        #0073aa;
	--wpdm-color-primary-dark:   #005177;
	--wpdm-color-primary-light:  #e8f4fa;
	--wpdm-color-surface:        #ffffff;
	--wpdm-color-surface-alt:    #f8f9fa;
	--wpdm-color-border:         #dde1e7;
	--wpdm-color-border-focus:   #0073aa;
	--wpdm-color-text:           #1d2327;
	--wpdm-color-text-secondary: #646970;
	--wpdm-color-text-muted:     #8c8f94;
	--wpdm-color-link:           #0073aa;
	--wpdm-color-link-hover:     #005177;
	--wpdm-color-success:        #00a32a;
	--wpdm-color-error:          #d63638;
	--wpdm-color-warning:        #dba617;
	--wpdm-color-folder:         #f0b429;
	--wpdm-color-pdf:            #e53935;
	--wpdm-color-docx:           #1565c0;
	--wpdm-color-xlsx:           #2e7d32;
	--wpdm-color-pptx:           #e64a19;
	--wpdm-color-zip:            #6d4c41;
	--wpdm-color-image:          #7b1fa2;
	--wpdm-color-txt:            #455a64;
	--wpdm-color-generic:        #546e7a;
	--wpdm-space-xs:             4px;
	--wpdm-space-sm:             8px;
	--wpdm-space-md:             16px;
	--wpdm-space-lg:             24px;
	--wpdm-space-xl:             32px;
	--wpdm-radius-sm:            4px;
	--wpdm-radius-md:            8px;
	--wpdm-radius-lg:            12px;
	--wpdm-shadow-sm:            0 1px 3px rgba( 0, 0, 0, 0.08 );
	--wpdm-shadow-md:            0 4px 12px rgba( 0, 0, 0, 0.12 );
	--wpdm-shadow-lg:            0 8px 24px rgba( 0, 0, 0, 0.16 );
	--wpdm-transition:           0.2s ease;
	--wpdm-font-size-sm:         0.8125rem;
	--wpdm-font-size-base:       0.9375rem;
	--wpdm-font-size-lg:         1.0625rem;
	--wpdm-icon-size-sm:         16px;
	--wpdm-icon-size-md:         24px;
	--wpdm-icon-size-lg:         40px;
}

/* ==========================================================================
   2. Browser Wrapper
   ========================================================================== */

.wpdm-browser {
	font-family:     inherit;
	font-size:       var( --wpdm-font-size-base );
	color:           var( --wpdm-color-text );
	background:      var( --wpdm-color-surface );
	border:          1px solid var( --wpdm-color-border );
	border-radius:   var( --wpdm-radius-lg );
	box-shadow:      var( --wpdm-shadow-sm );
	padding:         var( --wpdm-space-lg );
	position:        relative;
	overflow:        hidden;
}

.wpdm-browser *,
.wpdm-browser *::before,
.wpdm-browser *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   3. Search Bar
   ========================================================================== */

.wpdm-browser__search {
	margin-bottom: var( --wpdm-space-md );
}

.wpdm-search {
	position: relative;
}

.wpdm-search__input-wrapper {
	position:    relative;
	display:     flex;
	align-items: center;
}

.wpdm-search__icon {
	position:    absolute;
	left:        12px;
	width:       var( --wpdm-icon-size-sm );
	height:      var( --wpdm-icon-size-sm );
	background:  url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E" ) center / contain no-repeat;
	pointer-events: none;
	flex-shrink: 0;
}

.wpdm-search__input {
	width:            100%;
	padding:          10px 40px 10px 44px; /* 44px leaves clear gap after the 16px icon at left:12px */
	font-size:        var( --wpdm-font-size-base );
	font-family:      inherit;
	color:            var( --wpdm-color-text );
	background:       var( --wpdm-color-surface );
	border:           1px solid var( --wpdm-color-border );
	border-radius:    50px;
	outline:          none;
	transition:       border-color var( --wpdm-transition ), box-shadow var( --wpdm-transition );
	-webkit-appearance: none;
	appearance:       none;
}

.wpdm-search__input:focus {
	border-color: var( --wpdm-color-border-focus );
	box-shadow:   0 0 0 3px rgba( 0, 115, 170, 0.15 );
}

.wpdm-search__input::placeholder {
	color: var( --wpdm-color-text-muted );
}

.wpdm-search__clear {
	position:    absolute;
	right:       10px;
	background:  none;
	border:      none;
	padding:     4px 6px;
	cursor:      pointer;
	color:       var( --wpdm-color-text-muted );
	font-size:   1rem;
	line-height: 1;
	transition:  color var( --wpdm-transition );
}

.wpdm-search__clear:hover {
	color: var( --wpdm-color-text );
}

/* Search results dropdown */

.wpdm-search__results {
	position:      absolute;
	top:           calc( 100% + 6px );
	left:          0;
	right:         0;
	z-index:       1000;
	background:    var( --wpdm-color-surface );
	border:        1px solid var( --wpdm-color-border );
	border-radius: var( --wpdm-radius-md );
	box-shadow:    var( --wpdm-shadow-md );
	max-height:    360px;
	overflow-y:    auto;
}

.wpdm-search__results[hidden] {
	display: none;
}

.wpdm-search-result-item {
	display:     flex;
	align-items: flex-start;
	gap:         var( --wpdm-space-sm );
	padding:     10px var( --wpdm-space-md );
	cursor:      pointer;
	border-bottom: 1px solid var( --wpdm-color-border );
	text-decoration: none;
	color:       var( --wpdm-color-text );
	transition:  background var( --wpdm-transition );
}

.wpdm-search-result-item:last-child {
	border-bottom: none;
}

.wpdm-search-result-item:hover,
.wpdm-search-result-item:focus {
	background: var( --wpdm-color-primary-light );
	outline:    none;
}

.wpdm-search-result-item__icon {
	flex-shrink: 0;
	margin-top:  2px;
}

.wpdm-search-result-item__body {
	flex:        1;
	min-width:   0;
}

.wpdm-search-result-item__title {
	display:       block;
	font-weight:   500;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.wpdm-search-result-item__path {
	display:     block;
	font-size:   var( --wpdm-font-size-sm );
	color:       var( --wpdm-color-text-secondary );
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.wpdm-search-result-item__snippet {
	display:      block;
	font-size:    var( --wpdm-font-size-sm );
	color:        var( --wpdm-color-text-secondary );
	margin-top:   3px;
	line-height:  1.45;
	overflow:     hidden;
	display:      -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wpdm-search-result-item__meta {
	display:     block;
	font-size:   var( --wpdm-font-size-sm );
	color:       var( --wpdm-color-text-muted );
	margin-top:  2px;
}

.wpdm-search__no-results {
	padding:    var( --wpdm-space-md );
	text-align: center;
	color:      var( --wpdm-color-text-secondary );
	font-size:  var( --wpdm-font-size-sm );
}

.wpdm-search__spinner {
	padding:     var( --wpdm-space-md );
	text-align:  center;
}

/* ==========================================================================
   4. Breadcrumb Navigation
   ========================================================================== */

.wpdm-breadcrumb {
	margin-bottom: var( --wpdm-space-md );
}

.wpdm-breadcrumb__list {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         2px;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.wpdm-breadcrumb__item {
	display:     flex;
	align-items: center;
}

.wpdm-breadcrumb__link {
	background:    none;
	border:        none;
	padding:       4px 8px;
	font-size:     var( --wpdm-font-size-sm );
	font-family:   inherit;
	color:         var( --wpdm-color-link );
	cursor:        pointer;
	border-radius: var( --wpdm-radius-sm );
	transition:    color var( --wpdm-transition ), background var( --wpdm-transition );
	white-space:   nowrap;
	text-decoration: none;
	display:       flex;
	align-items:   center;
	gap:           4px;
}

.wpdm-breadcrumb__link:hover,
.wpdm-breadcrumb__link:focus {
	color:      var( --wpdm-color-link-hover );
	background: var( --wpdm-color-primary-light );
	outline:    none;
}

.wpdm-breadcrumb__current {
	font-size:   var( --wpdm-font-size-sm );
	font-weight: 500;
	color:       var( --wpdm-color-text );
	padding:     4px 8px;
	white-space: nowrap;
}

.wpdm-breadcrumb__separator {
	color:    var( --wpdm-color-text-muted );
	font-size: var( --wpdm-font-size-sm );
	padding:  0 2px;
	user-select: none;
}

/* ==========================================================================
   5. List View
   ========================================================================== */

.wpdm-list {
	position: relative;
}

.wpdm-list__items {
	list-style: none;
	margin:     0;
	padding:    0;
}

.wpdm-list__item {
	border-bottom: 1px solid var( --wpdm-color-border );
}

.wpdm-list__item:last-child {
	border-bottom: none;
}

/* Folder toggle button */

.wpdm-list__toggle {
	display:       flex;
	align-items:   center;
	gap:           var( --wpdm-space-sm );
	width:         100%;
	background:    none;
	border:        none;
	padding:       11px var( --wpdm-space-sm );
	font-size:     var( --wpdm-font-size-base );
	font-family:   inherit;
	font-weight:   500;
	color:         var( --wpdm-color-text );
	cursor:        pointer;
	border-radius: var( --wpdm-radius-sm );
	transition:    background var( --wpdm-transition );
	text-align:    left;
}

.wpdm-list__toggle:hover,
.wpdm-list__toggle:focus {
	background: var( --wpdm-color-surface-alt );
	outline:    none;
}

.wpdm-list__toggle:focus-visible {
	outline:        2px solid var( --wpdm-color-border-focus );
	outline-offset: 1px;
}

.wpdm-list__name {
	flex:          1;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.wpdm-list__desc {
	font-size:   var( --wpdm-font-size-sm );
	font-weight: 400;
	color:       var( --wpdm-color-text-secondary );
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
	max-width:   200px;
}

/* Chevron — rotates when folder is open */

.wpdm-list__chevron {
	flex-shrink: 0;
	width:       var( --wpdm-icon-size-sm );
	height:      var( --wpdm-icon-size-sm );
	background:  url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646970' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transition:  transform var( --wpdm-transition );
}

.wpdm-list__toggle[aria-expanded="true"] .wpdm-list__chevron {
	transform: rotate( 90deg );
}

/* Children container */

.wpdm-list__children {
	list-style:  none;
	margin:      0;
	padding:     0 0 0 var( --wpdm-space-xl );
	overflow:    hidden;
}

.wpdm-list__children[hidden] {
	display: none;
}

.wpdm-list__children .wpdm-list__item {
	border-bottom: none;
	border-top:    1px solid var( --wpdm-color-border );
}

/* Loading indicator inside a folder node */

.wpdm-list__loading {
	display:     flex;
	align-items: center;
	gap:         var( --wpdm-space-sm );
	padding:     10px var( --wpdm-space-sm );
	color:       var( --wpdm-color-text-secondary );
	font-size:   var( --wpdm-font-size-sm );
}

/* File link row */

.wpdm-list__file {
	display:         flex;
	align-items:     center;
	gap:             var( --wpdm-space-sm );
	padding:         10px var( --wpdm-space-sm );
	color:           var( --wpdm-color-text );
	text-decoration: none;
	border-radius:   var( --wpdm-radius-sm );
	transition:      background var( --wpdm-transition );
}

.wpdm-list__file:hover,
.wpdm-list__file:focus {
	background: var( --wpdm-color-primary-light );
	color:      var( --wpdm-color-link );
	outline:    none;
}

.wpdm-list__file:focus-visible {
	outline:        2px solid var( --wpdm-color-border-focus );
	outline-offset: 1px;
}

.wpdm-list__meta {
	font-size:  var( --wpdm-font-size-sm );
	color:      var( --wpdm-color-text-muted );
	margin-left: auto;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Empty folder message in list view */

.wpdm-list__empty {
	padding:   var( --wpdm-space-lg );
	text-align: center;
	color:     var( --wpdm-color-text-secondary );
	font-size: var( --wpdm-font-size-sm );
}

/* ==========================================================================
   6. Grid View
   ========================================================================== */

.wpdm-grid {
	position: relative;
}

.wpdm-grid__items {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap:                   var( --wpdm-space-md );
}

.wpdm-grid__empty {
	padding:    var( --wpdm-space-xl );
	text-align: center;
	color:      var( --wpdm-color-text-secondary );
	font-size:  var( --wpdm-font-size-sm );
	grid-column: 1 / -1;
}

/* Shared card base styles */

.wpdm-grid__item {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	padding:         var( --wpdm-space-md );
	background:      var( --wpdm-color-surface );
	border:          1px solid var( --wpdm-color-border );
	border-radius:   var( --wpdm-radius-md );
	box-shadow:      var( --wpdm-shadow-sm );
	transition:      box-shadow var( --wpdm-transition ), transform var( --wpdm-transition ), border-color var( --wpdm-transition );
	text-decoration: none;
	color:           var( --wpdm-color-text );
	cursor:          pointer;
	user-select:     none;
	text-align:      center;
	min-height:      140px;
}

.wpdm-grid__item:hover {
	box-shadow:    var( --wpdm-shadow-md );
	transform:     translateY( -2px );
	border-color:  var( --wpdm-color-primary );
}

.wpdm-grid__item:focus {
	outline:       2px solid var( --wpdm-color-border-focus );
	outline-offset: 2px;
}

.wpdm-grid__item:active {
	transform: translateY( 0 );
}

/* Folder card */

.wpdm-grid__item--folder:hover {
	background: var( --wpdm-color-primary-light );
}

/* File card */

.wpdm-grid__item--file:hover {
	color: var( --wpdm-color-link );
}

.wpdm-grid__icon {
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         56px;
	height:        56px;
	margin-bottom: var( --wpdm-space-sm );
	flex-shrink:   0;
}

.wpdm-grid__label {
	font-weight:   500;
	font-size:     var( --wpdm-font-size-sm );
	word-break:    break-word;
	overflow-wrap: break-word;
	hyphens:       auto;
	line-height:   1.3;
}

.wpdm-grid__desc {
	font-size:  var( --wpdm-font-size-sm );
	color:      var( --wpdm-color-text-secondary );
	margin-top: var( --wpdm-space-xs );
	word-break: break-word;
}

.wpdm-grid__meta {
	font-size:   var( --wpdm-font-size-sm );
	color:       var( --wpdm-color-text-muted );
	margin-top:  var( --wpdm-space-xs );
}

/* ==========================================================================
   7. Icons (SVG data URIs)
   ========================================================================== */

.wpdm-icon {
	display:     inline-block;
	flex-shrink: 0;
	background:  center / contain no-repeat;
}

/* Small icons (16×16) — default */
.wpdm-icon {
	width:  var( --wpdm-icon-size-md );
	height: var( --wpdm-icon-size-md );
}

/* Large icons (40×40) — used in grid view */
.wpdm-icon[class*="-large"] {
	width:  var( --wpdm-icon-size-lg );
	height: var( --wpdm-icon-size-lg );
}

/* Folder */
.wpdm-icon--folder,
.wpdm-icon--folder-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0b429'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E" );
}

/* Home icon for breadcrumb root */
.wpdm-icon--home {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230073aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E" );
	width:  14px;
	height: 14px;
}

/* PDF */
.wpdm-icon--pdf,
.wpdm-icon--pdf-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53935'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='8' y1='13' x2='16' y2='13' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='17' x2='14' y2='17' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" );
}

/* Word / DOCX */
.wpdm-icon--docx,
.wpdm-icon--docx-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231565c0'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='8' y1='13' x2='16' y2='13' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='17' x2='16' y2='17' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" );
}

/* Excel / XLSX */
.wpdm-icon--xlsx,
.wpdm-icon--xlsx-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='8' y='12' width='3' height='3' fill='%23fff'/%3E%3Crect x='13' y='12' width='3' height='3' fill='%23fff'/%3E%3Crect x='8' y='16' width='3' height='3' fill='%23fff'/%3E%3Crect x='13' y='16' width='3' height='3' fill='%23fff'/%3E%3C/svg%3E" );
}

/* PowerPoint / PPTX */
.wpdm-icon--pptx,
.wpdm-icon--pptx-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e64a19'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='8' y='12' width='8' height='6' rx='1' fill='%23fff'/%3E%3C/svg%3E" );
}

/* ZIP / archive */
.wpdm-icon--zip,
.wpdm-icon--zip-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d4c41'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='10' y='2' width='4' height='3' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='10' y='8' width='4' height='3' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Crect x='10' y='14' width='4' height='4' rx='1' fill='%23fff'/%3E%3C/svg%3E" );
}

/* Image */
.wpdm-icon--image,
.wpdm-icon--image-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b1fa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E" );
}

/* Text / TXT */
.wpdm-icon--txt,
.wpdm-icon--txt-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23455a64'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='8' y1='13' x2='16' y2='13' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='8' y1='17' x2='13' y2='17' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" );
}

/* Generic file */
.wpdm-icon--generic,
.wpdm-icon--generic-large {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546e7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E" );
}

/* Search empty-state icon */
.wpdm-icon--search-empty {
	display:    block;
	width:      48px;
	height:     48px;
	margin:     0 auto var( --wpdm-space-sm );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8f94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E" );
}

/* ==========================================================================
   8. Spinner
   ========================================================================== */

.wpdm-spinner {
	display:       inline-block;
	flex-shrink:   0;
	width:         18px;
	height:        18px;
	border:        2px solid var( --wpdm-color-border );
	border-top-color: var( --wpdm-color-primary );
	border-radius: 50%;
	animation:     wpdm-spin 0.7s linear infinite;
}

.wpdm-spinner--large {
	width:  36px;
	height: 36px;
	border-width: 3px;
}

@keyframes wpdm-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* ==========================================================================
   9. Loading Overlay
   ========================================================================== */

.wpdm-browser__loading-overlay {
	position:        absolute;
	inset:           0;
	background:      rgba( 255, 255, 255, 0.75 );
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         50;
	border-radius:   var( --wpdm-radius-lg );
	backdrop-filter: blur( 2px );
}

.wpdm-browser__loading-overlay[hidden] {
	display: none;
}

/* ==========================================================================
   10. State: Error Message
   ========================================================================== */

.wpdm-error {
	display:       flex;
	align-items:   flex-start;
	gap:           var( --wpdm-space-sm );
	padding:       var( --wpdm-space-md );
	background:    #fef2f2;
	border:        1px solid #fecaca;
	border-radius: var( --wpdm-radius-md );
	color:         var( --wpdm-color-error );
	font-size:     var( --wpdm-font-size-sm );
	margin-bottom: var( --wpdm-space-md );
}

.wpdm-error__icon {
	flex-shrink: 0;
	font-weight: bold;
	font-size:   1rem;
}

/* ==========================================================================
   11. No-Access Widget
   ========================================================================== */

.wpdm-no-access {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         var( --wpdm-space-xl );
	text-align:      center;
	background:      var( --wpdm-color-surface-alt );
	border:          1px solid var( --wpdm-color-border );
	border-radius:   var( --wpdm-radius-lg );
	gap:             var( --wpdm-space-md );
}

.wpdm-no-access__message {
	color:     var( --wpdm-color-text-secondary );
	font-size: var( --wpdm-font-size-base );
	margin:    0;
}

.wpdm-no-access__btn {
	display:         inline-flex;
	align-items:     center;
	padding:         10px 24px;
	background:      var( --wpdm-color-primary );
	color:           #ffffff;
	border:          none;
	border-radius:   50px;
	font-size:       var( --wpdm-font-size-base );
	font-weight:     500;
	text-decoration: none;
	cursor:          pointer;
	transition:      background var( --wpdm-transition ), box-shadow var( --wpdm-transition );
	box-shadow:      var( --wpdm-shadow-sm );
}

.wpdm-no-access__btn:hover,
.wpdm-no-access__btn:focus {
	background: var( --wpdm-color-primary-dark );
	box-shadow: var( --wpdm-shadow-md );
	color:      #ffffff;
	outline:    none;
}

/* ==========================================================================
   12. Badge (MIME type labels in search results)
   ========================================================================== */

.wpdm-badge {
	display:       inline-block;
	padding:       1px 6px;
	border-radius: var( --wpdm-radius-sm );
	font-size:     0.6875rem;
	font-weight:   700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color:         #ffffff;
	background:    var( --wpdm-color-generic );
	vertical-align: middle;
}

.wpdm-badge--pdf  { background: var( --wpdm-color-pdf );  }
.wpdm-badge--docx { background: var( --wpdm-color-docx ); }
.wpdm-badge--xlsx { background: var( --wpdm-color-xlsx ); }
.wpdm-badge--pptx { background: var( --wpdm-color-pptx ); }
.wpdm-badge--zip  { background: var( --wpdm-color-zip );  }
.wpdm-badge--txt  { background: var( --wpdm-color-txt );  }
.wpdm-badge--image { background: var( --wpdm-color-image ); }

/* ==========================================================================
   13. Search Results Page Template
   ========================================================================== */

.wpdm-search-results__summary {
	font-size:     var( --wpdm-font-size-sm );
	color:         var( --wpdm-color-text-secondary );
	margin:        0 0 var( --wpdm-space-sm );
}

.wpdm-search-results__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.wpdm-search-results__item {
	border-bottom: 1px solid var( --wpdm-color-border );
}

.wpdm-search-results__item:last-child {
	border-bottom: none;
}

.wpdm-search-results__link {
	display:         flex;
	align-items:     flex-start;
	gap:             var( --wpdm-space-sm );
	padding:         10px var( --wpdm-space-sm );
	color:           var( --wpdm-color-text );
	text-decoration: none;
	border-radius:   var( --wpdm-radius-sm );
	transition:      background var( --wpdm-transition );
}

.wpdm-search-results__link:hover,
.wpdm-search-results__link:focus {
	background: var( --wpdm-color-primary-light );
	color:      var( --wpdm-color-link );
	outline:    none;
}

.wpdm-search-results__icon {
	flex-shrink: 0;
	margin-top:  2px;
}

.wpdm-search-results__body {
	flex:     1;
	min-width: 0;
}

.wpdm-search-results__title {
	display:       block;
	font-weight:   500;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.wpdm-search-results__path {
	display:   block;
	font-size: var( --wpdm-font-size-sm );
	color:     var( --wpdm-color-text-secondary );
	margin-top: 2px;
}

.wpdm-search-results__meta {
	display:    flex;
	gap:        var( --wpdm-space-sm );
	flex-wrap:  wrap;
	align-items: center;
	font-size:  var( --wpdm-font-size-sm );
	color:      var( --wpdm-color-text-muted );
	margin-top: 4px;
}

.wpdm-search-results__empty {
	padding:    var( --wpdm-space-xl );
	text-align: center;
	color:      var( --wpdm-color-text-secondary );
}

/* ==========================================================================
   14. Content Area Transitions
   ========================================================================== */

.wpdm-browser__content {
	position: relative;
}

.wpdm-browser__content--fading {
	opacity:    0;
	transition: opacity 0.15s ease;
}

.wpdm-browser__content--visible {
	opacity:    1;
	transition: opacity 0.2s ease;
}

/* Slide-in for list children */
.wpdm-list__children {
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* ==========================================================================
   15. Responsive Styles
   ========================================================================== */

@media ( max-width: 768px ) {
	.wpdm-browser {
		padding: var( --wpdm-space-md );
	}

	.wpdm-grid__items {
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
		gap: var( --wpdm-space-sm );
	}

	.wpdm-grid__item {
		padding: var( --wpdm-space-sm );
		min-height: 110px;
	}

	.wpdm-grid__icon {
		width:  44px;
		height: 44px;
	}

	.wpdm-list__desc {
		display: none;
	}
}

@media ( max-width: 600px ) {
	.wpdm-grid__items {
		grid-template-columns: repeat( 2, 1fr );
	}

	.wpdm-breadcrumb__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wpdm-breadcrumb__list::-webkit-scrollbar {
		display: none;
	}

	.wpdm-list__meta {
		display: none;
	}

	.wpdm-search__input {
		font-size: 1rem;
	}

	.wpdm-search-results {
		max-height: 280px;
	}
}

@media ( max-width: 400px ) {
	.wpdm-grid__items {
		grid-template-columns: 1fr 1fr;
		gap: var( --wpdm-space-xs );
	}

	.wpdm-grid__item {
		min-height: 100px;
		padding: var( --wpdm-space-xs );
	}

	.wpdm-grid__icon {
		width:  36px;
		height: 36px;
	}

	.wpdm-grid__label {
		font-size: 0.75rem;
	}
}