| 1 | html {
|
|---|
| 2 | scroll-behavior: smooth;
|
|---|
| 3 | }
|
|---|
| 4 |
|
|---|
| 5 | * {
|
|---|
| 6 | margin: 0;
|
|---|
| 7 | padding: 0;
|
|---|
| 8 | box-sizing: border-box;
|
|---|
| 9 | }
|
|---|
| 10 |
|
|---|
| 11 | body {
|
|---|
| 12 | font-family: Arial, sans-serif;
|
|---|
| 13 | background-color: #f8f5ef;
|
|---|
| 14 | color: #2d2a26;
|
|---|
| 15 | }
|
|---|
| 16 |
|
|---|
| 17 |
|
|---|
| 18 | /* =========================================
|
|---|
| 19 | NAVBAR
|
|---|
| 20 | ========================================= */
|
|---|
| 21 |
|
|---|
| 22 | .navbar {
|
|---|
| 23 | width: 100%;
|
|---|
| 24 | height: 80px;
|
|---|
| 25 | padding: 0 7%;
|
|---|
| 26 | display: flex;
|
|---|
| 27 | align-items: center;
|
|---|
| 28 | justify-content: space-between;
|
|---|
| 29 | background-color: #ffffff;
|
|---|
| 30 | border-bottom: 1px solid #e8e1d7;
|
|---|
| 31 | position: relative;
|
|---|
| 32 | z-index: 10;
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | .logo {
|
|---|
| 36 | display: flex;
|
|---|
| 37 | align-items: center;
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | .logo img {
|
|---|
| 41 | width: 285px;
|
|---|
| 42 | height: 70px;
|
|---|
| 43 | object-fit: contain;
|
|---|
| 44 | object-position: left center;
|
|---|
| 45 | display: block;
|
|---|
| 46 | }
|
|---|
| 47 |
|
|---|
| 48 | .navbar nav {
|
|---|
| 49 | display: flex;
|
|---|
| 50 | gap: 35px;
|
|---|
| 51 | }
|
|---|
| 52 |
|
|---|
| 53 | .navbar nav a {
|
|---|
| 54 | position: relative;
|
|---|
| 55 | text-decoration: none;
|
|---|
| 56 | color: #2d2a26;
|
|---|
| 57 | font-size: 15px;
|
|---|
| 58 | font-weight: 600;
|
|---|
| 59 | padding: 10px 2px;
|
|---|
| 60 | transition: color 0.2s ease;
|
|---|
| 61 | }
|
|---|
| 62 |
|
|---|
| 63 | .navbar nav a::after {
|
|---|
| 64 | content: "";
|
|---|
| 65 | position: absolute;
|
|---|
| 66 | left: 0;
|
|---|
| 67 | bottom: 3px;
|
|---|
| 68 | width: 0;
|
|---|
| 69 | height: 2px;
|
|---|
| 70 | background: #4f6545;
|
|---|
| 71 | border-radius: 2px;
|
|---|
| 72 | transition: width 0.2s ease;
|
|---|
| 73 | }
|
|---|
| 74 |
|
|---|
| 75 | .navbar nav a:hover {
|
|---|
| 76 | color: #4f6545;
|
|---|
| 77 | }
|
|---|
| 78 |
|
|---|
| 79 | .navbar nav a:hover::after {
|
|---|
| 80 | width: 100%;
|
|---|
| 81 | }
|
|---|
| 82 |
|
|---|
| 83 | .nav-buttons {
|
|---|
| 84 | display: flex;
|
|---|
| 85 | align-items: center;
|
|---|
| 86 | gap: 12px;
|
|---|
| 87 | }
|
|---|
| 88 |
|
|---|
| 89 | .nav-buttons a {
|
|---|
| 90 | padding: 10px 20px;
|
|---|
| 91 | border-radius: 8px;
|
|---|
| 92 | font-size: 15px;
|
|---|
| 93 | font-weight: 600;
|
|---|
| 94 | text-decoration: none;
|
|---|
| 95 | cursor: pointer;
|
|---|
| 96 | transition: 0.2s ease;
|
|---|
| 97 | }
|
|---|
| 98 |
|
|---|
| 99 | .nav-buttons .login-btn {
|
|---|
| 100 | background: transparent;
|
|---|
| 101 | border: 1px solid #4f6545;
|
|---|
| 102 | color: #4f6545;
|
|---|
| 103 | }
|
|---|
| 104 |
|
|---|
| 105 | .nav-buttons .login-btn:hover {
|
|---|
| 106 | background: #eef1eb;
|
|---|
| 107 | }
|
|---|
| 108 |
|
|---|
| 109 | .nav-buttons .register-btn {
|
|---|
| 110 | background-color: #4f6545;
|
|---|
| 111 | border: 1px solid #4f6545;
|
|---|
| 112 | color: white;
|
|---|
| 113 | }
|
|---|
| 114 |
|
|---|
| 115 | .nav-buttons .register-btn:hover {
|
|---|
| 116 | background-color: #3f5637;
|
|---|
| 117 | border-color: #3f5637;
|
|---|
| 118 | }
|
|---|
| 119 |
|
|---|
| 120 | .login-btn {
|
|---|
| 121 | background: transparent;
|
|---|
| 122 | border: 1px solid #4f6545;
|
|---|
| 123 | color: #4f6545;
|
|---|
| 124 | }
|
|---|
| 125 |
|
|---|
| 126 | .register-btn {
|
|---|
| 127 | background-color: #4f6545;
|
|---|
| 128 | border: 1px solid #4f6545;
|
|---|
| 129 | color: white;
|
|---|
| 130 | }
|
|---|
| 131 |
|
|---|
| 132 |
|
|---|
| 133 | /* =========================================
|
|---|
| 134 | HERO
|
|---|
| 135 | ========================================= */
|
|---|
| 136 |
|
|---|
| 137 | .hero {
|
|---|
| 138 | width: 100%;
|
|---|
| 139 | height: 520px;
|
|---|
| 140 | display: flex;
|
|---|
| 141 | position: relative;
|
|---|
| 142 | background: #f4efe6;
|
|---|
| 143 | overflow: hidden;
|
|---|
| 144 | }
|
|---|
| 145 |
|
|---|
| 146 | /* ЛЕВ ДЕЛ */
|
|---|
| 147 |
|
|---|
| 148 | .hero-content {
|
|---|
| 149 | width: 52%;
|
|---|
| 150 | height: 520px;
|
|---|
| 151 | padding: 65px 2% 65px 10%;
|
|---|
| 152 | display: flex;
|
|---|
| 153 | flex-direction: column;
|
|---|
| 154 | justify-content: center;
|
|---|
| 155 | position: relative;
|
|---|
| 156 | z-index: 4;
|
|---|
| 157 | }
|
|---|
| 158 |
|
|---|
| 159 | /* ДЕСНА СЛИКА */
|
|---|
| 160 |
|
|---|
| 161 | .hero-image {
|
|---|
| 162 | width: 56%;
|
|---|
| 163 | height: 520px;
|
|---|
| 164 | margin-left: -8%;
|
|---|
| 165 | position: relative;
|
|---|
| 166 | overflow: hidden;
|
|---|
| 167 | }
|
|---|
| 168 |
|
|---|
| 169 | .hero-image img {
|
|---|
| 170 | width: 100%;
|
|---|
| 171 | height: 100%;
|
|---|
| 172 | display: block;
|
|---|
| 173 | object-fit: cover;
|
|---|
| 174 | object-position: 63% center;
|
|---|
| 175 | }
|
|---|
| 176 |
|
|---|
| 177 | /*
|
|---|
| 178 | Ова е мекиот премин.
|
|---|
| 179 | Сликата навлегува под левиот дел,
|
|---|
| 180 | а gradient-от постепено ја претопува
|
|---|
| 181 | во беж позадината.
|
|---|
| 182 | */
|
|---|
| 183 |
|
|---|
| 184 | .hero-image::before {
|
|---|
| 185 | content: "";
|
|---|
| 186 | position: absolute;
|
|---|
| 187 | z-index: 2;
|
|---|
| 188 | top: 0;
|
|---|
| 189 | left: 0;
|
|---|
| 190 | width: 42%;
|
|---|
| 191 | height: 100%;
|
|---|
| 192 | pointer-events: none;
|
|---|
| 193 |
|
|---|
| 194 | background: linear-gradient(
|
|---|
| 195 | to right,
|
|---|
| 196 | #f4efe6 0%,
|
|---|
| 197 | #f4efe6 12%,
|
|---|
| 198 | rgba(244, 239, 230, 0.98) 24%,
|
|---|
| 199 | rgba(244, 239, 230, 0.90) 38%,
|
|---|
| 200 | rgba(244, 239, 230, 0.72) 53%,
|
|---|
| 201 | rgba(244, 239, 230, 0.48) 68%,
|
|---|
| 202 | rgba(244, 239, 230, 0.22) 83%,
|
|---|
| 203 | rgba(244, 239, 230, 0) 100%
|
|---|
| 204 | );
|
|---|
| 205 | }
|
|---|
| 206 |
|
|---|
| 207 | .hero-label {
|
|---|
| 208 | display: inline-block;
|
|---|
| 209 | color: #4f6545;
|
|---|
| 210 | font-size: 13px;
|
|---|
| 211 | font-weight: bold;
|
|---|
| 212 | letter-spacing: 2px;
|
|---|
| 213 | margin-bottom: 20px;
|
|---|
| 214 | }
|
|---|
| 215 |
|
|---|
| 216 | .hero h1 {
|
|---|
| 217 | font-size: 58px;
|
|---|
| 218 | line-height: 1.08;
|
|---|
| 219 | margin-bottom: 22px;
|
|---|
| 220 | color: #25231f;
|
|---|
| 221 | max-width: 700px;
|
|---|
| 222 | }
|
|---|
| 223 |
|
|---|
| 224 | .hero h1 span {
|
|---|
| 225 | color: #4f6545;
|
|---|
| 226 | }
|
|---|
| 227 |
|
|---|
| 228 | .hero p {
|
|---|
| 229 | max-width: 590px;
|
|---|
| 230 | font-size: 18px;
|
|---|
| 231 | line-height: 1.7;
|
|---|
| 232 | color: #69645d;
|
|---|
| 233 | margin-bottom: 30px;
|
|---|
| 234 | }
|
|---|
| 235 |
|
|---|
| 236 | .search-box {
|
|---|
| 237 | width: 100%;
|
|---|
| 238 | max-width: 620px;
|
|---|
| 239 | display: flex;
|
|---|
| 240 | padding: 7px;
|
|---|
| 241 | background: white;
|
|---|
| 242 | border-radius: 12px;
|
|---|
| 243 | box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
|---|
| 244 | }
|
|---|
| 245 |
|
|---|
| 246 | .search-box input {
|
|---|
| 247 | flex: 1;
|
|---|
| 248 | min-width: 0;
|
|---|
| 249 | border: none;
|
|---|
| 250 | outline: none;
|
|---|
| 251 | padding: 15px;
|
|---|
| 252 | font-size: 15px;
|
|---|
| 253 | background: transparent;
|
|---|
| 254 | }
|
|---|
| 255 |
|
|---|
| 256 | .search-box button {
|
|---|
| 257 | border: none;
|
|---|
| 258 | background: #4f6545;
|
|---|
| 259 | color: white;
|
|---|
| 260 | padding: 0 25px;
|
|---|
| 261 | border-radius: 8px;
|
|---|
| 262 | font-size: 15px;
|
|---|
| 263 | cursor: pointer;
|
|---|
| 264 | transition: 0.2s ease;
|
|---|
| 265 | }
|
|---|
| 266 |
|
|---|
| 267 | .search-box button:hover {
|
|---|
| 268 | background: #3f5637;
|
|---|
| 269 | }
|
|---|
| 270 |
|
|---|
| 271 |
|
|---|
| 272 | /* =========================================
|
|---|
| 273 | КНИГИ
|
|---|
| 274 | ========================================= */
|
|---|
| 275 |
|
|---|
| 276 | .books-section {
|
|---|
| 277 | padding: 70px 10%;
|
|---|
| 278 | background-color: #ffffff;
|
|---|
| 279 | }
|
|---|
| 280 |
|
|---|
| 281 | .section-header {
|
|---|
| 282 | margin-bottom: 35px;
|
|---|
| 283 | }
|
|---|
| 284 |
|
|---|
| 285 | .section-header span {
|
|---|
| 286 | color: #4f6545;
|
|---|
| 287 | font-size: 12px;
|
|---|
| 288 | font-weight: bold;
|
|---|
| 289 | letter-spacing: 2px;
|
|---|
| 290 | }
|
|---|
| 291 |
|
|---|
| 292 | .section-header h2 {
|
|---|
| 293 | margin-top: 8px;
|
|---|
| 294 | font-size: 34px;
|
|---|
| 295 | color: #25231f;
|
|---|
| 296 | }
|
|---|
| 297 |
|
|---|
| 298 | .books-grid {
|
|---|
| 299 | display: grid;
|
|---|
| 300 | grid-template-columns: repeat(4, 1fr);
|
|---|
| 301 | gap: 25px;
|
|---|
| 302 | }
|
|---|
| 303 |
|
|---|
| 304 | .book-card {
|
|---|
| 305 | background: #f8f5ef;
|
|---|
| 306 | border-radius: 14px;
|
|---|
| 307 | overflow: hidden;
|
|---|
| 308 | transition: 0.3s;
|
|---|
| 309 | border: 1px solid #eee8dc;
|
|---|
| 310 | }
|
|---|
| 311 |
|
|---|
| 312 | .book-card:hover {
|
|---|
| 313 | transform: translateY(-6px);
|
|---|
| 314 | box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
|
|---|
| 315 | }
|
|---|
| 316 |
|
|---|
| 317 | .book-cover {
|
|---|
| 318 | height: 330px;
|
|---|
| 319 | background: #eee8dd;
|
|---|
| 320 | display: flex;
|
|---|
| 321 | align-items: center;
|
|---|
| 322 | justify-content: center;
|
|---|
| 323 | padding: 18px;
|
|---|
| 324 | overflow: hidden;
|
|---|
| 325 | }
|
|---|
| 326 |
|
|---|
| 327 | .book-cover img {
|
|---|
| 328 | height: 100%;
|
|---|
| 329 | width: auto;
|
|---|
| 330 | max-width: 100%;
|
|---|
| 331 | object-fit: contain;
|
|---|
| 332 | display: block;
|
|---|
| 333 | border-radius: 5px;
|
|---|
| 334 | box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
|
|---|
| 335 | }
|
|---|
| 336 |
|
|---|
| 337 | .book-placeholder {
|
|---|
| 338 | font-size: 70px;
|
|---|
| 339 | }
|
|---|
| 340 |
|
|---|
| 341 | .book-info {
|
|---|
| 342 | padding: 20px;
|
|---|
| 343 | }
|
|---|
| 344 |
|
|---|
| 345 | .book-info h3 {
|
|---|
| 346 | font-size: 19px;
|
|---|
| 347 | margin-bottom: 12px;
|
|---|
| 348 | }
|
|---|
| 349 |
|
|---|
| 350 | .price {
|
|---|
| 351 | color: #4f6545;
|
|---|
| 352 | font-size: 18px;
|
|---|
| 353 | font-weight: bold;
|
|---|
| 354 | margin-bottom: 18px;
|
|---|
| 355 | }
|
|---|
| 356 |
|
|---|
| 357 | .book-info button {
|
|---|
| 358 | width: 100%;
|
|---|
| 359 | padding: 11px;
|
|---|
| 360 | border: none;
|
|---|
| 361 | border-radius: 8px;
|
|---|
| 362 | background-color: #4f6545;
|
|---|
| 363 | color: white;
|
|---|
| 364 | cursor: pointer;
|
|---|
| 365 | font-size: 14px;
|
|---|
| 366 | }
|
|---|
| 367 |
|
|---|
| 368 | .details-btn {
|
|---|
| 369 | display: block;
|
|---|
| 370 | width: 100%;
|
|---|
| 371 | padding: 11px;
|
|---|
| 372 | border-radius: 8px;
|
|---|
| 373 | background-color: #4f6545;
|
|---|
| 374 | color: white;
|
|---|
| 375 | text-decoration: none;
|
|---|
| 376 | text-align: center;
|
|---|
| 377 | font-size: 14px;
|
|---|
| 378 | cursor: pointer;
|
|---|
| 379 | transition: 0.2s;
|
|---|
| 380 | }
|
|---|
| 381 |
|
|---|
| 382 | .details-btn:hover {
|
|---|
| 383 | background-color: #3f5637;
|
|---|
| 384 | }
|
|---|
| 385 |
|
|---|
| 386 | .no-results {
|
|---|
| 387 | grid-column: 1 / -1;
|
|---|
| 388 | padding: 25px;
|
|---|
| 389 | background: #f8f5ef;
|
|---|
| 390 | border: 1px solid #e7dfd1;
|
|---|
| 391 | border-radius: 12px;
|
|---|
| 392 | color: #69645d;
|
|---|
| 393 | text-align: center;
|
|---|
| 394 | font-size: 16px;
|
|---|
| 395 | }
|
|---|
| 396 |
|
|---|
| 397 |
|
|---|
| 398 | /* =========================================
|
|---|
| 399 | ДЕТАЛИ ЗА КНИГА
|
|---|
| 400 | ========================================= */
|
|---|
| 401 |
|
|---|
| 402 | .book-details {
|
|---|
| 403 | min-height: calc(100vh - 80px);
|
|---|
| 404 | padding: 70px 12%;
|
|---|
| 405 | display: flex;
|
|---|
| 406 | align-items: center;
|
|---|
| 407 | justify-content: center;
|
|---|
| 408 | gap: 80px;
|
|---|
| 409 | background: #f8f5ef;
|
|---|
| 410 | }
|
|---|
| 411 |
|
|---|
| 412 | .details-cover {
|
|---|
| 413 | width: 320px;
|
|---|
| 414 | height: 430px;
|
|---|
| 415 | background: #eee8dd;
|
|---|
| 416 | border-radius: 18px;
|
|---|
| 417 | display: flex;
|
|---|
| 418 | align-items: center;
|
|---|
| 419 | justify-content: center;
|
|---|
| 420 | padding: 10px;
|
|---|
| 421 | box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
|
|---|
| 422 | overflow: hidden;
|
|---|
| 423 | }
|
|---|
| 424 |
|
|---|
| 425 | .details-cover img {
|
|---|
| 426 | width: auto;
|
|---|
| 427 | height: 92%;
|
|---|
| 428 | max-width: 92%;
|
|---|
| 429 | object-fit: contain;
|
|---|
| 430 | display: block;
|
|---|
| 431 | border-radius: 6px;
|
|---|
| 432 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
|
|---|
| 433 | }
|
|---|
| 434 |
|
|---|
| 435 | .details-info {
|
|---|
| 436 | max-width: 550px;
|
|---|
| 437 | }
|
|---|
| 438 |
|
|---|
| 439 | .details-label {
|
|---|
| 440 | color: #4f6545;
|
|---|
| 441 | font-size: 12px;
|
|---|
| 442 | font-weight: bold;
|
|---|
| 443 | letter-spacing: 2px;
|
|---|
| 444 | }
|
|---|
| 445 |
|
|---|
| 446 | .details-info h1 {
|
|---|
| 447 | font-size: 45px;
|
|---|
| 448 | margin: 12px 0 15px;
|
|---|
| 449 | color: #25231f;
|
|---|
| 450 | }
|
|---|
| 451 |
|
|---|
| 452 | .details-year {
|
|---|
| 453 | color: #777168;
|
|---|
| 454 | margin-bottom: 25px;
|
|---|
| 455 | }
|
|---|
| 456 |
|
|---|
| 457 | .details-description {
|
|---|
| 458 | font-size: 17px;
|
|---|
| 459 | line-height: 1.7;
|
|---|
| 460 | color: #5f5a53;
|
|---|
| 461 | margin-bottom: 25px;
|
|---|
| 462 | }
|
|---|
| 463 |
|
|---|
| 464 | .details-price {
|
|---|
| 465 | font-size: 27px;
|
|---|
| 466 | font-weight: bold;
|
|---|
| 467 | color: #4f6545;
|
|---|
| 468 | margin-bottom: 25px;
|
|---|
| 469 | }
|
|---|
| 470 |
|
|---|
| 471 | .buy-btn {
|
|---|
| 472 | padding: 14px 30px;
|
|---|
| 473 | border: none;
|
|---|
| 474 | border-radius: 9px;
|
|---|
| 475 | background: #4f6545;
|
|---|
| 476 | color: white;
|
|---|
| 477 | font-size: 16px;
|
|---|
| 478 | cursor: pointer;
|
|---|
| 479 | }
|
|---|
| 480 |
|
|---|
| 481 | .favorite-btn {
|
|---|
| 482 | padding: 14px 30px;
|
|---|
| 483 | margin-left: 10px;
|
|---|
| 484 | border: 1px solid #4f6545;
|
|---|
| 485 | border-radius: 9px;
|
|---|
| 486 | background: transparent;
|
|---|
| 487 | color: #4f6545;
|
|---|
| 488 | font-size: 16px;
|
|---|
| 489 | cursor: pointer;
|
|---|
| 490 | }
|
|---|
| 491 |
|
|---|
| 492 | .favorite-btn:hover {
|
|---|
| 493 | background: #eef1eb;
|
|---|
| 494 | }
|
|---|
| 495 |
|
|---|
| 496 | .remove-favorite-btn {
|
|---|
| 497 | width: 100%;
|
|---|
| 498 | margin-top: 10px;
|
|---|
| 499 | padding: 11px;
|
|---|
| 500 | border: 1px solid #a85d5d;
|
|---|
| 501 | border-radius: 8px;
|
|---|
| 502 | background: transparent;
|
|---|
| 503 | color: #a85d5d;
|
|---|
| 504 | font-size: 14px;
|
|---|
| 505 | cursor: pointer;
|
|---|
| 506 | transition: 0.3s;
|
|---|
| 507 | }
|
|---|
| 508 |
|
|---|
| 509 | .remove-favorite-btn:hover {
|
|---|
| 510 | background: #a85d5d;
|
|---|
| 511 | color: white;
|
|---|
| 512 | }
|
|---|
| 513 |
|
|---|
| 514 |
|
|---|
| 515 | /* =========================================
|
|---|
| 516 | ПЕРСОНАЛИЗИРАНИ ПРЕПОРАКИ
|
|---|
| 517 | ========================================= */
|
|---|
| 518 |
|
|---|
| 519 | .recommendations-section {
|
|---|
| 520 | max-width: 1200px;
|
|---|
| 521 | margin: 0 auto;
|
|---|
| 522 | padding: 60px 40px;
|
|---|
| 523 | }
|
|---|
| 524 |
|
|---|
| 525 | .recommendations-section > h1 {
|
|---|
| 526 | font-size: 38px;
|
|---|
| 527 | margin: 10px 0 10px;
|
|---|
| 528 | color: #222;
|
|---|
| 529 | }
|
|---|
| 530 |
|
|---|
| 531 | .recommendations-text {
|
|---|
| 532 | font-size: 17px;
|
|---|
| 533 | color: #666;
|
|---|
| 534 | margin-bottom: 35px;
|
|---|
| 535 | }
|
|---|
| 536 |
|
|---|
| 537 | .mood-grid {
|
|---|
| 538 | display: grid;
|
|---|
| 539 | grid-template-columns: repeat(5, 1fr);
|
|---|
| 540 | gap: 15px;
|
|---|
| 541 | margin-top: 25px;
|
|---|
| 542 | margin-bottom: 55px;
|
|---|
| 543 | }
|
|---|
| 544 |
|
|---|
| 545 | .mood-card {
|
|---|
| 546 | background: white;
|
|---|
| 547 | border: 1px solid #ded8cc;
|
|---|
| 548 | border-radius: 12px;
|
|---|
| 549 | padding: 22px 18px;
|
|---|
| 550 | text-decoration: none;
|
|---|
| 551 | color: #222;
|
|---|
| 552 | transition: 0.25s;
|
|---|
| 553 | min-height: 115px;
|
|---|
| 554 | }
|
|---|
| 555 |
|
|---|
| 556 | .mood-card:hover {
|
|---|
| 557 | transform: translateY(-4px);
|
|---|
| 558 | border-color: #4d6845;
|
|---|
| 559 | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|---|
| 560 | }
|
|---|
| 561 |
|
|---|
| 562 | .mood-card h3 {
|
|---|
| 563 | color: #4d6845;
|
|---|
| 564 | margin: 0 0 10px;
|
|---|
| 565 | font-size: 18px;
|
|---|
| 566 | }
|
|---|
| 567 |
|
|---|
| 568 | .mood-card p {
|
|---|
| 569 | margin: 0;
|
|---|
| 570 | color: #777;
|
|---|
| 571 | font-size: 14px;
|
|---|
| 572 | line-height: 1.5;
|
|---|
| 573 | }
|
|---|
| 574 |
|
|---|
| 575 | .recommended-books {
|
|---|
| 576 | margin-top: 20px;
|
|---|
| 577 | }
|
|---|
| 578 |
|
|---|
| 579 | .recommended-books > h2 {
|
|---|
| 580 | font-size: 28px;
|
|---|
| 581 | margin: 8px 0 25px;
|
|---|
| 582 | color: #222;
|
|---|
| 583 | }
|
|---|
| 584 |
|
|---|
| 585 | .personalized-recommendations {
|
|---|
| 586 | margin-bottom: 55px;
|
|---|
| 587 | }
|
|---|
| 588 |
|
|---|
| 589 | .mood-recommendations {
|
|---|
| 590 | padding-top: 35px;
|
|---|
| 591 | border-top: 1px solid #ddd5c8;
|
|---|
| 592 | }
|
|---|
| 593 |
|
|---|
| 594 | .mood-card.selected-mood {
|
|---|
| 595 | border: 2px solid #4f6b45;
|
|---|
| 596 | background: #f1f5ee;
|
|---|
| 597 | box-shadow: 0 4px 12px rgba(79, 107, 69, 0.12);
|
|---|
| 598 | }
|
|---|
| 599 |
|
|---|
| 600 | .mood-card.selected-mood h3 {
|
|---|
| 601 | color: #3f5d37;
|
|---|
| 602 | }
|
|---|
| 603 |
|
|---|
| 604 |
|
|---|
| 605 | /* =========================================
|
|---|
| 606 | УСПЕШНО КУПУВАЊЕ
|
|---|
| 607 | ========================================= */
|
|---|
| 608 |
|
|---|
| 609 | .purchase-success {
|
|---|
| 610 | max-width: 700px;
|
|---|
| 611 | margin: 70px auto;
|
|---|
| 612 | padding: 50px;
|
|---|
| 613 | text-align: center;
|
|---|
| 614 | background: white;
|
|---|
| 615 | border: 1px solid #ded8cc;
|
|---|
| 616 | border-radius: 16px;
|
|---|
| 617 | }
|
|---|
| 618 |
|
|---|
| 619 | .success-icon {
|
|---|
| 620 | width: 70px;
|
|---|
| 621 | height: 70px;
|
|---|
| 622 | margin: 0 auto 20px;
|
|---|
| 623 | border-radius: 50%;
|
|---|
| 624 | background: #4d6845;
|
|---|
| 625 | color: white;
|
|---|
| 626 | font-size: 40px;
|
|---|
| 627 | line-height: 70px;
|
|---|
| 628 | font-weight: bold;
|
|---|
| 629 | }
|
|---|
| 630 |
|
|---|
| 631 | .purchase-success h1 {
|
|---|
| 632 | margin: 12px 0;
|
|---|
| 633 | font-size: 32px;
|
|---|
| 634 | color: #222;
|
|---|
| 635 | }
|
|---|
| 636 |
|
|---|
| 637 | .success-text {
|
|---|
| 638 | color: #666;
|
|---|
| 639 | font-size: 16px;
|
|---|
| 640 | margin-bottom: 30px;
|
|---|
| 641 | }
|
|---|
| 642 |
|
|---|
| 643 | .order-summary {
|
|---|
| 644 | margin: 30px 0;
|
|---|
| 645 | padding: 25px 30px;
|
|---|
| 646 | background: #f7f5f0;
|
|---|
| 647 | border-radius: 12px;
|
|---|
| 648 | text-align: left;
|
|---|
| 649 | }
|
|---|
| 650 |
|
|---|
| 651 | .order-summary h2 {
|
|---|
| 652 | margin-top: 0;
|
|---|
| 653 | margin-bottom: 20px;
|
|---|
| 654 | color: #4d6845;
|
|---|
| 655 | }
|
|---|
| 656 |
|
|---|
| 657 | .order-summary p {
|
|---|
| 658 | margin: 12px 0;
|
|---|
| 659 | color: #444;
|
|---|
| 660 | }
|
|---|
| 661 |
|
|---|
| 662 | .purchase-success .details-btn {
|
|---|
| 663 | display: inline-block;
|
|---|
| 664 | margin-top: 10px;
|
|---|
| 665 | }
|
|---|
| 666 |
|
|---|
| 667 |
|
|---|
| 668 | /* =========================================
|
|---|
| 669 | МОИ НАРАЧКИ
|
|---|
| 670 | ========================================= */
|
|---|
| 671 |
|
|---|
| 672 | .orders-section {
|
|---|
| 673 | max-width: 1000px;
|
|---|
| 674 | margin: 0 auto;
|
|---|
| 675 | padding: 60px 40px;
|
|---|
| 676 | }
|
|---|
| 677 |
|
|---|
| 678 | .orders-section > h1 {
|
|---|
| 679 | font-size: 38px;
|
|---|
| 680 | margin: 10px 0;
|
|---|
| 681 | color: #222;
|
|---|
| 682 | }
|
|---|
| 683 |
|
|---|
| 684 | .orders-intro {
|
|---|
| 685 | color: #666;
|
|---|
| 686 | font-size: 16px;
|
|---|
| 687 | margin-bottom: 35px;
|
|---|
| 688 | }
|
|---|
| 689 |
|
|---|
| 690 | .orders-list {
|
|---|
| 691 | display: flex;
|
|---|
| 692 | flex-direction: column;
|
|---|
| 693 | gap: 20px;
|
|---|
| 694 | }
|
|---|
| 695 |
|
|---|
| 696 | .order-card {
|
|---|
| 697 | background: white;
|
|---|
| 698 | border: 1px solid #ded8cc;
|
|---|
| 699 | border-radius: 14px;
|
|---|
| 700 | padding: 25px 30px;
|
|---|
| 701 | }
|
|---|
| 702 |
|
|---|
| 703 | .order-card-header {
|
|---|
| 704 | display: flex;
|
|---|
| 705 | justify-content: space-between;
|
|---|
| 706 | align-items: flex-start;
|
|---|
| 707 | padding-bottom: 18px;
|
|---|
| 708 | margin-bottom: 18px;
|
|---|
| 709 | border-bottom: 1px solid #e5e0d7;
|
|---|
| 710 | }
|
|---|
| 711 |
|
|---|
| 712 | .order-number {
|
|---|
| 713 | font-size: 20px;
|
|---|
| 714 | font-weight: bold;
|
|---|
| 715 | color: #222;
|
|---|
| 716 | }
|
|---|
| 717 |
|
|---|
| 718 | .order-date {
|
|---|
| 719 | margin: 7px 0 0;
|
|---|
| 720 | color: #777;
|
|---|
| 721 | font-size: 14px;
|
|---|
| 722 | }
|
|---|
| 723 |
|
|---|
| 724 | .order-status {
|
|---|
| 725 | background: #e8eee5;
|
|---|
| 726 | color: #4d6845;
|
|---|
| 727 | padding: 7px 14px;
|
|---|
| 728 | border-radius: 20px;
|
|---|
| 729 | font-size: 13px;
|
|---|
| 730 | font-weight: bold;
|
|---|
| 731 | }
|
|---|
| 732 |
|
|---|
| 733 | .order-card-body p {
|
|---|
| 734 | margin: 9px 0;
|
|---|
| 735 | color: #444;
|
|---|
| 736 | }
|
|---|
| 737 |
|
|---|
| 738 | .order-total {
|
|---|
| 739 | margin-top: 15px !important;
|
|---|
| 740 | font-size: 17px;
|
|---|
| 741 | color: #4d6845 !important;
|
|---|
| 742 | }
|
|---|
| 743 |
|
|---|
| 744 | .empty-orders {
|
|---|
| 745 | background: white;
|
|---|
| 746 | border: 1px solid #ded8cc;
|
|---|
| 747 | border-radius: 14px;
|
|---|
| 748 | padding: 35px;
|
|---|
| 749 | text-align: center;
|
|---|
| 750 | }
|
|---|
| 751 |
|
|---|
| 752 |
|
|---|
| 753 | /* =========================================
|
|---|
| 754 | НАЈАВА И РЕГИСТРАЦИЈА
|
|---|
| 755 | ========================================= */
|
|---|
| 756 |
|
|---|
| 757 | .auth-section {
|
|---|
| 758 | min-height: calc(100vh - 90px);
|
|---|
| 759 | display: flex;
|
|---|
| 760 | justify-content: center;
|
|---|
| 761 | align-items: flex-start;
|
|---|
| 762 | padding: 60px 20px;
|
|---|
| 763 | }
|
|---|
| 764 |
|
|---|
| 765 | .auth-card {
|
|---|
| 766 | width: 100%;
|
|---|
| 767 | max-width: 480px;
|
|---|
| 768 | background: white;
|
|---|
| 769 | border: 1px solid #ded8cc;
|
|---|
| 770 | border-radius: 16px;
|
|---|
| 771 | padding: 40px;
|
|---|
| 772 | }
|
|---|
| 773 |
|
|---|
| 774 | .auth-card h1 {
|
|---|
| 775 | font-size: 36px;
|
|---|
| 776 | margin: 10px 0;
|
|---|
| 777 | color: #222;
|
|---|
| 778 | }
|
|---|
| 779 |
|
|---|
| 780 | .auth-intro {
|
|---|
| 781 | color: #666;
|
|---|
| 782 | margin-bottom: 30px;
|
|---|
| 783 | }
|
|---|
| 784 |
|
|---|
| 785 | .form-group {
|
|---|
| 786 | display: flex;
|
|---|
| 787 | flex-direction: column;
|
|---|
| 788 | margin-bottom: 20px;
|
|---|
| 789 | }
|
|---|
| 790 |
|
|---|
| 791 | .form-group label {
|
|---|
| 792 | font-weight: 600;
|
|---|
| 793 | margin-bottom: 7px;
|
|---|
| 794 | color: #333;
|
|---|
| 795 | }
|
|---|
| 796 |
|
|---|
| 797 | .form-group input {
|
|---|
| 798 | width: 100%;
|
|---|
| 799 | padding: 13px 14px;
|
|---|
| 800 | border: 1px solid #d8d2c7;
|
|---|
| 801 | border-radius: 8px;
|
|---|
| 802 | font-size: 15px;
|
|---|
| 803 | }
|
|---|
| 804 |
|
|---|
| 805 | .form-group input:focus {
|
|---|
| 806 | outline: none;
|
|---|
| 807 | border-color: #526b49;
|
|---|
| 808 | }
|
|---|
| 809 |
|
|---|
| 810 | .auth-submit {
|
|---|
| 811 | width: 100%;
|
|---|
| 812 | padding: 14px;
|
|---|
| 813 | border: none;
|
|---|
| 814 | border-radius: 8px;
|
|---|
| 815 | background: #526b49;
|
|---|
| 816 | color: white;
|
|---|
| 817 | font-size: 16px;
|
|---|
| 818 | font-weight: 600;
|
|---|
| 819 | cursor: pointer;
|
|---|
| 820 | margin-top: 5px;
|
|---|
| 821 | }
|
|---|
| 822 |
|
|---|
| 823 | .auth-submit:hover {
|
|---|
| 824 | opacity: 0.9;
|
|---|
| 825 | }
|
|---|
| 826 |
|
|---|
| 827 | .auth-bottom-text {
|
|---|
| 828 | text-align: center;
|
|---|
| 829 | color: #666;
|
|---|
| 830 | margin-top: 22px;
|
|---|
| 831 | margin-bottom: 0;
|
|---|
| 832 | }
|
|---|
| 833 |
|
|---|
| 834 |
|
|---|
| 835 | /* =========================================
|
|---|
| 836 | PREFERENCES
|
|---|
| 837 | ========================================= */
|
|---|
| 838 |
|
|---|
| 839 | .preferences-section {
|
|---|
| 840 | padding: 60px 8% 90px;
|
|---|
| 841 | background: #f8f5ef;
|
|---|
| 842 | }
|
|---|
| 843 |
|
|---|
| 844 | .preferences-container {
|
|---|
| 845 | max-width: 1200px;
|
|---|
| 846 | margin: 0 auto;
|
|---|
| 847 | }
|
|---|
| 848 |
|
|---|
| 849 |
|
|---|
| 850 | /* ГЛАВЕН НАСЛОВ */
|
|---|
| 851 |
|
|---|
| 852 | .preferences-header {
|
|---|
| 853 | text-align: center;
|
|---|
| 854 | max-width: 760px;
|
|---|
| 855 | margin: 0 auto 45px;
|
|---|
| 856 | }
|
|---|
| 857 |
|
|---|
| 858 | .preferences-header h1 {
|
|---|
| 859 | font-size: 42px;
|
|---|
| 860 | margin: 10px 0 14px;
|
|---|
| 861 | color: #25231f;
|
|---|
| 862 | }
|
|---|
| 863 |
|
|---|
| 864 | .preferences-header p {
|
|---|
| 865 | color: #69645d;
|
|---|
| 866 | font-size: 16px;
|
|---|
| 867 | line-height: 1.7;
|
|---|
| 868 | }
|
|---|
| 869 |
|
|---|
| 870 |
|
|---|
| 871 | /* БЕЛА СЕКЦИЈА */
|
|---|
| 872 |
|
|---|
| 873 | .preferences-box {
|
|---|
| 874 | background: #ffffff;
|
|---|
| 875 | border: 1px solid #e5ded2;
|
|---|
| 876 | border-radius: 18px;
|
|---|
| 877 | padding: 32px;
|
|---|
| 878 | margin-bottom: 28px;
|
|---|
| 879 | box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
|
|---|
| 880 | }
|
|---|
| 881 |
|
|---|
| 882 | .preferences-box-header {
|
|---|
| 883 | margin-bottom: 25px;
|
|---|
| 884 | }
|
|---|
| 885 |
|
|---|
| 886 | .preferences-box-header h2 {
|
|---|
| 887 | font-size: 27px;
|
|---|
| 888 | color: #25231f;
|
|---|
| 889 | margin: 7px 0 6px;
|
|---|
| 890 | }
|
|---|
| 891 |
|
|---|
| 892 | .preferences-box-header p {
|
|---|
| 893 | color: #777168;
|
|---|
| 894 | font-size: 15px;
|
|---|
| 895 | }
|
|---|
| 896 |
|
|---|
| 897 |
|
|---|
| 898 | /* КАРТИЧКИ */
|
|---|
| 899 |
|
|---|
| 900 | .preferences-grid-new {
|
|---|
| 901 | display: grid;
|
|---|
| 902 | grid-template-columns: repeat(3, 1fr);
|
|---|
| 903 | gap: 16px;
|
|---|
| 904 | }
|
|---|
| 905 |
|
|---|
| 906 | .preference-card-new {
|
|---|
| 907 | position: relative;
|
|---|
| 908 | display: flex;
|
|---|
| 909 | align-items: flex-start;
|
|---|
| 910 | gap: 14px;
|
|---|
| 911 |
|
|---|
| 912 | min-height: 110px;
|
|---|
| 913 | padding: 20px;
|
|---|
| 914 |
|
|---|
| 915 | background: #faf9f6;
|
|---|
| 916 | border: 1px solid #ddd6ca;
|
|---|
| 917 | border-radius: 12px;
|
|---|
| 918 |
|
|---|
| 919 | cursor: pointer;
|
|---|
| 920 | transition: 0.2s ease;
|
|---|
| 921 | }
|
|---|
| 922 |
|
|---|
| 923 | .preference-card-new:hover {
|
|---|
| 924 | border-color: #4f6545;
|
|---|
| 925 | transform: translateY(-2px);
|
|---|
| 926 | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
|
|---|
| 927 | }
|
|---|
| 928 |
|
|---|
| 929 |
|
|---|
| 930 | /* ИЗБРАНА КАРТИЧКА */
|
|---|
| 931 |
|
|---|
| 932 | .preference-card-new:has(input:checked) {
|
|---|
| 933 | background: #f0f4ed;
|
|---|
| 934 | border: 2px solid #4f6545;
|
|---|
| 935 | }
|
|---|
| 936 |
|
|---|
| 937 |
|
|---|
| 938 | /* CHECKBOX */
|
|---|
| 939 |
|
|---|
| 940 | .preference-card-new input {
|
|---|
| 941 | width: 19px;
|
|---|
| 942 | height: 19px;
|
|---|
| 943 | margin-top: 2px;
|
|---|
| 944 | flex-shrink: 0;
|
|---|
| 945 | accent-color: #4f6545;
|
|---|
| 946 | cursor: pointer;
|
|---|
| 947 | }
|
|---|
| 948 |
|
|---|
| 949 |
|
|---|
| 950 | /* ТЕКСТ ВО КАРТИЧКАТА */
|
|---|
| 951 |
|
|---|
| 952 | .preference-content h3 {
|
|---|
| 953 | font-size: 17px;
|
|---|
| 954 | color: #25231f;
|
|---|
| 955 | margin: 0 0 7px;
|
|---|
| 956 | }
|
|---|
| 957 |
|
|---|
| 958 | .preference-content p {
|
|---|
| 959 | font-size: 14px;
|
|---|
| 960 | color: #777168;
|
|---|
| 961 | line-height: 1.5;
|
|---|
| 962 | margin: 0;
|
|---|
| 963 | }
|
|---|
| 964 |
|
|---|
| 965 |
|
|---|
| 966 | /* ДОЛЕН ДЕЛ */
|
|---|
| 967 |
|
|---|
| 968 | .preferences-save-new {
|
|---|
| 969 | margin-top: 35px;
|
|---|
| 970 | text-align: center;
|
|---|
| 971 | }
|
|---|
| 972 |
|
|---|
| 973 | .preferences-save-new p {
|
|---|
| 974 | color: #777168;
|
|---|
| 975 | font-size: 14px;
|
|---|
| 976 | margin-bottom: 15px;
|
|---|
| 977 | }
|
|---|
| 978 |
|
|---|
| 979 | .preferences-save-new .buy-btn {
|
|---|
| 980 | min-width: 280px;
|
|---|
| 981 | padding: 15px 30px;
|
|---|
| 982 | font-weight: 600;
|
|---|
| 983 | transition: 0.2s ease;
|
|---|
| 984 | }
|
|---|
| 985 |
|
|---|
| 986 | .preferences-save-new .buy-btn:hover {
|
|---|
| 987 | background: #3f5637;
|
|---|
| 988 | }
|
|---|
| 989 |
|
|---|
| 990 |
|
|---|
| 991 | /* RESPONSIVE ЗА PREFЕРЕНЦИИ */
|
|---|
| 992 |
|
|---|
| 993 | @media (max-width: 1000px) {
|
|---|
| 994 |
|
|---|
| 995 | .preferences-grid-new {
|
|---|
| 996 | grid-template-columns: repeat(2, 1fr);
|
|---|
| 997 | }
|
|---|
| 998 | }
|
|---|
| 999 |
|
|---|
| 1000 | @media (max-width: 650px) {
|
|---|
| 1001 |
|
|---|
| 1002 | .preferences-section {
|
|---|
| 1003 | padding: 40px 20px 60px;
|
|---|
| 1004 | }
|
|---|
| 1005 |
|
|---|
| 1006 | .preferences-header h1 {
|
|---|
| 1007 | font-size: 34px;
|
|---|
| 1008 | }
|
|---|
| 1009 |
|
|---|
| 1010 | .preferences-box {
|
|---|
| 1011 | padding: 22px;
|
|---|
| 1012 | }
|
|---|
| 1013 |
|
|---|
| 1014 | .preferences-grid-new {
|
|---|
| 1015 | grid-template-columns: 1fr;
|
|---|
| 1016 | }
|
|---|
| 1017 |
|
|---|
| 1018 | .preferences-save-new .buy-btn {
|
|---|
| 1019 | width: 100%;
|
|---|
| 1020 | min-width: 0;
|
|---|
| 1021 | }
|
|---|
| 1022 | }
|
|---|
| 1023 |
|
|---|
| 1024 |
|
|---|
| 1025 | /* =========================================
|
|---|
| 1026 | RESPONSIVE
|
|---|
| 1027 | ========================================= */
|
|---|
| 1028 |
|
|---|
| 1029 | @media (max-width: 1100px) {
|
|---|
| 1030 |
|
|---|
| 1031 | .hero h1 {
|
|---|
| 1032 | font-size: 47px;
|
|---|
| 1033 | }
|
|---|
| 1034 |
|
|---|
| 1035 | .hero-content {
|
|---|
| 1036 | padding-left: 7%;
|
|---|
| 1037 | }
|
|---|
| 1038 |
|
|---|
| 1039 | .books-grid {
|
|---|
| 1040 | grid-template-columns: repeat(2, 1fr);
|
|---|
| 1041 | }
|
|---|
| 1042 |
|
|---|
| 1043 | .mood-grid {
|
|---|
| 1044 | grid-template-columns: repeat(2, 1fr);
|
|---|
| 1045 | }
|
|---|
| 1046 | }
|
|---|
| 1047 |
|
|---|
| 1048 |
|
|---|
| 1049 | @media (max-width: 800px) {
|
|---|
| 1050 |
|
|---|
| 1051 | .hero {
|
|---|
| 1052 | height: auto;
|
|---|
| 1053 | flex-direction: column;
|
|---|
| 1054 | }
|
|---|
| 1055 |
|
|---|
| 1056 | .hero-content {
|
|---|
| 1057 | width: 100%;
|
|---|
| 1058 | height: auto;
|
|---|
| 1059 | min-height: auto;
|
|---|
| 1060 | padding: 60px 8%;
|
|---|
| 1061 | }
|
|---|
| 1062 |
|
|---|
| 1063 | .hero-image {
|
|---|
| 1064 | width: 100%;
|
|---|
| 1065 | height: 350px;
|
|---|
| 1066 | min-height: 350px;
|
|---|
| 1067 | margin-left: 0;
|
|---|
| 1068 | }
|
|---|
| 1069 |
|
|---|
| 1070 | .hero-image img {
|
|---|
| 1071 | height: 350px;
|
|---|
| 1072 | }
|
|---|
| 1073 |
|
|---|
| 1074 | .hero-image::before {
|
|---|
| 1075 | width: 100%;
|
|---|
| 1076 | height: 100px;
|
|---|
| 1077 | top: 0;
|
|---|
| 1078 |
|
|---|
| 1079 | background: linear-gradient(
|
|---|
| 1080 | to bottom,
|
|---|
| 1081 | #f4efe6 0%,
|
|---|
| 1082 | rgba(244, 239, 230, 0) 100%
|
|---|
| 1083 | );
|
|---|
| 1084 | }
|
|---|
| 1085 |
|
|---|
| 1086 | .navbar {
|
|---|
| 1087 | height: auto;
|
|---|
| 1088 | min-height: 80px;
|
|---|
| 1089 | padding-top: 15px;
|
|---|
| 1090 | padding-bottom: 15px;
|
|---|
| 1091 | gap: 15px;
|
|---|
| 1092 | flex-wrap: wrap;
|
|---|
| 1093 | }
|
|---|
| 1094 |
|
|---|
| 1095 | .navbar nav {
|
|---|
| 1096 | gap: 18px;
|
|---|
| 1097 | flex-wrap: wrap;
|
|---|
| 1098 | }
|
|---|
| 1099 | }
|
|---|
| 1100 |
|
|---|
| 1101 |
|
|---|
| 1102 | @media (max-width: 600px) {
|
|---|
| 1103 |
|
|---|
| 1104 | .hero h1 {
|
|---|
| 1105 | font-size: 39px;
|
|---|
| 1106 | }
|
|---|
| 1107 |
|
|---|
| 1108 | .hero p {
|
|---|
| 1109 | font-size: 16px;
|
|---|
| 1110 | }
|
|---|
| 1111 |
|
|---|
| 1112 | .books-grid {
|
|---|
| 1113 | grid-template-columns: 1fr;
|
|---|
| 1114 | }
|
|---|
| 1115 |
|
|---|
| 1116 | .books-section {
|
|---|
| 1117 | padding: 50px 6%;
|
|---|
| 1118 | }
|
|---|
| 1119 |
|
|---|
| 1120 | .recommendations-section,
|
|---|
| 1121 | .orders-section,
|
|---|
| 1122 | .preferences-section {
|
|---|
| 1123 | padding: 35px 20px;
|
|---|
| 1124 | }
|
|---|
| 1125 |
|
|---|
| 1126 | .mood-grid,
|
|---|
| 1127 | .preferences-grid {
|
|---|
| 1128 | grid-template-columns: 1fr;
|
|---|
| 1129 | }
|
|---|
| 1130 |
|
|---|
| 1131 | .order-card-header {
|
|---|
| 1132 | flex-direction: column;
|
|---|
| 1133 | gap: 12px;
|
|---|
| 1134 | }
|
|---|
| 1135 | }
|
|---|
| 1136 |
|
|---|
| 1137 | /* =========================================
|
|---|
| 1138 | КОЛИЧИНА ПРИ КУПУВАЊЕ
|
|---|
| 1139 | ========================================= */
|
|---|
| 1140 |
|
|---|
| 1141 | .purchase-form {
|
|---|
| 1142 | display: flex;
|
|---|
| 1143 | flex-direction: column;
|
|---|
| 1144 | align-items: flex-start;
|
|---|
| 1145 | gap: 12px;
|
|---|
| 1146 | margin-top: 22px;
|
|---|
| 1147 | margin-bottom: 12px;
|
|---|
| 1148 | }
|
|---|
| 1149 |
|
|---|
| 1150 | .quantity-box {
|
|---|
| 1151 | display: flex;
|
|---|
| 1152 | align-items: center;
|
|---|
| 1153 | gap: 12px;
|
|---|
| 1154 | }
|
|---|
| 1155 |
|
|---|
| 1156 | .quantity-box label {
|
|---|
| 1157 | font-size: 15px;
|
|---|
| 1158 | font-weight: 600;
|
|---|
| 1159 | color: #333;
|
|---|
| 1160 | }
|
|---|
| 1161 |
|
|---|
| 1162 | .quantity-select {
|
|---|
| 1163 | width: 75px;
|
|---|
| 1164 | height: 42px;
|
|---|
| 1165 | padding: 0 12px;
|
|---|
| 1166 | border: 1px solid #9da994;
|
|---|
| 1167 | border-radius: 8px;
|
|---|
| 1168 | background-color: #ffffff;
|
|---|
| 1169 | color: #222;
|
|---|
| 1170 | font-size: 16px;
|
|---|
| 1171 | font-weight: 600;
|
|---|
| 1172 | cursor: pointer;
|
|---|
| 1173 | outline: none;
|
|---|
| 1174 | }
|
|---|
| 1175 |
|
|---|
| 1176 | .quantity-select:focus {
|
|---|
| 1177 | border-color: #526f47;
|
|---|
| 1178 | }
|
|---|
| 1179 |
|
|---|
| 1180 | .purchase-form .buy-btn {
|
|---|
| 1181 | min-width: 150px;
|
|---|
| 1182 | margin: 0;
|
|---|
| 1183 | }
|
|---|
| 1184 |
|
|---|
| 1185 | /* MODERN QUANTITY SELECTOR */
|
|---|
| 1186 |
|
|---|
| 1187 | .quantity-box {
|
|---|
| 1188 | display: flex;
|
|---|
| 1189 | align-items: center;
|
|---|
| 1190 | gap: 16px;
|
|---|
| 1191 | }
|
|---|
| 1192 |
|
|---|
| 1193 | .quantity-label {
|
|---|
| 1194 | font-size: 15px;
|
|---|
| 1195 | font-weight: 600;
|
|---|
| 1196 | color: #333;
|
|---|
| 1197 | }
|
|---|
| 1198 |
|
|---|
| 1199 | .quantity-control {
|
|---|
| 1200 | display: flex;
|
|---|
| 1201 | align-items: center;
|
|---|
| 1202 | height: 42px;
|
|---|
| 1203 | border: 1px solid #a7b09f;
|
|---|
| 1204 | border-radius: 10px;
|
|---|
| 1205 | overflow: hidden;
|
|---|
| 1206 | background: #ffffff;
|
|---|
| 1207 | }
|
|---|
| 1208 |
|
|---|
| 1209 | .quantity-control input {
|
|---|
| 1210 | width: 42px;
|
|---|
| 1211 | height: 40px;
|
|---|
| 1212 | border: none;
|
|---|
| 1213 | outline: none;
|
|---|
| 1214 | text-align: center;
|
|---|
| 1215 | font-size: 15px;
|
|---|
| 1216 | font-weight: 600;
|
|---|
| 1217 | background: #ffffff;
|
|---|
| 1218 | color: #222;
|
|---|
| 1219 | appearance: textfield;
|
|---|
| 1220 | }
|
|---|
| 1221 |
|
|---|
| 1222 | .quantity-control input::-webkit-outer-spin-button,
|
|---|
| 1223 | .quantity-control input::-webkit-inner-spin-button {
|
|---|
| 1224 | -webkit-appearance: none;
|
|---|
| 1225 | margin: 0;
|
|---|
| 1226 | }
|
|---|
| 1227 |
|
|---|
| 1228 | .quantity-btn {
|
|---|
| 1229 | width: 38px;
|
|---|
| 1230 | height: 40px;
|
|---|
| 1231 | border: none;
|
|---|
| 1232 | background: transparent;
|
|---|
| 1233 | color: #526f47;
|
|---|
| 1234 | font-size: 20px;
|
|---|
| 1235 | font-weight: 500;
|
|---|
| 1236 | cursor: pointer;
|
|---|
| 1237 | transition: background 0.2s ease;
|
|---|
| 1238 | }
|
|---|
| 1239 |
|
|---|
| 1240 | .quantity-btn:hover {
|
|---|
| 1241 | background: #f0f3ed;
|
|---|
| 1242 | }
|
|---|
| 1243 |
|
|---|
| 1244 | /* =========================================
|
|---|
| 1245 | PREFERENCES - TWO COLUMN LAYOUT
|
|---|
| 1246 | ========================================= */
|
|---|
| 1247 |
|
|---|
| 1248 | .preferences-columns {
|
|---|
| 1249 | display: grid;
|
|---|
| 1250 | grid-template-columns: 1fr 1fr;
|
|---|
| 1251 | gap: 24px;
|
|---|
| 1252 | align-items: start;
|
|---|
| 1253 | margin-top: 28px;
|
|---|
| 1254 | }
|
|---|
| 1255 |
|
|---|
| 1256 | .preferences-column {
|
|---|
| 1257 | margin: 0;
|
|---|
| 1258 | padding: 28px;
|
|---|
| 1259 | height: 100%;
|
|---|
| 1260 | }
|
|---|
| 1261 |
|
|---|
| 1262 | .preferences-column .preferences-box-header {
|
|---|
| 1263 | margin-bottom: 22px;
|
|---|
| 1264 | }
|
|---|
| 1265 |
|
|---|
| 1266 | .preferences-column .preferences-box-header h2 {
|
|---|
| 1267 | margin: 6px 0 8px;
|
|---|
| 1268 | font-size: 24px;
|
|---|
| 1269 | }
|
|---|
| 1270 |
|
|---|
| 1271 | .preferences-column .preferences-box-header p {
|
|---|
| 1272 | margin: 0;
|
|---|
| 1273 | font-size: 14px;
|
|---|
| 1274 | line-height: 1.5;
|
|---|
| 1275 | color: #777;
|
|---|
| 1276 | }
|
|---|
| 1277 |
|
|---|
| 1278 | /* Опциите во секоја страна */
|
|---|
| 1279 |
|
|---|
| 1280 | .preferences-grid-compact {
|
|---|
| 1281 | display: grid;
|
|---|
| 1282 | grid-template-columns: 1fr 1fr;
|
|---|
| 1283 | gap: 14px;
|
|---|
| 1284 | }
|
|---|
| 1285 |
|
|---|
| 1286 | .preferences-grid-compact .preference-card-new {
|
|---|
| 1287 | min-height: 105px;
|
|---|
| 1288 | padding: 17px;
|
|---|
| 1289 | margin: 0;
|
|---|
| 1290 | }
|
|---|
| 1291 |
|
|---|
| 1292 | .preferences-grid-compact .preference-content h3 {
|
|---|
| 1293 | margin: 0 0 6px;
|
|---|
| 1294 | font-size: 15px;
|
|---|
| 1295 | }
|
|---|
| 1296 |
|
|---|
| 1297 | .preferences-grid-compact .preference-content p {
|
|---|
| 1298 | margin: 0;
|
|---|
| 1299 | font-size: 12px;
|
|---|
| 1300 | line-height: 1.4;
|
|---|
| 1301 | }
|
|---|
| 1302 |
|
|---|
| 1303 | /* Копчето за зачувување */
|
|---|
| 1304 |
|
|---|
| 1305 | .preferences-save-new {
|
|---|
| 1306 | margin-top: 28px;
|
|---|
| 1307 | text-align: center;
|
|---|
| 1308 | }
|
|---|
| 1309 |
|
|---|
| 1310 | .preferences-save-new p {
|
|---|
| 1311 | margin-bottom: 14px;
|
|---|
| 1312 | }
|
|---|
| 1313 |
|
|---|
| 1314 | .preferences-save-new .buy-btn {
|
|---|
| 1315 | min-width: 250px;
|
|---|
| 1316 | }
|
|---|
| 1317 |
|
|---|
| 1318 |
|
|---|
| 1319 | /* Responsive */
|
|---|
| 1320 |
|
|---|
| 1321 | @media (max-width: 1000px) {
|
|---|
| 1322 |
|
|---|
| 1323 | .preferences-columns {
|
|---|
| 1324 | grid-template-columns: 1fr;
|
|---|
| 1325 | }
|
|---|
| 1326 |
|
|---|
| 1327 | }
|
|---|
| 1328 |
|
|---|
| 1329 | @media (max-width: 650px) {
|
|---|
| 1330 |
|
|---|
| 1331 | .preferences-grid-compact {
|
|---|
| 1332 | grid-template-columns: 1fr;
|
|---|
| 1333 | }
|
|---|
| 1334 |
|
|---|
| 1335 | }
|
|---|
| 1336 |
|
|---|
| 1337 | /* ==================================================
|
|---|
| 1338 | ADMIN PANEL
|
|---|
| 1339 | ================================================== */
|
|---|
| 1340 |
|
|---|
| 1341 | .admin-page {
|
|---|
| 1342 | min-height: calc(100vh - 85px);
|
|---|
| 1343 | background: #f8f5ef;
|
|---|
| 1344 | padding: 70px 8% 100px;
|
|---|
| 1345 | }
|
|---|
| 1346 |
|
|---|
| 1347 | .admin-header {
|
|---|
| 1348 | max-width: 1200px;
|
|---|
| 1349 | margin: 0 auto 45px;
|
|---|
| 1350 | }
|
|---|
| 1351 |
|
|---|
| 1352 | .admin-label {
|
|---|
| 1353 | color: #526d4b;
|
|---|
| 1354 | font-size: 13px;
|
|---|
| 1355 | font-weight: 700;
|
|---|
| 1356 | letter-spacing: 2px;
|
|---|
| 1357 | margin-bottom: 10px;
|
|---|
| 1358 | }
|
|---|
| 1359 |
|
|---|
| 1360 | .admin-header h1 {
|
|---|
| 1361 | font-size: 42px;
|
|---|
| 1362 | margin: 0 0 12px;
|
|---|
| 1363 | color: #1e1e1e;
|
|---|
| 1364 | }
|
|---|
| 1365 |
|
|---|
| 1366 | .admin-header p {
|
|---|
| 1367 | color: #6d665d;
|
|---|
| 1368 | font-size: 17px;
|
|---|
| 1369 | margin: 0;
|
|---|
| 1370 | }
|
|---|
| 1371 |
|
|---|
| 1372 | .admin-grid {
|
|---|
| 1373 | max-width: 1200px;
|
|---|
| 1374 | margin: 0 auto;
|
|---|
| 1375 | display: grid;
|
|---|
| 1376 | grid-template-columns: repeat(3, 1fr);
|
|---|
| 1377 | gap: 25px;
|
|---|
| 1378 | }
|
|---|
| 1379 |
|
|---|
| 1380 | .admin-card {
|
|---|
| 1381 | background: white;
|
|---|
| 1382 | border: 1px solid #e2dbcf;
|
|---|
| 1383 | border-radius: 16px;
|
|---|
| 1384 | padding: 30px;
|
|---|
| 1385 | transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|---|
| 1386 | }
|
|---|
| 1387 |
|
|---|
| 1388 | .admin-card:hover {
|
|---|
| 1389 | transform: translateY(-4px);
|
|---|
| 1390 | box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
|
|---|
| 1391 | }
|
|---|
| 1392 |
|
|---|
| 1393 | .admin-icon {
|
|---|
| 1394 | width: 55px;
|
|---|
| 1395 | height: 55px;
|
|---|
| 1396 | display: flex;
|
|---|
| 1397 | align-items: center;
|
|---|
| 1398 | justify-content: center;
|
|---|
| 1399 | background: #f1eee7;
|
|---|
| 1400 | border-radius: 12px;
|
|---|
| 1401 | font-size: 27px;
|
|---|
| 1402 | margin-bottom: 20px;
|
|---|
| 1403 | }
|
|---|
| 1404 |
|
|---|
| 1405 | .admin-card h2 {
|
|---|
| 1406 | font-size: 22px;
|
|---|
| 1407 | color: #222;
|
|---|
| 1408 | margin: 0 0 10px;
|
|---|
| 1409 | }
|
|---|
| 1410 |
|
|---|
| 1411 | .admin-card p {
|
|---|
| 1412 | color: #746d64;
|
|---|
| 1413 | line-height: 1.6;
|
|---|
| 1414 | min-height: 52px;
|
|---|
| 1415 | margin-bottom: 24px;
|
|---|
| 1416 | }
|
|---|
| 1417 |
|
|---|
| 1418 | .admin-button {
|
|---|
| 1419 | display: inline-block;
|
|---|
| 1420 | text-decoration: none;
|
|---|
| 1421 | background: #526d4b;
|
|---|
| 1422 | color: white;
|
|---|
| 1423 | padding: 11px 18px;
|
|---|
| 1424 | border-radius: 8px;
|
|---|
| 1425 | font-weight: 600;
|
|---|
| 1426 | font-size: 14px;
|
|---|
| 1427 | transition: 0.2s ease;
|
|---|
| 1428 | }
|
|---|
| 1429 |
|
|---|
| 1430 | .admin-button:hover {
|
|---|
| 1431 | background: #40583b;
|
|---|
| 1432 | }
|
|---|
| 1433 |
|
|---|
| 1434 | @media (max-width: 950px) {
|
|---|
| 1435 | .admin-grid {
|
|---|
| 1436 | grid-template-columns: repeat(2, 1fr);
|
|---|
| 1437 | }
|
|---|
| 1438 | }
|
|---|
| 1439 |
|
|---|
| 1440 | @media (max-width: 650px) {
|
|---|
| 1441 | .admin-grid {
|
|---|
| 1442 | grid-template-columns: 1fr;
|
|---|
| 1443 | }
|
|---|
| 1444 |
|
|---|
| 1445 | .admin-page {
|
|---|
| 1446 | padding: 45px 20px;
|
|---|
| 1447 | }
|
|---|
| 1448 |
|
|---|
| 1449 | .admin-header h1 {
|
|---|
| 1450 | font-size: 34px;
|
|---|
| 1451 | }
|
|---|
| 1452 | }
|
|---|
| 1453 |
|
|---|
| 1454 | /* ==================================================
|
|---|
| 1455 | ADMIN - BOOKS
|
|---|
| 1456 | ================================================== */
|
|---|
| 1457 |
|
|---|
| 1458 | .admin-books-section {
|
|---|
| 1459 | max-width: 1200px;
|
|---|
| 1460 | margin: 0 auto;
|
|---|
| 1461 | }
|
|---|
| 1462 |
|
|---|
| 1463 | .admin-books-top {
|
|---|
| 1464 | display: flex;
|
|---|
| 1465 | align-items: center;
|
|---|
| 1466 | justify-content: space-between;
|
|---|
| 1467 | margin-bottom: 25px;
|
|---|
| 1468 | }
|
|---|
| 1469 |
|
|---|
| 1470 | .admin-books-top h2 {
|
|---|
| 1471 | margin: 0;
|
|---|
| 1472 | font-size: 24px;
|
|---|
| 1473 | color: #222;
|
|---|
| 1474 | }
|
|---|
| 1475 |
|
|---|
| 1476 | .admin-table-wrapper {
|
|---|
| 1477 | background: white;
|
|---|
| 1478 | border: 1px solid #e2dbcf;
|
|---|
| 1479 | border-radius: 16px;
|
|---|
| 1480 | overflow: hidden;
|
|---|
| 1481 | }
|
|---|
| 1482 |
|
|---|
| 1483 | .admin-table {
|
|---|
| 1484 | width: 100%;
|
|---|
| 1485 | border-collapse: collapse;
|
|---|
| 1486 | }
|
|---|
| 1487 |
|
|---|
| 1488 | .admin-table thead {
|
|---|
| 1489 | background: #f1eee7;
|
|---|
| 1490 | }
|
|---|
| 1491 |
|
|---|
| 1492 | .admin-table th {
|
|---|
| 1493 | text-align: left;
|
|---|
| 1494 | padding: 16px 18px;
|
|---|
| 1495 | font-size: 14px;
|
|---|
| 1496 | color: #4e4942;
|
|---|
| 1497 | border-bottom: 1px solid #e2dbcf;
|
|---|
| 1498 | }
|
|---|
| 1499 |
|
|---|
| 1500 | .admin-table td {
|
|---|
| 1501 | padding: 17px 18px;
|
|---|
| 1502 | border-bottom: 1px solid #eee9e1;
|
|---|
| 1503 | color: #5e5851;
|
|---|
| 1504 | font-size: 14px;
|
|---|
| 1505 | }
|
|---|
| 1506 |
|
|---|
| 1507 | .admin-table tbody tr:last-child td {
|
|---|
| 1508 | border-bottom: none;
|
|---|
| 1509 | }
|
|---|
| 1510 |
|
|---|
| 1511 | .admin-table tbody tr:hover {
|
|---|
| 1512 | background: #faf8f4;
|
|---|
| 1513 | }
|
|---|
| 1514 |
|
|---|
| 1515 | .admin-actions {
|
|---|
| 1516 | white-space: nowrap;
|
|---|
| 1517 | }
|
|---|
| 1518 |
|
|---|
| 1519 | .admin-edit-btn {
|
|---|
| 1520 | display: inline-block;
|
|---|
| 1521 | text-decoration: none;
|
|---|
| 1522 | color: #526d4b;
|
|---|
| 1523 | border: 1px solid #526d4b;
|
|---|
| 1524 | padding: 7px 13px;
|
|---|
| 1525 | border-radius: 7px;
|
|---|
| 1526 | font-weight: 600;
|
|---|
| 1527 | transition: 0.2s ease;
|
|---|
| 1528 | }
|
|---|
| 1529 |
|
|---|
| 1530 | .admin-edit-btn:hover {
|
|---|
| 1531 | background: #526d4b;
|
|---|
| 1532 | color: white;
|
|---|
| 1533 | }
|
|---|
| 1534 |
|
|---|
| 1535 | .admin-back {
|
|---|
| 1536 | margin-top: 25px;
|
|---|
| 1537 | }
|
|---|
| 1538 |
|
|---|
| 1539 | .admin-back a {
|
|---|
| 1540 | color: #526d4b;
|
|---|
| 1541 | text-decoration: none;
|
|---|
| 1542 | font-weight: 600;
|
|---|
| 1543 | }
|
|---|
| 1544 |
|
|---|
| 1545 | .admin-back a:hover {
|
|---|
| 1546 | text-decoration: underline;
|
|---|
| 1547 | }
|
|---|
| 1548 |
|
|---|
| 1549 | /* ==================================================
|
|---|
| 1550 | ADMIN - FORM
|
|---|
| 1551 | ================================================== */
|
|---|
| 1552 |
|
|---|
| 1553 | .admin-form-section {
|
|---|
| 1554 | max-width: 900px;
|
|---|
| 1555 | margin: 0 auto;
|
|---|
| 1556 | }
|
|---|
| 1557 |
|
|---|
| 1558 | .admin-form {
|
|---|
| 1559 | background: white;
|
|---|
| 1560 | border: 1px solid #e2dbcf;
|
|---|
| 1561 | border-radius: 16px;
|
|---|
| 1562 | padding: 35px;
|
|---|
| 1563 |
|
|---|
| 1564 | display: grid;
|
|---|
| 1565 | grid-template-columns: repeat(2, 1fr);
|
|---|
| 1566 | gap: 22px;
|
|---|
| 1567 | }
|
|---|
| 1568 |
|
|---|
| 1569 | .admin-form-group {
|
|---|
| 1570 | display: flex;
|
|---|
| 1571 | flex-direction: column;
|
|---|
| 1572 | gap: 8px;
|
|---|
| 1573 | }
|
|---|
| 1574 |
|
|---|
| 1575 | .admin-form-full {
|
|---|
| 1576 | grid-column: 1 / -1;
|
|---|
| 1577 | }
|
|---|
| 1578 |
|
|---|
| 1579 | .admin-form-group label {
|
|---|
| 1580 | font-size: 14px;
|
|---|
| 1581 | font-weight: 600;
|
|---|
| 1582 | color: #3f3b36;
|
|---|
| 1583 | }
|
|---|
| 1584 |
|
|---|
| 1585 | .admin-form-group input,
|
|---|
| 1586 | .admin-form-group textarea {
|
|---|
| 1587 | width: 100%;
|
|---|
| 1588 | box-sizing: border-box;
|
|---|
| 1589 | padding: 12px 14px;
|
|---|
| 1590 |
|
|---|
| 1591 | border: 1px solid #d8d1c6;
|
|---|
| 1592 | border-radius: 8px;
|
|---|
| 1593 |
|
|---|
| 1594 | font-family: inherit;
|
|---|
| 1595 | font-size: 14px;
|
|---|
| 1596 | color: #333;
|
|---|
| 1597 |
|
|---|
| 1598 | background: #fff;
|
|---|
| 1599 | outline: none;
|
|---|
| 1600 | }
|
|---|
| 1601 |
|
|---|
| 1602 | .admin-form-group input:focus,
|
|---|
| 1603 | .admin-form-group textarea:focus {
|
|---|
| 1604 | border-color: #526d4b;
|
|---|
| 1605 | }
|
|---|
| 1606 |
|
|---|
| 1607 | .admin-form-group textarea {
|
|---|
| 1608 | resize: vertical;
|
|---|
| 1609 | }
|
|---|
| 1610 |
|
|---|
| 1611 | .admin-form-actions {
|
|---|
| 1612 | grid-column: 1 / -1;
|
|---|
| 1613 |
|
|---|
| 1614 | display: flex;
|
|---|
| 1615 | align-items: center;
|
|---|
| 1616 | gap: 15px;
|
|---|
| 1617 |
|
|---|
| 1618 | margin-top: 10px;
|
|---|
| 1619 | }
|
|---|
| 1620 |
|
|---|
| 1621 | .admin-form-actions button {
|
|---|
| 1622 | border: none;
|
|---|
| 1623 | cursor: pointer;
|
|---|
| 1624 | font-family: inherit;
|
|---|
| 1625 | }
|
|---|
| 1626 |
|
|---|
| 1627 | .admin-cancel-btn {
|
|---|
| 1628 | display: inline-block;
|
|---|
| 1629 | text-decoration: none;
|
|---|
| 1630 |
|
|---|
| 1631 | color: #665f57;
|
|---|
| 1632 | background: #f1eee7;
|
|---|
| 1633 |
|
|---|
| 1634 | padding: 11px 18px;
|
|---|
| 1635 | border-radius: 8px;
|
|---|
| 1636 |
|
|---|
| 1637 | font-size: 14px;
|
|---|
| 1638 | font-weight: 600;
|
|---|
| 1639 | }
|
|---|
| 1640 |
|
|---|
| 1641 | .admin-cancel-btn:hover {
|
|---|
| 1642 | background: #e5e0d7;
|
|---|
| 1643 | }
|
|---|
| 1644 |
|
|---|
| 1645 | @media (max-width: 700px) {
|
|---|
| 1646 | .admin-form {
|
|---|
| 1647 | grid-template-columns: 1fr;
|
|---|
| 1648 | }
|
|---|
| 1649 |
|
|---|
| 1650 | .admin-form-full,
|
|---|
| 1651 | .admin-form-actions {
|
|---|
| 1652 | grid-column: 1;
|
|---|
| 1653 | }
|
|---|
| 1654 | }
|
|---|
| 1655 |
|
|---|
| 1656 | /* DELETE BUTTON */
|
|---|
| 1657 | .admin-delete-btn {
|
|---|
| 1658 | background-color: #b84a4a;
|
|---|
| 1659 | color: white;
|
|---|
| 1660 | border: 1px solid #b84a4a;
|
|---|
| 1661 | padding: 7px 14px;
|
|---|
| 1662 | border-radius: 6px;
|
|---|
| 1663 | font-size: 14px;
|
|---|
| 1664 | font-weight: 600;
|
|---|
| 1665 | cursor: pointer;
|
|---|
| 1666 | transition: 0.2s ease;
|
|---|
| 1667 | }
|
|---|
| 1668 |
|
|---|
| 1669 | .admin-delete-btn:hover {
|
|---|
| 1670 | background-color: #963b3b;
|
|---|
| 1671 | border-color: #963b3b;
|
|---|
| 1672 | }
|
|---|
| 1673 |
|
|---|
| 1674 | /* --------------------------------------------------
|
|---|
| 1675 | PAGINATION
|
|---|
| 1676 | -------------------------------------------------- */
|
|---|
| 1677 |
|
|---|
| 1678 | .pagination {
|
|---|
| 1679 | display: flex;
|
|---|
| 1680 | justify-content: flex-end;
|
|---|
| 1681 | align-items: center;
|
|---|
| 1682 | gap: 12px;
|
|---|
| 1683 | margin-top: 18px;
|
|---|
| 1684 | margin-bottom: 10px;
|
|---|
| 1685 | }
|
|---|
| 1686 |
|
|---|
| 1687 | .pagination span {
|
|---|
| 1688 | font-size: 14px;
|
|---|
| 1689 | color: #555;
|
|---|
| 1690 | }
|
|---|
| 1691 |
|
|---|
| 1692 | .pagination a {
|
|---|
| 1693 | text-decoration: none;
|
|---|
| 1694 | padding: 8px 14px;
|
|---|
| 1695 | border: 1px solid #315c3b;
|
|---|
| 1696 | border-radius: 6px;
|
|---|
| 1697 | color: #315c3b;
|
|---|
| 1698 | font-size: 14px;
|
|---|
| 1699 | font-weight: 600;
|
|---|
| 1700 | background: white;
|
|---|
| 1701 | transition: 0.2s;
|
|---|
| 1702 | }
|
|---|
| 1703 |
|
|---|
| 1704 | .pagination a:hover {
|
|---|
| 1705 | background: #315c3b;
|
|---|
| 1706 | color: white;
|
|---|
| 1707 | } |
|---|
