/**
 * Document Library Access — Frontend Styles
 *
 * @package Document_Library_Access
 * @since   2.0.0
 */

/* =========================================================
   CSS Custom Properties
   ========================================================= */
.dlpa-wrap {
	--dlpa-primary:       #3e4a89;
	--dlpa-primary-dark:  #2f3868;
	--dlpa-primary-light: rgba( 62, 74, 137, 0.08 );
	--dlpa-border:        #eaecf0;
	--dlpa-text:          #0f1117;
	--dlpa-muted:         #6b7280;
	--dlpa-subtle:        #f7f8fa;
	--dlpa-radius:        12px;
	--dlpa-radius-sm:     8px;
	--dlpa-shadow:        0 8px 28px rgba( 0, 0, 0, 0.12 );
}

/* =========================================================
   Notice
   ========================================================= */
.dlpa-notice {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  1.5rem;
	padding:        12px 16px;
	background:     #fefce8;
	border:         1px solid #fde68a;
	border-radius:  var( --dlpa-radius-sm );
	font-size:      14px;
	color:          #78350f;
}

.dlpa-notice a {
	color:           #92400e;
	font-weight:     600;
	text-decoration: underline;
}

/* =========================================================
   Toolbar (search + filters)
   ========================================================= */
.dlpa-toolbar {
	display:       flex;
	flex-wrap:     wrap;
	gap:           10px;
	margin-bottom: 1rem;
	align-items:   center;
}

.dlpa-search-wrap {
	position:  relative;
	flex:      1;
	min-width: 220px;
}

.dlpa-search-icon {
	position:         absolute;
	left:             14px;
	top:              50%;
	transform:        translateY( -50% );
	width:            16px;
	height:           16px;
	color:            var( --dlpa-muted );
	pointer-events:   none;
}

.dlpa-search {
	width:         100%;
	padding:       10px 14px 10px 40px;
	border:        1.5px solid var( --dlpa-border );
	border-radius: 40px;
	font-size:     14px;
	background:    #fff;
	color:         var( --dlpa-text );
	outline:       none;
	transition:    border-color 0.2s, box-shadow 0.2s;
	box-sizing:    border-box;
}

.dlpa-search:focus {
	border-color: var( --dlpa-primary );
	box-shadow:   0 0 0 3px var( --dlpa-primary-light );
}

.dlpa-search::placeholder {
	color: #adb5bd;
}

.dlpa-filters {
	display:    flex;
	gap:        8px;
	flex-shrink: 0;
}

.dlpa-cat-filter,
.dlpa-tier-filter {
	padding:            9px 32px 9px 14px;
	border:             1.5px solid var( --dlpa-border );
	border-radius:      40px;
	font-size:          13px;
	font-weight:        500;
	background:         #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	color:              var( --dlpa-text );
	cursor:             pointer;
	outline:            none;
	transition:         border-color 0.2s;
	appearance:         none;
	-webkit-appearance: none;
}

.dlpa-cat-filter:focus,
.dlpa-tier-filter:focus {
	border-color: var( --dlpa-primary );
}

/* =========================================================
   Results count
   ========================================================= */
.dlpa-results-count {
	font-size:     13px;
	color:         var( --dlpa-muted );
	margin:        0 0 1rem;
}

/* =========================================================
   Grid
   ========================================================= */
.dlpa-grid {
	display:               grid;
	grid-template-columns: repeat( var( --dlpa-cols, 4 ), 1fr );
	gap:                   18px;
}

@media ( max-width: 540px ) {
	.dlpa-grid {
		grid-template-columns: repeat( var( --dlpa-cols-mobile, 2 ), 1fr );
		gap: 10px;
	}
}

@media ( min-width: 541px ) and ( max-width: 900px ) {
	.dlpa-grid {
		grid-template-columns: repeat( var( --dlpa-cols-tablet, 3 ), 1fr );
		gap: 14px;
	}
}

/* =========================================================
   Card
   ========================================================= */
.dlpa-card {
	border:         1.5px solid var( --dlpa-border );
	border-radius:  var( --dlpa-radius );
	overflow:       hidden;
	background:     #fff;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow 0.25s, transform 0.25s, border-color 0.25s;
	text-decoration: none;
	color:          inherit;
}

.dlpa-card:hover {
	box-shadow:   var( --dlpa-shadow );
	transform:    translateY( -2px );
	border-color: #d1d5db;
	text-decoration: none;
	color:        inherit;
}

.dlpa-card--locked {
	opacity: 0.85;
}

.dlpa-card--locked:hover {
	opacity: 1;
}

.dlpa-card__image {
	position:   relative;
	width:      100%;
	height:     160px;
	overflow:   hidden;
	background: var( --dlpa-subtle );
	flex-shrink: 0;
}

.dlpa-card__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.35s;
}

.dlpa-card:hover .dlpa-card__image img {
	transform: scale( 1.04 );
}

.dlpa-card__placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      linear-gradient( 135deg, #e8eaf6, #c5cae9 );
}

.dlpa-card__placeholder span {
	font-size:   48px;
	font-weight: 800;
	color:       rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
}

.dlpa-card__overlay {
	position:        absolute;
	inset:           0;
	background:      rgba( 15, 17, 23, 0.45 );
	display:         flex;
	align-items:     center;
	justify-content: center;
	backdrop-filter: blur( 1px );
}

.dlpa-card__overlay svg {
	width:   32px;
	height:  32px;
	color:   #fff;
	opacity: 0.9;
}

.dlpa-tier-badge {
	position:       absolute;
	top:            8px;
	left:           8px;
	padding:        3px 10px;
	border-radius:  20px;
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	backdrop-filter: blur( 4px );
}

.dlpa-tier-badge--free    { background: rgba( 236, 253, 245, 0.92 ); color: #065f46; border: 1px solid #a7f3d0; }
.dlpa-tier-badge--premium { background: rgba( 239, 246, 255, 0.92 ); color: #1d4ed8; border: 1px solid #bfdbfe; }
.dlpa-tier-badge--church  { background: rgba( 245, 243, 255, 0.92 ); color: #5b21b6; border: 1px solid #ddd6fe; }

.dlpa-card__body {
	padding: 14px 16px 10px;
	flex:    1;
}

.dlpa-card__title {
	font-size:      14px;
	font-weight:    700;
	margin:         0 0 4px;
	color:          var( --dlpa-text );
	line-height:    1.35;
	letter-spacing: -0.01em;
}

.dlpa-card__category {
	font-size:      11px;
	color:          var( --dlpa-muted );
	margin:         0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight:    500;
}

.dlpa-card__desc {
	font-size:             12px;
	color:                 #4b5563;
	margin:                0;
	line-height:           1.5;
	display:               -webkit-box;
	-webkit-line-clamp:    2;
	-webkit-box-orient:    vertical;
	overflow:              hidden;
}

.dlpa-card__footer {
	padding:    12px 16px;
	border-top: 1px solid var( --dlpa-border );
}

/* =========================================================
   Buttons
   ========================================================= */
.dlpa-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	width:           100%;
	height:          40px;
	padding:         0 14px;
	border-radius:   var( --dlpa-radius-sm );
	font-size:       13px;
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	box-sizing:      border-box;
	border:          none;
	transition:      background 0.18s, color 0.18s, transform 0.15s;
	font-family:     inherit;
}

.dlpa-btn:active {
	transform: scale( 0.98 );
}

.dlpa-btn--download {
	background: var( --dlpa-primary );
	color:      #fff;
}

.dlpa-btn--download:hover {
	background: var( --dlpa-primary-dark );
	color:      #fff;
}

.dlpa-btn--locked {
	background: var( --dlpa-subtle );
	color:      var( --dlpa-muted );
	border:     1.5px solid var( --dlpa-border );
}

.dlpa-btn--locked:hover {
	background:   #f1f3f5;
	color:        #374151;
	border-color: #d1d5db;
}

.dlpa-no-file {
	font-size:   12px;
	color:       #adb5bd;
	display:     block;
	text-align:  center;
	padding:     4px 0;
}

/* =========================================================
   No results
   ========================================================= */
.dlpa-no-results {
	color:      var( --dlpa-muted );
	font-size:  14px;
	text-align: center;
	padding:    2rem 0;
}

/* =========================================================
   Pagination
   ========================================================= */
.dlpa-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	margin-top:      2rem;
	flex-wrap:       wrap;
}

.dlpa-page-numbers {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
}

.dlpa-page-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border:          1.5px solid var( --dlpa-border );
	border-radius:   var( --dlpa-radius-sm );
	background:      #fff;
	cursor:          pointer;
	color:           var( --dlpa-muted );
	transition:      all 0.18s;
	font-size:       13px;
	font-weight:     600;
	padding:         0;
	font-family:     inherit;
}

.dlpa-page-btn:hover:not( :disabled ) {
	border-color: var( --dlpa-primary );
	color:        var( --dlpa-primary );
	background:   var( --dlpa-primary-light );
}

.dlpa-page-btn:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}

.dlpa-page-btn.dlpa-page-active {
	background:   var( --dlpa-primary );
	color:        #fff;
	border-color: var( --dlpa-primary );
}

.dlpa-page-btn.dlpa-page-active:hover {
	background:   var( --dlpa-primary-dark );
	border-color: var( --dlpa-primary-dark );
	color:        #fff;
}

/* =========================================================
   Submit banner
   ========================================================= */
.dlpa-submit-banner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             16px;
	margin-top:      2.5rem;
	padding:         20px 24px;
	background:      var( --dlpa-subtle );
	border:          1.5px solid var( --dlpa-border );
	border-radius:   var( --dlpa-radius );
}

.dlpa-submit-banner__content {
	display:     flex;
	align-items: center;
	gap:         14px;
}

.dlpa-submit-banner__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      var( --dlpa-primary );
	color:           #fff;
	border-radius:   10px;
	flex-shrink:     0;
}

.dlpa-submit-banner__title {
	font-size:   15px;
	font-weight: 700;
	color:       var( --dlpa-text );
	margin:      0 0 3px;
}

.dlpa-submit-banner__desc {
	font-size: 13px;
	color:     var( --dlpa-muted );
	margin:    0;
}

.dlpa-submit-banner__btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         10px 20px;
	background:      var( --dlpa-primary );
	color:           #fff;
	border-radius:   var( --dlpa-radius-sm );
	font-size:       13px;
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	transition:      background 0.18s;
}

.dlpa-submit-banner__btn:hover {
	background: var( --dlpa-primary-dark );
	color:      #fff;
}

@media ( max-width: 640px ) {
	.dlpa-submit-banner {
		flex-direction: column;
		align-items:    flex-start;
	}

	.dlpa-submit-banner__btn {
		width:           100%;
		justify-content: center;
	}
}
/* =========================================================
   Submission form
   ========================================================= */
.dlpa-submit-wrap {
	max-width: 680px;
}

.dlpa-submit-notice {
	padding:       12px 16px;
	border-radius: 8px;
	font-size:     14px;
	margin-bottom: 1.5rem;
}

.dlpa-submit-notice--warning { background: #fefce8; border: 1px solid #fde68a; color: #78350f; }
.dlpa-submit-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.dlpa-submit-notice--error   { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }

.dlpa-submit-form {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.dlpa-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.dlpa-field-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}

@media ( max-width: 540px ) {
	.dlpa-field-row {
		grid-template-columns: 1fr;
	}
}

.dlpa-label {
	font-size:   14px;
	font-weight: 600;
	color:       #0f1117;
}

.dlpa-required {
	color:       #dc2626;
	margin-left: 2px;
}

.dlpa-input {
	padding:       10px 14px;
	border:        1.5px solid #eaecf0;
	border-radius: 8px;
	font-size:     14px;
	color:         #0f1117;
	background:    #fff;
	outline:       none;
	transition:    border-color 0.2s;
	width:         100%;
	box-sizing:    border-box;
	font-family:   inherit;
}

.dlpa-input:focus {
	border-color: #3e4a89;
	box-shadow:   0 0 0 3px rgba( 62, 74, 137, 0.08 );
}

.dlpa-input[readonly] {
	background: #f7f8fa;
	color:      #6b7280;
	cursor:     not-allowed;
}

textarea.dlpa-input {
	resize:     vertical;
	min-height: 120px;
}

.dlpa-file-input {
	padding: 8px;
}

.dlpa-field-hint {
	font-size: 12px;
	color:     #6b7280;
}

.dlpa-submit-btn {
	display:        flex;
	align-items:    center;
	justify-content: center;
	gap:            8px;
	padding:        12px 28px;
	background:     #3e4a89;
	color:          #fff;
	border:         none;
	border-radius:  8px;
	font-size:      14px;
	font-weight:    600;
	cursor:         pointer;
	transition:     background 0.18s, transform 0.15s;
	align-self:     flex-start;
	font-family:    inherit;
}

.dlpa-submit-btn:hover {
	background: #2f3868;
}

.dlpa-submit-btn:active {
	transform: scale( 0.98 );
}

.dlpa-submit-btn:disabled {
	opacity: 0.6;
	cursor:  not-allowed;
}

/* =========================================================
   Expiry banner
   ========================================================= */
#dlpa-expiry-banner {
	position:        fixed;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         99999;
	background:      #1a1a1a;
	color:           #fff;
	padding:         12px 20px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	font-size:       14px;
	box-shadow:      0 -2px 8px rgba( 0, 0, 0, 0.2 );
}

#dlpa-expiry-banner .dlpa-expiry-link {
	color:           #facc15;
	font-weight:     600;
	text-decoration: underline;
	margin-left:     8px;
}

#dlpa-expiry-banner .dlpa-expiry-link:hover {
	color: #fde68a;
}

#dlpa-expiry-banner .dlpa-expiry-close {
	background:  none;
	border:      none;
	color:       #fff;
	font-size:   16px;
	cursor:      pointer;
	padding:     4px 8px;
	line-height: 1;
	opacity:     0.7;
	flex-shrink: 0;
	font-family: inherit;
}

#dlpa-expiry-banner .dlpa-expiry-close:hover {
	opacity: 1;
}

/* =========================================================
   Quill WYSIWYG Editor
   ========================================================= */
.dlpa-quill-editor {
	min-height:    140px;
	border:        1.5px solid #eaecf0;
	border-radius: 0 0 8px 8px;
	font-size:     14px;
	font-family:   inherit;
	background:    #fff;
}

.dlpa-quill-editor.ql-container {
	font-size:   14px;
	font-family: inherit;
}

.dlpa-quill-editor .ql-editor {
	min-height:  120px;
	font-size:   14px;
	line-height: 1.6;
	color:       #0f1117;
}

.dlpa-quill-editor .ql-editor.ql-blank::before {
	color:      #adb5bd;
	font-style: normal;
	content:    attr( data-placeholder );
}

/* Quill toolbar sits above editor — connect borders */
.ql-toolbar.ql-snow {
	border:        1.5px solid #eaecf0 !important;
	border-bottom: none !important;
	border-radius: 8px 8px 0 0 !important;
	background:    #f7f8fa;
}

.ql-container.ql-snow {
	border:        1.5px solid #eaecf0 !important;
	border-top:    none !important;
	border-radius: 0 0 8px 8px !important;
}

/* Focus state — match other inputs */
.dlpa-field:focus-within .ql-toolbar.ql-snow,
.dlpa-field:focus-within .ql-container.ql-snow {
	border-color: #3e4a89 !important;
}